FacebookTwitter

A Beginner’s Guide on Creating a Custom Magento Theme

By on Nov 18, 2015 in Beginners, Magento

Share On GoogleShare On FacebookShare On Twitter

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.

Wondering how you should create a custom Magento theme? Read on further to learn more.
banner222
Understanding Basics of Magento Theme

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.

image_1

Let us talk about each of these three packages one by one:

  1. 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.
  1. 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.
  1. 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:

In addition, it contains Template files placed in the path: app/design/frontend/package/theme.

custom magento theme

The skin folder has “skin” directory that contains files that help in controlling the look and feel of the Magento website. This folder is prepacked with all the elements (like CSS, images, JavaScript, etc.) that are important for styling a Magento installation. It can be found in the path: app/skin/frontend/package/theme

custom magento theme

NOTE: Keep in mind that both design and skin folders must contain same Package, as well as, theme names.

For example:

app/design/frontend/MyNewPackage/MyCustomTheme

app/skin/frontend/MyNewPackage/MyCustomTheme

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 4 – Now access your skin folder, and open your theme folder. You just need to create three folders for CSS, JavaScript and images.

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.

custom magento theme

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:

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”.

Wrapping Up!

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.

 

Samuel Dawson

Professional Expert in Designs2html at Designs2html
Samuel Dawson is a well-maintained and perfect professional expert in Designs2html Ltd which is a balanced psd to html5 company. Samuel has written the above content with great hard-work and shown here how a theme in Magento can be made with great
tips.

Latest posts by Samuel Dawson (see all)