Step by Step Guide to Build a Magento Theme

E-mail Print PDF

Here’re the full list of tools Magento gives you to build your themes:

  1. Templates
  2. Layouts
  3. Blocks
  4. Skins (images, CSS and block-specific Javascript)

In order to build a theme for your store, your work flow will consist of the following steps:

ONE: Disable your system cache

In order to prepare your Magento for production, you need to first disable system cache by going to the Administration Panel (http://yourhost.com/admin) and navigating to System -> Cache Management. Select 'Disable' from the 'All Cache' select box and click on save. Doing this will ensure that you see a faithful reflection of your store front as you make the changes.

TWO: Determine all the possibilities of structure types for your store

Before you even start creating the markup for the store, you will first need to ask yourself the type of page structure you’d like to have for each of your store pages. Make yourself a list that looks something like this:

  • Home page will use the three column structure.
  • Category listing page will use the two column structure that includes a right column.
  • Customer pages will use the two column structure that includes a left column.
Skeleton template

Once your list is complete, you will create the (X)HTML markups for each structure type and save them as skeleton templates into app/design/frontend/your_interface/your_theme/template/page/. A skeleton template is called such due to the nature of its purpose—all it really contains (aside from the <head> elements), is the presentational markups that serve to position each structural block into according markup areas.

Sample skeleton template

Upon scanning through the sample skeleton template above, you will notice a PHP method called <?=$this->getChildHtml()?> inside each presentational markup. This is the way Magento loads structural blocks into skeleton templates and hence is able to position all the contents of the structural blocks within a store page.

Each getChildHtml calls on a name as in <div class="header"><?=$this->getChildHtml('header')?></div>, and these names are ways by which each structural block is identified in the layout. Skeleton templates are assigned to the store through the layout.


THREE: Cut up your (X)HTML according to functionality

Once you’ve created your skeleton templates, you will now need to create the template for each content block.

Magento likes meaningful templates

You will need to cut up the (X)HTML markup built for your page and supply the according markup to each functionality of the page. For instance, if you have a mini-cart area in your design, the markup for this area alone will become its own template file. Same for your product tags, newsletter sign up…etc. All these functionalities already come with Magento, so you can reference the existing template tags to build your mark-up logic.

Where to save the templates

Diagram 5

The full markup for any page in your store is introduced via an array of templates that each represents a functionality of a module. In order to find out what templates are being called to a page you'd like to modify, you can turn on the Template Path hints. In order to enable it:
1. Go to the admin and navigate to System -> Configuration
2. Select your store in the top left website/store selector
3. When the page reloads, select the 'Developer' tab and select 'Yes' for Template Path Hints.
When you're done, go back to the store front, reload your page and you will see the path to all the templates listed according to the block. In order to modify the markup, all you have to do is follow the path written out for you and modify the according template(s).

FOUR: Change the layout to reflect your design

Once you’ve distributed some of the markups, you probably would like to now move the templates around in a page to see how you’re progressing along.

Where to find layouts

In order to access the layout files, go to app/design/frontend/your_interface/your_theme/layout/. Just like the templates, layouts are saved on a per-module basis therefore you can easily locate the layout file to modify with the help of the Template Hints. First, enable Template Hints, reload the the page you want to modify, and look at the path of the template file(s) that the Template Hints will provide you with. If you want to (for instance) move the mini cart, reference the template path (ex:app/design/frontend/default/default/checkout/cart/sidebar.phtml) and use the first folder name inside the magento themes folder (indicated in bold, which is the module name) to find the according layout file. So in the case of the mini cart, you know to look in 'checkout.xml' to modify the mini cart positioning. Each layout file(should it be necessary) further sections into per-page basis layout command. Each area of per-page layout is clearly marked with comments reflecting its usage, but the application itself recognizes the layout separation by the handles of each layout.

Default layout versus Layout Updates

There are two types of layouts--default and updates. A default layout (page.xml) is the layout that by default applies itself to almost every page in the store. All other layout files are Layout Updates that simply updates the default layout on a per-page basis.

Let’s take for example your skeleton template:
In the default layout, you have it set to three columns, which means by default most all of the page in your store will have the three column page structure. But it’s not the three column structure you need for your product page. For it, you want a two-column structure that includes a right column. To accommodate this, you will leave the default layout alone and open catalog.xml in which you can place some layout commands that tells the application to load the two-column structure to your product page instead of the default three. This is called the process of updating a layout.

Example way of assigning skeleton template


<reference name="root">

<action method="setTemplate"><template>page/2columns-right.phtml</template></action>

</reference>

Let’s take another example:
Say by default you want a newsletter sign-up box in your right column, but in customer account pages you want to exclude it. In this case, you would leave your default layout alone and open up customer.xml, into which you will place a command that unsets the newsletter content block, excluding the newsletter functionality from the page.

Testimonials

Ciao di nuovo, mi spiace per questo errore! I `ve visto, è wasn` t ha caricato il file di modello. Ora funziona, grazie.

--- Giorgio

I wish to insert a bigger logo into the template. How to I increase the margins for this? Replacing the default image with a bigger image causes the entire nav bar to move down. 

--- Milan Beharie

Спасибо за ссылку. Можете ли вы обеспечить hook.jpg для модуля позиции.

--- Mikhail

Computer Hardware Magento Theme 57699 work fine for my site, thantk you man. 

--- ANDREJA

Ναι. Έχω εγκαταστήσει ελληνική γλώσσα σε αυτό το Magento πρότυπο. Σας ευχαριστώ για τη βοήθειά σας.

--- CLYTEMNESTRA

Thank you for your answer. I will try and let you know if it's work on my prestashop theme.

--- Claudia Monsalve

 
You are here: Magento Tutorial Step by Step Guide to Build a Magento Theme