Home » Magento Themes » Magento theme development tutorial for designer (Part 1)

Magento theme development tutorial for designer (Part 1)

As you may know, Magento is one of the most powerful e-commerce platform.

Today, I would like to introduce the series Magento theme development tutorial for designer which provides Magento designers with the general idea behind Magento themes, the various terminologies behind it and the basic structure of a Magento theme.

In this 1st article of the series, we’ll focus on the process behind theming Magento:how to install Magento themes, the various concepts you’ll need to understand to create a theme and the general Magento template file structure. Ok, let’s get started!

Magento Theme Basics

First up, theming Magento isn’t very hard as many people think. It’s a little different from how WordPress or Joomla handles themes, yes, but definitely not difficult. All you need to know is a little know how to start theming like a pro!

A Magento theme is a collection of PHTML, CSS and JS files thrown in together along with XML files to define the structure. A PHTML file consists of regular HTML markup interspersed by PHP code for the functionality. In case, you’re confused, a random block of code looks like so:

See? It’s really simple once you wrap your head around it. If you’ve worked with creating themes for other systems, great, you’ll pick this up rather quickly. If not, no worries, I’ll walk you through the entire process.

Note that in Magento, the front end and the back end are skinned completely separately. I’m assuming most of you won’t need to skin the backend so I’ll focus on theming the front end alone.

Installing a new Magento Theme

Before we start, there were a number of people asking the same question: how to install Magento theme. I’ll talk about it first.

There are two ways to install a Magento theme:

  • The traditional method where you can just copy the packaged theme to appropriate folder
  • Magento Connect

(you may check out this magento theme installation tutorial or this video tutorial we previously published on tutorialmagento.com)

In case you don’t want to leave this post, I’ll talk briefly about both.

For the traditional method – Direct upload:

The first method is the one you’re used to. Download a theme, upload it and done. But you’ll need to know where to upload since this works a little differently than you’d assume.

Themes are packaged differently according to the source but at it’s core, you have 2 folders:

  • app
  • skin

You can just drag these to the root of the installation and let it merge with the existing data.

Looking for a good Magento hosting? read this5 best Magento hosting reviews

If by chance, you get the theme packaged as a collection of 3 folders, don’t worry.

The folder containing the PHTML files and the one containing the XML files go intoroot/app/design/frontend/default/themename while the one containing the CSS files, images and other assets goes into root/skin/frontend/default/themename.

Right now, this is all you need to do. I’ll explain why each part goes to a specific location later below. You can activate your theme now.

magento theme development tutorial for designer 1

Navigate to System -> Design and click on Add Design Change.

magento theme development tutorial for designer 2

Choose the theme you want, click on save and you’re done.

Install theme via Magento Connect

Using Magento Connect is easier provided it is available there. Navigate to System ->Magento Connect -> Magento Connect Manager.

how to install magento extension 1

After logging in, you’ll be asked to enter the extension key of the theme you want to install. Enter the key and wait for the system to do it’s thing.

magento theme development tutorial for designer 5

After it has downloaded the necessary files and placed them where they need to be, you can now activate the theme like before.

magento theme development tutorial for designer 6

After it has downloaded the necessary files and placed them where they need to be, you can now activate the theme like before.

Magento Design Concepts You Need to Know

When working with Magento, there are a few design related concepts you need to wrap your mind around before you can even start modifying the default theme.

Layouts

Layouts is a clever, new idea in Magento. This system lets you define a page’s, any page’s, structure through properly formed XML tags.

Essentially, you can dictate which section of the page goes where by changing just a few attributes in an XML file. Each view or module gets it’s layout specified by its own XML file.

Layouts in Magento is a big topic and just a few paragraphs here won’t do it justice. Along the way, I’ll cover all the necessary information you need to build your own theme along with a detailed article on layouts to cover all the advanced things you can do with this functionality.

For now, if you’re interested, here is a small snippet to get an idea of what layouts are:

Templates

Templates consist of PHTML files filled with regular HTML markup and PHP code. Similar to WordPress, you use a number of predefined methods to specify the output. Just like with other popular systems, important sections like the header, footer and the sidebar are placed in separate files and pulled in when necessary.

You can have different templates for each view of Magento. For example, you can have different code for a wish list or a checkout page instead of using the same look for the entire site.

Here is a piece of a template for the curious:

Looks a little messy, I know but strip out the PHP parts and you’ll see how similar it is to other systems.

Skins

Skins are nothing but the CSS files, JavaScript files, images and other assets you’re using in the markup to create your design. Essentially all non PHP assets go here. Fonts for embedding? Some swanky flash demo? A spiffy piece of SVG? All of those fall under this category.

Blocks

Blocks are the integral building blocks of a theme and let you build your theme in a modular fashion.

As part of layouts, this forms the backbone of Magento’s strong templating system. Blocks are essentially sections which you can move around using the XML mentioned above to modify how a page is presented.

Blocks need to reference a relevant template file so that Magento can pull in the required file. A little confused? Here is an example.

We essentially define a new block, which template to load by specifying the type of block and a name. It’s a little different from what we’ve been used to but trust me you’ll get it once you get started developing. Either way, I’ll cover blocks a bit more in detail when we’re building our theme and still more I’ll do a full write up on layouts and blocks down the line so don’t worry if it doesn’t make complete sense now. Just get a general feel for the topics at hand.

Structural Blocks

A structural block defines the basic structure of a page. Think HTML 5 header, footer and aside sections. They were created for the sole purpose of visual demarcation of a design.

magento theme development tutorial for designer 7

