Chat with us, powered by LiveChat

This website uses cookies

Our website, platform and/or any sub domains use cookies to understand how you use our services, and to improve both your experience and our marketing relevance.

Introduction to Magento Theme Development

November 3, 2015

4 Min Read
Reading Time: 4 minutes

Themes are an integral part of any ecommerce store. They are a major chunk of the front end UI and the back-end developer interface. Magento, the world’s leading ecommerce application, provides the options to customize the store as per the need of the business. It is not much difficult to customize the Magento store and neither is it difficult to develop a Magento theme.

Magento Theme Development
When you start a new project on Magento you will either need to create a Magento theme (if you have the expertise) or you would have to buy a theme for your Magento project. You would want a theme which you can customize and make according to your needs. It is a bit technical to make a Magento theme, but it is not difficult. You just need to follow Magento recommendations and rules, to help you make your project.
Before I go any further it is important to tell the purpose of this series. This theme development series is for beginner and will cover the basic of front end theme development. If you are an advance Magento developer this may not be for you.

Let’s start

Folder Structure In Magento

First, You need to understand Magento hierarchy and where your theme files are placed. In Magento there are many folders and thousands of files. In this series, I am only focusing on those that we need in theme development.

Look at the directory’s structure below and see whether you recognise it.

  • app/design/frontend/base/default/
  • app/design/frontend/default/default/
  • app/design/frontend/package_name/theme_name/
  • skin/frontend/base/default/
  • skin/frontend/default/default/
  • skin/frontend/package_name/theme_name/

Magento at its core has two folders app and skin which collaborate with each other. The app directory controls files that the page templates are rendered in the structure. And the skin directory contains files that control the appearance of the website like CSS, JavaScript, and images of website.

Before we go any further, it is important to understand what packages and themes are.

Packages And Themes

A package is a collection of related themes. In Magento, there is no limit to the number of  packages you can have. Magento comes with a special package that is called base. It’s an archive for making Magento core files available to the front end.

A theme on the other hand is a direct sub folder of a package which contains the files that make up your store. There is no limit to how many themes you can have within a package. A theme can only belong to one package and by convention, every package must contain a theme named default which is the main theme for that package.

Magento Base Directory

Base package contains one theme named default. It comes bundled with every default Magento install and contains front end files that help your Magento store run. There are some rules with the base package and we must accept this.

As I mentioned you may not edit these files that are under the app/design/frontend/base/ and skin/frontend/base, they are only used for reference. Files that need to be edited should be copied from base folder to yourpackage/theme.

Magento Fallback Logic

To make theme easier, maintainable, and upgrade friendly, Magento has the feature of fallback logic. With this you can edit and maintain only the files your need within your theme. If you don’t want to edit the file you don’t need it in your theme. I’ll explain in detail with an example. I have my own website which is set up for using my own theme like:

app/design/frontend/my_package/my_theme/

skin/frontend/my_package/my_theme/

My website requests a template file named column.phtml and CSS file named style.css but Magento did not locate these files within my theme. Magento fallback logic will now search the next theme in the hierarchy for the files.

Following order explains the fallback logic Magento goes through when looking for my files.

app/design/frontend/your_package/your_theme/template/page/column.phtml

app/design/frontend/your_package/default/template/page/column.phtml

app/design/frontend/base/default/template/page/column.phtml

skin/frontend/your_package/your_theme/css/style.css

skin/frontend/your_package/default/css/style.css

skin/frontend/base/default/css/style.css

Create and Enable Package/Theme

To start, you need to create your package/theme setup. We start by creating the following folders:

  1. app/design/frontend/cloudways/w-c/
  2. skin/frontend/cloudways/w-c/

We have a package called cloudways and a theme called w-c, you can rename your package as per your liking. Just remember, that “default” is automatically part of fallback logic.

After this, you need to enable the package via Magento admin. Just login to your Magento admin and go to system > configuration. In configuration, click on design (shown in left menu) and then enter your package name in the package name field.

Magento Admin Configuration

You can see the theme options as well after packages. This is where we enter our theme name (c-w in this case). Check the image to see where to insert the name of the theme.

Note: This is the first part of the tutorial series. I have only shared the basics of Magento Theme Development as it is a big topic to cover in one post. In the next post, I will be covering how to develop a theme from scratch, including creating pages, Stylesheets and JavaScript. Themes are an integral part of a Magento store, and make up a major portion of speedy page loading, similar to a hosting provider. If you have a Magento hosting provider like Cloudways Managed Cloud Hosting coupled with a kick-ass theme, you can expect to double your figures by the end of this holiday season (provided you have everything in order in your online magento store).

Share your opinion in the comment section. COMMENT NOW

Share This Article

Boost Your Magento Store Performance by 5x Times & Maximize Your Sales

Our fastest Magento hosting can help you in growing your business revenue by 500%

Cloudways

Cloudways is a European MSP that provides custom cloud design, deployment and management solutions on leading cloud providers.

Get Our Newsletter
Be the first to get the latest updates and tutorials.

Do you like what you read?

Get the Latest Updates

Share Your Feedback

Please insert Content

Thank you for your feedback!

BFCM 2019