Working with Magento Themes

In this chapter we'll go into the details of how Magento handles themes and teach you how to create and manage your own:


Back to TopHow Magento Does Themes Different from Others

The term ‘theme’ probably sounds to you a familiar ring. Either as an audience, a creator, or both, you’ve experienced the sea of available web applications options via its themes. A theme has largely two types of users – First, the audience–type who experiences it from the aesthetical and usability standpoint by browsing through a store – And second, the creator–type who goes through an additional layer of the theme experience by taking part in building the theme.

To the first user type, a store experience is defined by the ability of a store to fulfill his/her tactical and emotional demands. To the second user type who must fill the creator role, it is the efficiency with which he/she is able to complete a set of development tasks that determines the store experience.We recognize that it is the accumulated experiences of both user types that determine the final profitability of the store, therefore neither user’s experience can afford to be overlooked.

Because we know that as designers you’ve already got the graphical end of things best covered (servicing to the audience–types), we figured we'd just help you along by building an out-of-this-world theme management to maximize your work-flow efficiency and take your creativity to the next level. Here’s some things we thought might get you drooling:

  1. Maximum customization power
    With Magento you can update the look and feel of your store in the category and product level, giving you greater marketing and promotional power as well as a store with endlessly unique design. Ever imagined presenting each product in its own customized product info page? Magento gives you the power to do just that and more, by providing a quick way to customize your product presentation in a per-product and per-category basis.
  2. Multiple themes
    Magento gives you the ability to load multiple themes at once, allowing you to swap between a default store design and temporary event/season-specific ones — All at the command of a few key strokes.
  3. Uninterrupted workflow
    With Magento’s fully object-oriented programming, all modules are immediately accessible via template tags from any template files. And because Magento comes feature-rich right out of the box, you’ll never again have to be dependent on a programmer to finish the simplest tasks for you. Magento also thrives on an extensive network of knowledgeable community members (including the official Magento Team), so you will never need to think twice about where to get guidance should you need it along the way.
  4. Minimize debugging time
    Any designer can recall those precious hours and minutes wasted looking for the unclosed markup scrutinized by your validator. The validator may tell you what’s wrong, but it never seems to tell you where it’s happening. Magento’s modular backend brings with it a modular template system that minimizes the amount of (X)HTML you need to handle at once. Less the mess means less the fuss and more the sanity for the truly important things in life.

Really, the best part of what Magento offers you though, is an application that thrives on its flexibility, leaving you with nothing much to worry about except devising your brilliant plans for your next ‘wow’ front-end. The sky is the limit for this application, and we hope you have fun applying it to your store.

Back to TopHow to Create a Theme

Let's first unveil some directories to get you going. Open the following directories in your Magento root and do get nosy:

  • Directory 1: app/design/frontend/default/default/ — This directory contains the layout, translation (locale) and template materials.
  • Directory 2: skin/frontend/default/default/ — This directory contains the images, CSS and block-specific Javascripts.

When working with themes, these two directories will remain your base starting point.
As you may have noticed, we’ve sectioned the theme files into two parts. By separating the files that must be web accessible (such as image and Javascripts) from those that can be hidden from it, we’ve made certain Magento offers you maximum security measures for your store at every corner.

Let’s go ahead and examine the two directories.
At first blush you’ll notice the use of directory names “default/default” in both directory 1 and 2 like so:

  • Directory 1: app/design/frontend/default/default/
  • Directory 2: skin/frontend/default/default/

In both cases, * indicates the interface name, and * indicates the theme name. So if you were working on a theme called “my_theme” in an interface called “my_interface”, you would be working in the ‘app/design/frontend/my_interface/my_theme/’ directory.

You can save as many themes into your interface directory as you’d like, but at the time of writing, your store can only handle loading the theme called ‘default’ and one additional theme of your choice to your store. (Note:Capacity to load unlimited number of themes will become available in the coming releases.) To learn how Magento manages loading multiple themes at once, read Hierachy of Themes) This gives you two themes to work with, so you can keep your default theme for your store’s off-season design and use the additional theme for the seasonal and event-specific ones (To read about how multiple themes work and how you can benefit, read Say Hello to Multiple Themes ).

