We need to understand the Directory structure for CREATE A CUSTOM THEME IN MAGENTO 1.7
First Part:
Directory Structure
The first step for creating a themes in magento cms is creating a directory in the custom themes for this you need to understand the structure for that .
You need to understand the Package & Theme. what is themes or packages in Magento CMS?
Look at the directory structure below and see whether you recognize it. Please Notice that the folder default has a sub-directory also called default? In this scenario, the first folder called default is a packages being used while the sub-directory called default is the theme. Also notice that the default package has another sub-directory called custom-theme. the developer put the new theme at here. While this works, this is not the correct way to structure your themes.
- app/design/frontend/default
- app/design/frontend/default/default
- app/design/frontend/default/default/layout
- app/design/frontend/default/default/template
- app/design/frontend/custom-theme/default
- app/design/frontend/custom-theme/default/layout
- app/design/frontend/custom-theme/default/template
The default package houses 2 separate themes. In theory, a package is used to put as many themes as you like. The amazing feature of this system is that as well as having your base theme.
That means you can put your no of custom themes in the packages.
The Directory Structure in Magento 1.7
Step 2: You totally understand the meaning of themes and packages at here now we are going to create the directory structure in Magento 1.7.
- app/design/frontend/base
- app/design/frontend/base/default
- app/design/frontend/base/default/etc
- app/design/frontend/base/default/layout
- app/design/frontend/base/default/template
- app/design/frontend/default
- app/design/frontend/default/default
- app/design/frontend/fishpig/default
- app/design/frontend/fishpig/default/layout
- app/design/frontend/fishpig/default/template
- app/design/frontend/fishpig/fish-theme
- app/design/frontend/fishpig/fish-theme/layout
- app/design/frontend/fishpig/fish-theme/template
You'll see in the above directory structure is identical apart from the addition of the folder called base. These kind of package contains a theme named default, which contains all of the base template files needed for a Magento cms theme. The base package serves as the final fall back package. Let's talk about the fall back so that we can clearly understand exactly how to structure our package.
Template Fall Back in Magento 1.7
This subject almost deserves an article of it's own, however, I will try and condense it here without stripping too much out. In the above directory structure, there are 3 packages:
- base - contains the theme default
- default - contains the theme default
- banitous- contains the themes default and banitous-theme
Using the above structure, let's try to complete the custom themes in the pakcages called banitous we used the custom themes which is called the banitous-theme in the banitous package.
In our structure, Magento would first look in the banitous-theme . If the file could not be found here, it would next check the default theme inside the banitous package. If the file wasn't found here it would then look inside the default theme inside the base package. If this file could not be found Magento would throw an exception saying it could not find the template file needed and execution would stop.
When trying to access view.phtml, Magento would access the following files until either the page was found or an exception was thrown.
- app/design/frontend/fishpig/fish-theme/catalog/template/product/view.phtml
- app/design/frontend/fishpig/default/catalog/template/product/view.phtml
- app/design/frontend/base/default/catalog/template/product/view.phtml
We are now presented with two options:
- Allow our theme to fall back to base/default
- Copy over base/default files to fishpig/default and use that as our fall back
Both options are valid and each have their own advantages and disadvantages. For this tutorial, I will be leaving all of the core files in base/default and falling back to that. I will be doing this mainly because it will be easier and require less work from you at this point.
We need to understand the skin folder of the magento?
Just like the template and layout folders, the skin folders operate using base/default as a fall back. While templates can be vary similar cross-theme, CSS will most likely be entirely different. Because of this, the default CSS and JS are stored in default/default rather than base/default.
Enough talk, let's create our directory structure!
For this example I'm going to create a package called banitous and a theme called banitous-theme. Start by creating the following folders:
- app/design/frontend/banitous
- app/design/frontend/banitous/default
- app/design/frontend/banitous/default/layout
- app/design/frontend/banitous/default/template
- app/design/frontend/banitous/fish-theme
- app/design/frontend/banitous/fish-theme/layout
- app/design/frontend/banitous/fish-theme/template
- skin/frontend/banitous
- skin/frontend/banitous/default
- skin/frontend/banitous/banitous-theme
Now that you have created the necessary folders, copy over the contents of skin/frontend/default/default toskin/frontend/banitous/banitous-theme.
Now that we have created a custom theme, it is time to enable it in Magento.
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 (Transmit <3), 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.
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!
Conclusion
Hopefully this article will help developers to start creating their own custom themes. If there are any bits of this article that aren't clear, please let me know and I will do my best to clarify.
No comments:
Post a Comment