From the Magento docs

Content Blocks

Content blocks are similar to your regular container/wrapper DIV elements you use in a design. Just like with design, each content block contains a specific functionality or purpose. A menu in your header, a callout in the sidebar, legal clarifications in the footer all go into separate content blocks.

magento theme development tutorial for designer 8

Remember, content blocks are still blocks and map to a specific PHTML file to generate and render its HTML contents.

Interface

Mentioned finally because from a strict theming perspective of a beginner, this shouldn’t come into play for quite a while.

To be simple, an interface is a named collection of themes you can leverage to define the look of your store.

Important Locations to Keep in Mind While Theming

Just like other powerful software, Magento has a complex file structure. However, for theming along, you can narrow your focus down considerably.

magento theme development tutorial for designer 9

Here are the locations you’ll be working on when creating a theme:

  • root/app/design/frontend/default – The folder of the default interface. Aptly named default, by default. (Heh!)
  • root/app/design/frontend/default/Cirrus – The folder for the theme we will be building. I’ve named our theme, Cirrus
  • root/skin/frontend/default – The folder of the default interface.
  • root/skin/frontend/default/Cirrus – The folder where all the assets for our theme will be placed.

A Theme’s Directory Structure

Magento requires that your executable PHP content be placed seperately from your static assets which is why you have a separate skin directory on your root. While this may seem counter-productive at first, once you’ve slightly adapted your workflow, you’ll realize that this move increases the general security of your installation..

Nevertheless, a theme is typically split into the following parts.

  • Layouts – root/app/design/frontend/default/Cirrus/layouts
  • Templates – root/app/design/frontend/default/Cirrus/templates
  • Skins – root/skin/frontend/default/Cirrus

The [Second to] Last Word

And we are done! We looked at the basic concepts behind theming Magento and managing themes. Hopefully this has been useful to you and you found it interesting. Since this is a rather new topic for a lot of readers I’ll be closely watching the comments section so chime in there if you’re having any doubts.

Questions? Nice things to say? Criticisms? Hit the comments section and leave me a comment. Happy coding!

 

About Brian Wilson

avatar
Brian is a freelance Magento developer with 5 years of experience with customizing Magento extensions, magento themes. He's interested in sharing Magento Tutorials to the community

14 comments

  1. avatar

    Magento is one of the best and common used platform for users, many e-commerce sites build using Magento, you can use magento plugins that make your site more responisve and creative, read this post : Magento plugins that need to acquire you can find many sources from where you can get tutorial about how to create magento theme, check here : https://www.youtube.com/watch?v=FpNheM2Wpj8

  2. avatar

    Thank you, I will keep updating fresh Magento tutorial

  3. avatar

    Thank u so much,
    i have been searching tutorials of magento to solve the problems
    i met for several weeks and finally i got this .
    this really helps.

  4. avatar

    Thanks. I want extension tutorials too :) Many many thanks for this article and next two.
    Have a good health Brian.

  5. avatar

    I found a software for designing Magento Themes: http://templatetoaster.com/

  6. avatar

    I’m new to e-commerce and everything that i should know about building a theme is in here and explains very well, hope you cover more about creating blocks/xml. thanks.

  7. avatar

    This is very useful post, I’m new to developing e-commerce sites and everything that i need to know building a theme explains very well in here, hope you can teach more on the creating a block and xml file. thanks

  8. avatar

    Hi Brian,
    Still confusing me.

    Why all Magento articles is confusing me :) Is there any super basic and “not follow” the Magento style of documentation. For example like this. I think better start with concept.

    1. Download Magento 1.9.0.1
    2. Create new package/theme
    3. Create the first xml to represent the structural blocks layout (let say I want 2 column)
    4. Create template in phtml (let say just too display Hello World without any complex markup, so we can start this as a foundation)
    5. Assign this new package/theme from Magento CMS
    6. View the changes on real website

    I saw many Magento tutorial, initially good but usually in the middle of article start make confusion since they start to mix many scenario into one article and this is very confusing to the audience. One suggestion, is to mention article with specific Magento version, since mostly article talk about concept without telling which version they talk about.

    We don’t want to copy from existing template or module or xml from Magento default. We really want super from scratch but with deep concept.

  9. avatar

    Sorry , If want free leaning content in “sass and compass” and have workshop and How to search free leaning jQuery and javescript have a workshop please introduce for me . Thank you.

  10. avatar

    Hi , i want leaning magento and i download in last version 1.9.0.1 . How to make my responsive theme .
    Please teach me. Please.
    Note : i looking in file magento ( magento\app\design\frontend ) and show 3 folder ( base folder , default folder and rwd folder ) i think a make responsive theme
    step 1. copy 3 folder ( base folder , default folder and rwd folder ) Yes or Not
    Step 2. configuration to 1 column i think in ( CMS Page >> Home page ) Yes or not
    Step 3. Change background . i don ‘ t know please teach me. please.
    Step 4. If i want make minicart to same this theme ( http://themeforest.net/item/zensation-responsive-prestashop-16-theme-blog/full_screen_preview/6466123 ) it ‘ s “show shopping bag is empty”
    Please teach me. Please.

    Remark : 1. i want create 1 column and support for responsive theme

  11. avatar

    Hey Brian, This was an amazingly informative post regarding the design elements of Magento. I am currently just starting to work with Magento and it would be really helpful if you can post the in-depth versions of the design elements that you hinted at in this post.
    Thanks immensely for this!

    • avatar

      Thank you for your good words, I will keep updating the series of Magento theme development tutorial, stay tuned!

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Scroll To Top