How to Create a Magento Theme

E-mail Print PDF

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 magento 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.

Testimonials

Thank you so much, you are indeed a great person assisting me to get this site up and running. I will contact you if i have any other request.

--- Gheorghe

če želim pripeti sliko v oddelku CMS. Kako naj to storim? 

--- MATEVŽ

I have bought 3 templates for my clients. All are great and good-designed. Will contact you soon for more themes.

--- Melany

Ich mag deine professionelle Gestaltung und freundliche Unterstützung. Ich werde kaufen ein Prestashop Vorlage heute. 

--- Schulz

Я заинтересован в вашем интернет-магазина шаблон, оружие магазине, за $ 100 и Одежда магазине, за $ 106. Можете ли вы сделать скидку?

--- Владислав

 
You are here: Magento Tutorial How to Create a Magento Theme