Creating a new default theme

In order to create a new default theme, first you must copy an existing default theme from which you can base your new theme. Create a duplicate of app/design/frontend/default/default/ and rename the new directory to whatever you would like (Name of an interface and theme should be one alpha-numeric word starting with a letter from the alphabet[a-z]. For instance, ‘My New Theme’ and ‘02123_my_theme’ is bad. ‘my_new_theme’ is good). The name of your theme directory is the name by which the application will recognize your theme. Now do the same for skin/frontend/default/default. And that’s it! You’ve now successfully created a new default theme. To learn how to assign this theme to your store, read Assigning a new theme below.

Creating a new non-default theme

Diagram 1

When creating a new non-default theme, you don’t need to duplicate any existing default theme directories. Most likely you’re just making changes to specific files and hence will only need to duplicate the according files as a starting point of your new theme. One rule you must always remember to follow, however, is to make certain that you preserve the subdirectory structural conventions of Magento. For example, if all that your non-default theme contains is the template file ‘home.phtml’ from the catalog module, inside app/design/frontend/your_interface/your_non_default_theme/ you will need to create directories ‘template/catalog’ into which you will save your template file. When you open up a default Magento theme directory (Diagram 1), you will see how directories are structured—Make sure to reference this directory convention in order for your new theme to load successfully.

Assigning interface and theme to the store

Now that you’ve created your own theme (whether a default or a non-default), you’ll need to assign it to your website/store in order for it to take effect. Navigate to the Magento admin panel (ie.www.mydomain.com/admin), then the Design configuration tab (System -> Configuration -> Design tab).

Diagram 2
image

On the upper corner of the left column in Diagram 2, you will see a box labeled ‘Current Configuration Scope’.

  • In order to manage your store design in the website-level, select the name of your website from the dropdown, then apply the following steps.
  • In order to manage the design from the store view-level, select the name of your store view from the dropdown, then apply the following steps.

Step 1
From the Design tab, in Current package name, enter the name of the interface in which your new theme resides. Magento will automatically load the interface called ‘default’ if this box is left blank.

Step 2
In Default (under Themes heading), enter the name of the new theme you’d like to load to your website/store. If you leave this box blank, Magento will automatically load only the theme called ‘default’ (Remember, no matter how you configure the design tab, Magento will automatically load the theme called ‘default’. If you assign a theme in the admin, that theme will simply load higher up in hierarchy, but will load along with the theme ‘default’. This will change in the upcoming stable release however, to give you full control over what themes are loaded into the store). Should you choose to load the theme separately depending on file type (layout, templates, skin or translation files), enter the name of the theme from which to grab the according file types.

Step 3
When you’re done, click the button “Save config” and reload your store – Voila! You now see your new theme reflected in the frontend.

Now that we’ve got the how-to of creating and managing themes, let’s move on to how Magento handles those themes.

Back to TopSay Hello to Multiple Themes

Note: Capacity for unlimited themes will become available with the upcoming releases. Although at the time of writing only two themes can be loaded at once, the workings behind the scenes remain the same and you will benefit from this documentation.

Holiday seasons by far offer the most extensive sales opportunity for any eCommerce store — Customers line up to buy Christmas gifts for their family and friends, and moms line up to buy Halloween costumes for their child’s special night of trick ‘or treating. In order to tailor to the seasonal shoppers, your store must faithfully reflect the occasions in order to inspire your shoppers to explore your store. A shop like Diagram 3 just doesn’t cut it during Christmas – What this store needs is a few reds, snowflakes and Santa Claus – just like the store below in Diagram 4!

Diagram 3. This just doesn’t cut it

Diagram 4. This is what you need


With Magento, we’ve created the capacity for your store to handle multiple themes of your choice exactly for those times when an extra touch is needed most. By loading multiple themes to your store, you can preserve your normal non-seasonal store design, while enhancing it with the Christmas theme.

