Magento Theme Development: Getting Started

In this tutorial series, we’ll be developing a Magento theme
from scratch. As Magento is an enormous eCommerce CMS with tons of
customization options, Magento themes are usually considered very complex
to develop, but I hope once you follow along with this series, you’ll get very familiar with Magento terminology and how things are developed in it. I’ll try
to explain everything as we go along, developing each component of the page
step by step.

Installing Magento

The first step towards any Magento development is having a
copy of Magento installed on your local server. You can have a copy of Magento
installed on your web server as well, but that’ll only slow down your
development speed. So I always recommend using a local server for development, and once you have completed development and thoroughly tested the
end product, only then you should upload it on your server.

I’ll not reinvent the wheel by explaining how you should
install Magento on your local server. There are plenty of good articles
available on the internet for that. You can also find Magento installation articles on our site, like this Tuts+
article, that’ll guide you through how to install Magento on your local
server. 

You also need to install Magento’s sample data, while installing
Magento. This sample data will add many catalogs, products, reviews, etc., and
through it we can test different scenarios during development.

Installing Code Editors and Debuggers

Once you are done installing Magento, the next step is to
have the tools for development ready. You can use the code editor or IDE of
your choice here. Any code editor you are comfortable with will work fine here.
If you haven’t used any code editor before, I would recommend installing Notepad++, as it is a very light-weight, easy-to-use, and
free code editor.

We’ll also need an element inspector to check and edit CSS
styles on the webpages. If you use Firefox, you can install the Firebug extension for that. However if you
are using Chrome, Chrome Web Inspector works great. It comes with Chrome, so
you don’t have to install any extensions for that. For the purpose of this
series, I’ll be using Chrome Web Inspector to debug and edit CSS styles.

Introduction to the HTML We'll Be Using

I’ve developed some HTML for the purpose of this series. The HTML contains the design patterns and
elements which are mostly used in eCommerce themes, like top cart, header
slider, currency and language picker, etc. We’ll step by step convert this HTML
into a working Magento theme. The HTML theme package is attached here for you
to download.

Pre-Reading List

Before we dive into the actual development phase, I would
strongly recommend that you go through this
Tuts+ article series on Magento theme development. This three-tutorial series will familiarize you with the theory behind Magento theming and
its basic principles. This knowledge of Magento theme development will be
particularly useful before you start getting your hands dirty with actual theme
coding.

Files We'll Be Editing

Now that you should have a working Magento installation and
tools for development ready, and you’ve gone through the basics of theme
development by reading the series recommended above, let me
briefly familiarize you with the folders where we’ll be editing files. 

When
you open your Magento root folder, you’ll see a list of folders under there.
Out of these folders, the folders in which we’ll be editing files are just the app folder and the skin folder.

We might occasionally use the js folder as well, to place
JavaScript library files like jQuery, if they are not already there. Go
ahead and familiarize yourself with the folders contained in the app and skin
folders, before you start following the steps in the next articles of this
series.

Setting Up the Magento Development Environment

We need to change some settings in Magento, which will help us
develop our Magento theme faster and will let us know if anything goes wrong in
Magento. 

First of all, we’ll disable Magento Cache. For that, go to System > Cache Management, and select all
types of caches. From the actions select Disable,
and submit.

Once we’ve disabled all Caches, the next step is to re-index the data. For that, go to System > Index Management. Select all indexes, and from the actions select Reindex Data, and
submit.

Now, we’ll enable logs and block hints in Magento. Go to System > Configurations, and in the left
sidebar, the last item will be Developer. Click on that. On the next page, from Log Settings, enable logs, and hit Save Config button on top right.

Next, on the top of left sidebar, you’ll see the Current Configuration Scope select bar.
Select Main Website from there.

Now from the Debug section, enable Template Path Hints, and hit the Save
Config button again.

Lastly, go to the Magento root directory, and open up the index.php
file from there. On line 77, uncomment this line of code:

ini_set(‘display_errors’,1);

What's Next?

That’s it for now. You might not realize it, but we have
built up a sound foundation for actual theme development in the next
tutorials in this series. In the end, I’ll again encourage you to closely go
through the Magento
Theme Development series I’ve recommended above, if you haven’t
already. 

In the next tutorial, we’ll create our new theme’s folder structure.
We'll copy the CSS, JS, and image files from HTML into our theme, and create our theme’s
local.xml file to ensure that our theme links to these files.

That’s it, and I hope you’ll follow along with us in the next
tutorials.