Before you begin to create your theme, there are some basics you need to know that will help you. This is supposed to be a review of the basic concepts and techniques that you should already know, which will speed up the development of the theme.
1. The Magento base theme
The base theme was introduced in the CE (Community Edition) Version 1.4 and EE (Enterprise Edition) Version 1.8. The main difference between the CE and EE is the price and support.
In fact, the CE is open source and anyone can download and use it as an e-commerce platform. The EE has an annual fee of $12,000, and it has the same base of the community edition but it is aimed to companies that needs special customizations, additional functionality, and the support of the Magento team.
It’s very important to understand that the base theme of Magento is essential to make the other themes work correctly, which in fact will depend on it. The base theme is the core of the Magento frontend.
The following are the frontend base theme directories:
- app/design/frontend/base
- skin/frontend/base/
2. The hierarchy of files and the fall-back system
The frontend of Magento has been structured in such a way that it allows the designers to create themes based on the basic theme, without changing its structure. This fall-back system allows us to create only the files that are necessary for the customization of our theme. All other files, if any, will be taken from the base theme.
In order to create the theme’s files, we can proceed in the following two ways:
- Create the empty files in the appropriate directories and write all the code by hand. You can choose this option if you are an advanced developer who knows how to get the information in the right way from the
- Copy the files from the base theme and edit them You can use this option to analyze and study the code, and learn how to retrieve the information of the products, blocks, and so on.
In this book, we will use the second option, which is easier and faster. In the theme you need to create/duplicate only the strictly necessary files for its customization. This allows you to have a theme that is much lighter and with fewer files.
For example, let’s say we want to change the header.phtml file that is the block of the theme header. You can copy the header.phtml file from the app/design/ frontend/base/default/template/page/html/ path to the app/design/ frontend/custom_package/custom_theme/template/page/html/ path.
Source: Sacca Andrea (2014), Mastering Magento theme design, Packt Publishing; Illustrated edition.