http://doingthing.com/This is a work-in-progress. Help making this article great is requested.

http://doingthing.com/The following was done with Magento v1.3.2.4.

http://doingthing.com/I’ve been reading up on Magento’s packages and themes for a little while now. For the life of me, I can’t get a secondary theme to work. So I created a whole new package.

http://doingthing.com/This procedure will create a minimal, 2-column (left), non-complete, bare-bones package/theme that you can then fully customize. I did it from the command-line in linux, but I suppose you could do it from FTP or SCP. Just make sure you keep the paths correct.

http://doingthing.com/The reason for creating this package from scratch is so that I could get a better understanding of exactly how it works and what files do what. During this walk-through, you can reload your test Magento installation and either see a bare-bones theme, or an error message specifying the missing file. This will help you to see which files are necessary for which part of the system.

http://doingthing.com/1. In your installed magento directory, create a directory structure like this:

http://doingthing.com/app
 + design
    + frontend
       + your_new_theme_name  (package)
          + default  (theme in your new package)
             + layout
             + template

http://doingthing.com/(Note that the directory structure app/design/frontend already exists. That’s where all themes/packages reside.)

http://doingthing.com/2. In layout, copy these files from Magento’s default package:

http://doingthing.com/catalog.xml
catalogsearch.xml
checkout.xml
cms.xml  (homepage customization/content will not work without this file)
customer.xml
newsletter.xml
page.xml
wishlist.xml  (if you want wishlist capability)

http://doingthing.com/The page.xml file will be the default page layout .xml file used for every page in your site. Other layout .xml files will modify (or “update”) this base layout.

http://doingthing.com/Example copy command in linux for this step:

http://doingthing.com/cp ../../../default/default/layout/page.xml .

http://doingthing.com/The above command will only work if your current directory is app/design/frontend/your_new_theme_name/default/layout.

http://doingthing.com/3. In template, make these directories:

http://doingthing.com/callouts
catalog
catalogsearch
checkout
customer
page
reports
review

http://doingthing.com/4. In template/callouts, copy this file from Magento’s default package:

http://doingthing.com/left_col.phtml

http://doingthing.com/5. In template/catalog, create these directories:

http://doingthing.com/navigation
category  (will need this to view products)
product  (will need this to view products)

http://doingthing.com/6. In template/catalog/navigation, copy these files from Magento’s default package:

http://doingthing.com/top.phtml
left.phtml  (will need this to view products)

http://doingthing.com/7. In template/catalog/category, copy this file from Magento’s default package:

http://doingthing.com/view.phtml  (will need this to view products)

http://doingthing.com/8. In template/catalog/product, copy these files from Magento’s default package:

http://doingthing.com/list.phtml  (will need this to view products)
price.phtml  (will need this to view products)
new.phtml  (will need this to view products on the homepage)

http://doingthing.com/9. In template/catalog/product, create this directory:

http://doingthing.com/list  (will need this to view products)

http://doingthing.com/10. In template/catalog/product/list, copy this file from Magento’s default package:

http://doingthing.com/toolbar.phtml  (will need this to view products)

http://doingthing.com/11. In template/catalogsearch, copy this file from Magento’s default package:

http://doingthing.com/form.mini.phtml

http://doingthing.com/12. In template/checkout, create these directories:

http://doingthing.com/cart
onepage
total

http://doingthing.com/13. In template/checkout, copy this file from Magento’s default package:

http://doingthing.com/cart.phtml

http://doingthing.com/14. In template/checkout/cart, create this directory:

http://doingthing.com/item

http://doingthing.com/15. In template/checkout/cart, copy these files from Magento’s default package:

http://doingthing.com/crosssell.phtml
coupon.phtml
shipping.phtml
totals.phtml
noItems.phtml

http://doingthing.com/16. In template/checkout/cart/item, copy this file from Magento’s default package:

http://doingthing.com/default.phtml

http://doingthing.com/17. In template/checkout/onepage, copy this file from Magento’s default package:

http://doingthing.com/link.phtml

http://doingthing.com/18. In template/checkout/total, copy this file from Magento’s default package:

http://doingthing.com/default.phtml

http://doingthing.com/19. In template/customer, copy the entire directory structure from Magento’s default package:

http://doingthing.com/cp -a ../../../../default/default/template/customer/* .

http://doingthing.com/This will copy the following files/directories from /template/customer:

http://doingthing.com/.:
account/      address/  address.phtml  balance.phtml  dashboard.phtml  form/
logout.phtml  order/    orders.phtml   widget/        wishlist.phtml

./account:
dashboard/  dashboard.phtml  link/  navigation.phtml

./account/dashboard:
address.phtml  hello.phtml  info.phtml  newsletter.phtml  sidebar.phtml

./account/link:
back.phtml

