Creating a Custom Magento Theme
The e-commerce market has and continues to evolve, and hence, to gain a competitive advantage it is important that your e-store is flexible enough to address consumers changing needs. And, Magento e-commerce platform can help accomplish such an objective in the most efficient and effective manner possible.
What’s more? Easy-to-use and intuitive admin panel and tons of eCommerce features is what makes Magento one of the best choices as an e-commerce platform. After all, Magento was primarily created with the purpose of giving users and developers the ability to setup e-commerce store.
When starting a Magento project most likely you’ll consider creating a custom Magento theme based on your preferences. As a developer, creating a Magento theme might seem a simple task to you. But, remember that not adhering to Magento rules and regulations can make the task overwhelming and challenging.
Moreover, you also need to decide on the Magento version on which your site will run. The new version of the Magento e-commerce platform (i.e. Magento 2) is about to release. However, you can download the beta version of Magento 2 from GitHub. The latest version of Magento has introduced a new default theme called “Luma” – an elegant theme that follows a lot better usability practices compared to the default theme of Magento 1.
All of the Magento themes are stored in design packages, wherein each individual package contains multiple themes.
After installing the Magento platform, you’ll get access to three packages such: as base, default and rwd.
Let us talk about each of these three packages one by one:
- Base package: This package contains a “Default” Magento theme that comes bundled with all the files that are required for proper functioning of the Magento platform. It is advised that you shouldn’t attempt to delete files available in the “Base” package.
- Default package: This package belongs to Magento 2 predecessor, i.e. Magento 1, where it was considered as the base package. It can only be found in Magento Community Edition and isn’t available in Magento Enterprise Edition. This package can be removed from your Magento installation, and gets restored whenever upgrades are made to Magento.
- RWD package: This one is a new package, and as the name suggests, it contains a new responsive Magento theme.
Apart from the above 3 packages, Magento contain 2 main folders:
- The design folder comes with an “app” directory that contains files, enabling you to have better control on how page templates are rendered.
In addition, it contains Template files placed in the path: app/design/frontend/package/theme.
NOTE: Keep in mind that both design and skin folders must contain same Package, as well as, theme names.
Getting Started With Magento Theme Creation
Simply adhere to the following steps to learn how you should begin with the process of creating a Magento theme:
Step 1 – First off, you’ll have to create a new design package for your custom Magento theme that need to be added in both of the Magento folders, namely: “design” and “skin” folders.
Let us name the design package as “MyNewPackage”.
Step 2 – Next, create a folder within your design package for holding your custom theme. Let’s name it as “MyCustomTheme”.
Step 3 – In this step, you’ll need to create 2 new folders that will be placed in your theme folders “layout” and “template”.
Step 5 – And at last, create a “local.xml” file and keep it inside your Magento’s installation “layout” folder.
How You Can Use Your Magento Custom Theme?
In the above section, we discussed about the steps that were essential for creating your custom theme. But, you might not know how you can make use of your newly created theme. To do so, simply follow these steps:
Step 1 – Apart from creating a simple theme, you’ll also need to inform Magento about the default package as well as theme that you’ll be using. For this purpose, navigate to System → Configuration → Design.
Step 2 – Tell Magento about the package that you’ll be using. Let’s say, we’re making use of the design package “MyNewPackage”. The best part is that you can utilize the assets available in different Magento themes into your own theme. While you can call templates from one theme, you can access skin files from the other.
Lastly, insert the name of your theme in all of the fields except the “default” field. In fact, leave that field blank. So, now your theme is ready to use. But, what if you would want to make some edits to your theme? You can achieve such an objective, by becoming familiar with the Magento’s fallback system.
An Overview of the Magento Fallback System
With Magento’s fallback system, you can style and edit your Magento custom theme. The fallback system, basically, allows to make changes to your theme without having to duplicate the unchanged files. It is just like any modern theme framework that help render and combine the small blocks available in the Magento platform – before outputting those blocks to the HTML file that is provided to your clients.
In case any of the files can’t be found and are missing, then it will result in an error and your website will be broken. If that happens, then Magento search for particular file within the theme folder
and take any one of the following actions:
- It outputs the file once it is found.
- If some file is missing, Magento looks for the default file placed in the custom design package
- In case, the default theme is present in the custom package, then Magento searches for the missing file in that package.
- But, in case it can’t find the default theme in the custom package or is unable to find the missing file, it fallbacks to “base” package. And then, it looks out for the file in the default theme
- If the file cannot be found, an error will be rendered by your Magento install.
Note: If you will delete any file from the base package, then Magento will have no place to fallback and will output a rendering error. This is why it is suggested that you should avoid deleting files from the “base package”.
Whenever, you want to create a custom Magento theme you will have to keep three things in mind. First and foremost, create a new design package for your custom theme and place your theme inside it. Secondly, duplicate only those files from the base or default package that can be edited. And finally, make sure that your newly created theme holds only those files that have been changed. Magento will fallback and search for the rest of the files inside the base or default package.
Latest posts by Samuel Dawson (see all)
- A Beginner’s Guide on Creating a Custom Magento Theme - November 18, 2015