Ecommerce Developer
 
 

Platforms & Shopping Carts

Create a Custom Magento Theme, Part Three

By Armando Roggio on March 11, 2011 · with 11 Comments

 

Creating a custom Magento theme requires taking lots of small steps, including managing the cache, adding folders to the site hierarchy, and manipulating template files.

In this tutorial series, I will show you an example of building a custom Magento theme, using the Magento Community Edition version 1.5.0.1. The theme I will be building is for a real client, Athlete By Nature, that sells wrestling gear. In "Part One" of this tutorial series, I introduced you to the client; showed you briefly how I had my development environment set up; and reviewed the present state of the graphic design. In "Part Two," I added a free Magento extension that will integrate a WordPress blog into my Magento installation.

In this "Part Three," I will adjust the cache management to ensure that any changes I make on the backend quickly show up on the frontend. I will also duplicate some folders that will be the foundation of my theme, and I will just get started working with one of the template files that I identified at the end of "Part Two."

Disable Cache Storage Management

First, I am going to do a bit of housekeeping. When you are developing on the Magento platform, you will be making lots of changes that you will want to see on the frontend almost immediately. But you can be foiled by one of Magento's features, namely a built-in cache storage management that in most cases can help to improve performance.

In my development environment, I always turn off caching for Configuration, Layouts, and Blocks HTML Output. You will find your cache settings in the Magento administration site under System > Cache Management.

Shows the cache management

Create the Theme Folders

I am using the Modern Theme, which is free and comes from the Magento team, as a starting point for the theme I will be customizing for Athlete By Nature, my client.

I need to create a couple of theme folders, and I am going to create them by copying some of the Modern Theme's folders.

Navigate to app > design > frontend > default in the Magento file structure. Here you should find your theme folders. One of which should be Modern. If you don't see Modern you're missing the Modern Theme, which you can get from the Magento site. Next, I simply duplicate the Modern folder and name it for my theme. In my case, that theme name is "ABN."

Shows the ABN folder

Next, I head to skin > frontend > default in the Magento file system to again find a file named "modern." As before, I copy it, paste it right into this same folder, and rename it to "ABN." This new folder is the view, if you will, for the Athlete By Nature theme.

Shows the second ABN folder

Select the Theme in the Magento Administration Panel

Now that I have my theme (or at least the copied folders) included in the Magento hierarchy, I need to specify the ABN theme in the Magento administration panel. You may remember that in "Part One," I set up the Modern Theme. Now, I simply follow the same steps to reset the theme to "ABN."

Go to the admin panel. Using the horizontal, fly-out navigation, go to System > Configuration. When the Configuration page loads, select choose "Design" from the left-hand menu. Then set the Skin, Layout, and Default to the new theme name. Again, in my example this was "ABN."

Shows the theme selection

Update Page Structure

I next turned my attention to laying out the home page.

From "Part One" and "Part Two" you may have noticed that in my graphic design the header has a different background than the rest of the page, and that header background is as wide as the screen.

Shows the graphic design

By contrast, the Modern Theme is not set up to have a full width background for just the header section.

To make this accommodation, I head to the 2columns-right.phtml template that was one of the templates I identified in "Part Two" of this series using Magento's template path hints feature.

The file is located in app > design > frontend > base > default > template > page in the Magento hierarchy. Once I have opened the file, I immediately use the "save as" feature in my code editor to make a copy of the file and place it in app > design > frontend > default > page > template > page. Magento will now use this "local" copy of the template. If I ever wanted to revert, the original file is still unchanged in its original folder.

When I look at the code for 2columns-right.phtml, I discover the home page's basic layout.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->getLang() ?>" lang="<?php echo $this->getLang() ?>">
<head>
<?php echo $this->getChildHtml('head') ?>
</head>
<body<?php echo $this->getBodyClass()?' class="'.$this->getBodyClass().'"':'' ?>>
<?php echo $this->getChildHtml('after_body_start') ?>
<div class="wrapper">
    <?php echo $this->getChildHtml('global_notices') ?>
    <div class="page">
        <?php echo $this->getChildHtml('header') ?>
        <div class="main-container col2-right-layout">
            <div class="main">
                <?php echo $this->getChildHtml('breadcrumbs') ?>
                <div class="col-main">
                    <?php echo $this->getChildHtml('global_messages') ?>
                    <?php echo $this->getChildHtml('content') ?>
                </div>
                <div class="col-right sidebar"><?php echo $this->getChildHtml('right') ?></div>
            </div>
        </div>
        <?php echo $this->getChildHtml('footer') ?>
        <?php echo $this->getChildHtml('before_body_end') ?>
    </div>
</div>
<?php echo $this->getAbsoluteFooter() ?>
</body>
</html>

What I notice is that inside of the body element, I have a div with the class name "wrapper." Just inside "wrapper" is another div, this time with the class name "page." In side of "page," I find the line of PHP that grabs the template for the page header.

<?php echo $this->getChildHtml('header') ?>

Now that I have some idea about the page structure, I need to learn which element is dictating the width. I can do this using any modern browser's development tools. Generally, I favor Mozilla's Firefox and the awesome add-on, Firebug. But for this example, I felt like using Chrome and the WebKit development tools. If you are unfamiliar, just navigate to the home page in Chrome. Right click just about anywhere, and select "Inspect Element" from the menu. The development tools should just open.

Shows the inspect element option on the menu

Shows the development tools

Thanks to the developer tools, I learned that the "page" div has a width set to 960 pixels on line 94 of styles.css. Rather than actually changing this style, I go back to the 2columns-right.phtml template and move the line of PHP that specifies the header template, positioning it outside of the "page" div but inside of the "wrapper" div.

Shows squares to indicate the structure before the change

Shows the structure after the change

Here is the change in the code.

</head>
<body<?php echo $this->getBodyClass()?' class="'.$this->getBodyClass().'"':'' ?>>
<?php echo $this->getChildHtml('after_body_start') ?>
<div class="wrapper">
    <?php echo $this->getChildHtml('global_notices') ?>
   <?php echo $this->getChildHtml('header') ?>
    <div class="page">

Here's the result.

The repositioned header is shown

Summing Up

In this part of the tutorial series, I (1) showed you how to find and disable the cache management system in Magento; (2) demonstrated how to create the theme folders; and (3) began manipulating the page header.

In the next section, I will continue working with the page header and prepare some homework for my client, Athlete By Nature.

This Series

Related Articles

Search Terms

11 Comments

Rss-sm