./address:
book.phtml  edit.phtml

./form:
address.phtml     confirmation.phtml     forgotpassword.phtml  mini.login.phtml
newsletter.phtml  changepassword.phtml   edit.phtml
login.phtml       mini.newsletter.phtml  register.phtml

./order:
view.phtml

./widget:
dob.phtml  name.phtml  taxvat.phtml

http://doingthing.com/20. In template/page, copy these files from Magento’s default package:

http://doingthing.com/1column.phtml  (used for the login screen and only a few other places)
2columns-left.phtml  (used for virtually every page in your store)

http://doingthing.com/21. In template/page, create these directories:

http://doingthing.com/html
switch
template

http://doingthing.com/22. In template/page/html, copy these files from Magento’s default package:

http://doingthing.com/breadcrumbs.phtml
footer.phtml
header.phtml
head.phtml
notices.phtml

http://doingthing.com/23. In template/page/switch, copy these files from Magento’s default package:

http://doingthing.com/languages.phtml
stores.phtml

http://doingthing.com/24. In template/page/template, copy this file from Magento’s default package:

http://doingthing.com/links.phtml

http://doingthing.com/25. In template/reports, copy this file from Magento’s default package:

http://doingthing.com/home_product_viewed.phtml

http://doingthing.com/26. In template/review, make this directory:

http://doingthing.com/helper

http://doingthing.com/27. In template/review/helper, copy this file from Magento’s default package:

http://doingthing.com/summary_short.phtml

http://doingthing.com/28. In Magento’s admin, set your new package:

http://doingthing.com/a. System → Configuration

http://doingthing.com/b. In the upper-left area, set the configuration scope,

http://doingthing.com/c. Click on Design, in the Package section enter your_new_theme_name in Current package name.

http://doingthing.com/Now go to your storefront and reload. You should be looking at the default Magento theme without the images. In this walk-through, none of the images were copied over (intentionally) so that you can start with a nearly-blank theme and build it up to what you want from there.

http://doingthing.com/For our site, we don’t have any coupons, so I turned off the coupons feature by editing layout/checkout.xml and commenting-out this line:

http://doingthing.com/<block type="checkout/cart_coupon" name="checkout.cart.coupon" as="coupon" template="checkout/cart/coupon.phtml"/>

http://doingthing.com/It’s not necessary to comment-out the line in template/checkout/cart.phtml which calls ‘coupon’ (but you could if you wanted to):

http://doingthing.com/<?php echo $this->getChildHtml('coupon') ?>

http://doingthing.com/We also don’t need or want the “crosssell” section, so while I was in layout/checkout.xml I commented-out that line as well.

http://doingthing.com/When viewing your theme, it’s helpful to see which template file is being used for which part of the page. Magento has an excellent debugging tool called ‘Template Path Hints’.

http://doingthing.com/1. Admin → System → Configuration.

http://doingthing.com/2. Select your store from the drop-down in the upper-left corner and wait for the page to reload. Note that you have to be on the website level or lower. The ‘Template Path Hints’ option will not be visible if you are at a higher level.

http://doingthing.com/3. Advanced → Developer (all the way at the bottom).

http://doingthing.com/4. Template Path Hints → Yes.

http://doingthing.com/5. Hit the orange Save Config button.

http://doingthing.com/Go to your store and reload. You should see path specs in dashed boxes around all sections of the page. These paths tell you which template .phtml file is responsible for that section.

http://doingthing.com/When developing a theme/package, it’s helpful to not have to wait for your changes to expire the built-in cache. Here’s how to disable Magento’s cache so that you can see your changes right away:

http://doingthing.com/1. Admin → System → Cache Management

http://doingthing.com/2. In the Cache Control section, for the All Cache drop-down, select Disable.

http://doingthing.com/3. Click the orange Save Cache Settings button.

http://doingthing.com/If you open up /app/design/frontend/your_new_theme_name/default/template/page/html/header.phtml, you’ll see a line like this:

http://doingthing.com/Where does Magento get the value for getLogoSrc() and getLogoAlt() when building your logo image? This information is not in the template (though it could be). Instead, it’s in the admin section:

http://doingthing.com/1. Admin → System → Design → section Header.

http://doingthing.com/You could put the exact data directly into your header.phtml file, but then you’d have to edit the file by hand every time there were a change to the image. Having the data in the admin section gives you an easy-to-use web-interface for modifying the data.

http://doingthing.com/Also in this header.phtml file is this code:

http://doingthing.com/This “Welcome Text” is also defined in the Header section.

http://doingthing.com/Designer's Guide to Magento

http://doingthing.com/Magento Design Terminologies

http://doingthing.com/Working with Magento Themes

http://doingthing.com/Intro to Layouts

http://doingthing.com/More to come.