In this Magento user guide, we will focus on installing a Magento theme. You are probably familiar with the term ‘theme’ either as an audience, creator or both. You must have experienced the wide variety of available web application options through its themes. A theme has basically two types of users: audience and creator. The audience is concerned with the usability and aesthetic standpoint of the theme, while the creator goes through an additional experience – building the theme. A theme should be helpful for both types of users, which is exactly what a Magento theme aims to do.
The Basics of Magento Theme
Before learning how to install Magento theme, you should know its basics. Theming Magento is not as difficult as it’s made out to be. It is, indeed, a bit different from how Joomla or WordPress manage themes, but it is certainly not difficult. With just a little know how, you will be able to install Magento theme manually like a pro!
To put it simply, a Magento theme is a collection of JS, CSS and PHTML files along with XML files to define the structure. The PHTML file is composed of HTML markup with PHP code interspersed for functionality. Here is an example of a PHTML code if you are confused:
|<div class=”quick-access”><?php echo$this->getChildHtml(‘store_language’) ?><p class=”welcome-msg”><?php echo$this->getWelcome()?></p>
<?php echo$this->getChildHtml(‘topLinks’) ?>
It is pretty simple once you wrap your head around the basics. This could be much easier for you to understand if you have worked with creating themes for other platforms.
Keep in mind that in Magento, the back-end and front-end are skinned separately. I am assuming that you will not have any need to skin the back-end, so I will focus on installing Magento theme on the front-end.
Installing a Magento Theme
There are two main ways to install Magento theme:
- Through Magento Connect
- The traditional method of installing Magento theme includes copying the packaged theme to the relevant folder
We will learn both ways of installing Magento theme, but before performing any modifications, it is recommended that you back up your database in case things go awry.
Traditional Method of Installing Magento Theme
You may be familiar with the traditional method of installing Magento theme manually since you will have to download a Magento theme and simply upload it. However, you will need to know where to upload the theme since installing a Magento theme manually is a bit different.
Although the packaging of themes varies depending on the source, there are 2 folders at its core: app and skin. All you have to do to install Magento theme is to drag these folders to the installation’s root and merge it with the current data.
There may be times when the theme is packaged in 3 folders, but don’t you worry. All you have to do here is move the folder containing the XML files and the one with the PHTML files to root/app/design/frontend/default/themename, while the folder with the images, CSS files and other assets should be moved to root/skin/frontend/default/themename.
After that, you can activate your theme by going to System > Design and clicking on Add Design Change.
In the Custom Design field, select the theme you want and click on Save.
Via Magento Connect
Installing Magento theme manually via Magento Connect is much easier than the traditional method since you don’t have to move the files anywhere. To install Magento theme manually with this method, you will first have to choose a theme, go to its details page and click on Install Now. Then, select the Magento Connect version according to the version of Magento you are using (select version 2.0 if you have Magento 1.5 or newer, or else leave it at the default 1.0).
After selecting the Magento Connect version, agree to the license agreement, click on the Get Extension Key option, and copy the extension key provided.
Now, in your Magento Admin area, go to System > Magento Connect > Magento Connect Manager, log in, paste the extension key in the Paste Extension Key to Install field, click on Install and let the system do its thing.
After the necessary files have been downloaded and placed in the relevant locations, you can activate the theme just like we did before by going to System > Design, clicking on Add Design Change, selecting the theme you want in the Custom Design field, and clicking on Save. And that’s how easy installing a Magento theme is!