Creating custom Magento themes

First up, get your mock up files, photoshop layout, bootstrap template, or whatever. Then decide on a name for your  package which we’ll use for the whole project. I’m making a fashion store magento site for the purposes of learning, so i got a theme from http://w3layouts.com/, and I’ll be calling my theme ‘fashion‘. Once you have your html template ready, we start creating our folders.

Create the following directory stucture:

/app
    /design
        /frontend
            /fashion
                /default
                    /template
                    /layout
                    /locale

And in the skin directory, create the following structure:

/skin
    /frontend
        /fashion
            /default
                /images
                /css
                /js

Now we have the directory structure in place, we need to create the required files. The easiest way to do this is to copy the files from the base theme, and edit them to suit.

Copy the following files from app/design/frontend/base/default/template/ to app/design/frontend/fashion/default/template/ :

/page/1column.phtml
/page/2columns-left.phtml
/page/2columns-right.phtml
/page/3columns.phtml
/page/html/head.phtml
/page/html/header.phtml
/page/html/footer.phtml

Ok, getting somewhere. Next we create local.xml in /app/design/frontend/fashion/default/layout :

<?xml version="1.0" encoding="UTF-8"?>
<!--
/**
 * local.xml
 * Customised Magento Theme
 * @category    design
 * @package     fashion
 * @copyright   Copyright (c) 2015 delboy1978uk.
 */
-->
<layout version="0.1.0">
    <default>

    </default>
</layout>

Lastly, copy the 3 css files in /skin/frontend/default/css/ into /skin/frontend/fashion/default/css. styles.css is the main stylesheet, print.css is the style for printed materials, styles-ie.css is the style for that popular ‘browser selection tool’ 😉 .

Disable the cache. To do this, navigate to /admin in the browser and log in to your Magento control panel. Once there, go to System > Cache Management . Click select all, choose Disable in the Actions select element, and click submit.

Disabling the Magento Cache
Disabling the Magento Cache

Now we can activate our theme! Click on System > Configuration > General >Design and click on the package option. Type in your package name (in my case fashion), and click Save Config.

Our empty Magento theme
Our empty Magento theme

It’s not much to look at, but we are now using our own custom Magento theme! 😀

It’s a good idea to disable the WYSIWYG editor for the CMS section, as your HTML will be tinkered with. It’s meant for non-techie-types, so lets turn that off. Go to System > Configuration > Content Management, select Disable Completely, and again save your config.

Lastly, pages can be made out of bits from other pages. Sometimes, it can be awkward finding the file you need if there are several blocks in a page. There is a helper for this which displays the template path. Go to System > Configuration > Advanced > Developer. Above the left hand column, you will see Current Configuration Scope. Select Main Website. In the Debug section to the right, select Yes to Template path hints. Save.

Template Path Hints turned ON
Template Path Hints

Have fun setting up your own themes! I’ll be blogging more as I learn more, so stay tuned!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s