Enabling and Customising our own custom Theme in Magento

In my previous post, I have explained about How to build a custom own theme in Magento. In this Post I will explain about the following things.

1. How to Enabling our Package/Theme in Magento 1.4?
2. How to Creating a template file?
3. How Customising the default Magento theme?

Enabling our Package/Theme in Magento 1.4

To enable your new theme, login to your Magento admin section and go to System > Configuration > Design. When the page has loaded, notice that the first 2 sections of the page are titled Package and Themes. In the top section, set your package as fishpig and in the second section, set all input boxes (except the 1 titled Default) to be fish-theme. Once you have done this, save the page and refresh the Magento cache.

It should be pointed out, that if you ever encounter any problems with your custom theme, you can always switch back to the default theme by emptying the input boxes under Packages and Themes in the Magento configuration.

Now that our new theme is being used by Magento, let's add some code and test whether or not it has worked.

Creating a template file

Earlier on we used the example of the product view template (catalog/product/view.phtml), so let us continue with this example. Using your favourite FTP program, create the following files/folders:

• app/design/frontend/fishpig/fish-theme/template/catalog
• app/design/frontend/fishpig/fish-theme/template/catalog/product
• app/design/frontend/fishpig/fish-theme/template/catalog/product/view.phtml

Although view.phtml is empty, you have successfully created your first template file. Open your browser and browse to a product page in Magento. You should notice that the content section of the page is now totally empty. Can you think why this is?

To understand what has just happened, let's discuss fall back again. So you don't have to scroll up, I've included the file locations Magento checks for view.phtml before it throws an exception.

• app/design/frontend/fishpig/fish-theme/template/catalog/product/view.phtml
• app/design/frontend/fishpig/default/template/catalog/product/view.phtml
• app/design/frontend/base/default/template/catalog/product/view.phtml

Before we created view.phtml in fish-theme, Magento would check each location until it finally found the file in the base/default theme; no exception would be thrown and the product page would be displayed successfully. Now though, we have created view.phtml in the first place that Magento looks. Now that Magento has found the file, it stops checking the other directories and parses and renders the content inside our custom template!

Adding code to the template file

So far we have a custom template file, however, we don't have any code in it! To prove that this is working, let's add some code.

<?php $_product = $this->getProduct() ?>

<h2><?php echo $_product->getName() ?></h2>



The above code is simple but should prove that your custom theme is working and is successfully over riding core template files.

Customising the default Magento theme

So far what we have done has been more of a learning exercise. Now let us look how to make some useful changes to the default template, before finally learning how to build a totally custom theme.

In this example, rather than re-code view.phtml, we will copy across the default contents and modify them slightly. To do this, copy the contents from base/default/catalog/product/view.phtml to the custom view.phtml you have created. Save this file and reload the product page. You should notice that product page has returned to it's original state. You can now modify any of this code to customise the product page as you wish. You can do this knowing that you haven't modified any core template files and if needs be, you can always revert back to the old files knowing no damage has been done. This can be done for ANY template file in Magento and not just your product page.

The beauty of this system is that you can create a great looking theme without having to write a lot of code. Using the base/default files, some customisations in your own theme folder and some pretty CSS, it possible to create great looking themes in a matter of hours.

Creating a totally custom theme in Magento 1.4

The above examples have shown us how to create themes based on the default theme. For a lot of developers, this is more than useful, however, sometimes pure customisation is the only thing that will satisfy a client. To create a totally custom theme, simply follow the above steps. The only difference is that with a totally customised theme, the majority of files wouldn't fall back to base/default and would instead, exist in your theme folder.

A great way to ensure that your theme doesn't fall back to base/default is to copy the contents of base/default to fishpig/default. If you do this and a file isn't present in fishpig/fish-theme, Magento will fall back to fishpig/default. The benefit of this is that you can modify the files in fishpig/default without worrying about breaking any other themes or having to modify core code!