At close examination of the two designs above, you’ll notice similarities in the underlying design. The façade has gone Christmas in Diagram 4, but underneath it you can still see the structure of the off-season store design. The only real difference between the two store designs, are just a few CSS and image files and wording changes in the template files. Because the changes are in fact minor, you don’t need a whole new default theme to accommodate your Christmas theme. What you need is just a few file replacements, and you’re on your way to a much spicier and merrier store. Magento’s multiple themes functionality was created to accommodate exactly that need, putting the power on your fingertips to turn on and off the seasonal themes while preserving your default theme.

Magento handles loading multiple themes by assigning something called hierarchy to the themes which is simply a process of cancelling out redundant files to load only that which resides highest in hierarchy.The hierarchy is determined by you in the Admin Design configuration tab and your ability to do so will become fully functional with the upcoming stable version. At the time of writing, the hierarchy of themes is already decided for you, as Magento loads the 'default' theme in the system first (placing it in the lowest hierarchy), then loading the second theme you assign in the admin (placing it in highest hierarchy).

Back to TopHierarchy of Themes

When you assign multiple themes to your store, you’re essentially taking advantage of the fact that while your main goal when building a theme is to create the most usable and visually pleasing graphical interface, the goal of Magento’s is to ensure that the application is able to locate and load all the files of the theme required to keep the application running error-free.

For instance, if your category listing page calls for a template called ‘view.phtml’(in which case this template becomes a required file), but the application is unable to find the file in the theme highest in hierarchy (Note: At the time of writing, the theme highest in hierarchy is the theme that you assign through the admin, and the theme lowest in hierarchy is the theme called ‘default’ that Magento automatically loads into the store. In the upcoming releases, Magento will provide you with the ability to have full control over the hierarchy of your themes), it will look to the next theme highest in hierarchy to find the file. Should this fail, it will continue working down the hierarchy of themes until it’s able to locate the file called ‘view.phtml’, upon which the application will load it to the store and terminate the search. This method of building design is called fallbacks, because the application ‘falls back’ to the next possible source of required files in order to retrieve and load it.

Let’s say you have three themes assigned to your store and each of these themes contain the following files:

Table 1
default my_theme_1 my_theme_2
All required files templates/3-col-layout.phtml templates/3-col-ayout.phtml
  templates/header.phtml css/base.css
  images/logo.gif  
  css/base.css  
  css/boxes.css  

Let’s also assume that the three themes are assigned this hierarchy:

Table 2
HIGHEST my_theme_2
  my_theme_1
LOWEST default

At close observation, you’ll see that there’re few redundant files such as templates/3-col-layout.phtml and css/base.css in Table 1. Now let’s arrange the table around so the redundant files are arranged parallel to one another.

Table 3
default my_theme_1 my_theme_2
All required files    
  templates/3-col-layout.phtml templates/3-col-layout.phtml
  templates/header.phtml  
  images/logo.gif  
  css/base.css css/base.css
  css/boxes.css  

‘Ok, great. But what does this mean?’ you may ask.
Well, let us remind you that the files in Table 3 are how you see the files in each theme folders and not how Magento sees it.

Let’s then look at how Magento sees the same file structure in Table 4.

Table 4
default my_theme_1 my_theme_2
All required files    
    templates/3-col-layout.phtml
  templates/header.phtml  
  images/logo.gif  
    css/base.css
  css/boxes.css  

You’ll notice how Magento ignores the version of the redundant file lower in hierarchy and recognizes only the version higher in hierarchy. This is because it’s already found the required file and need not search for it any longer, ergo terminating the search for that specific file while continuing the search for other required files yet to be found.


:: In this chapter you learned how themes are created and managed. In the next chapter, we will walk you through the step by step of how to build a theme. You will be introduced to layouts, templates and skins - make sure you've read through the Magento Design Terminologies chapter before proceeding to the next chapter .