Ecommerce Developer
 
 

Platforms & Shopping Carts

Create a Custom Magento Theme, Part One

By Armando Roggio on February 23, 2011 · with 11 Comments

 

Magento is a powerful and popular open source ecommerce platform that boasts a massive development community, some 3,500 available extensions, and an installed base in excess of 90,000 active stores.

In this tutorial series, I am going to demonstrate how to make a custom Magento theme. I will be using Magento Community Edition version 1.5.0.1, which is the most recent stable version at the time of writing. In this first, episode, I will introduce the project's client, briefly describe my development environment and the Magento installation process, and show you several of the graphic design compositions that I have been creating for my project.

Getting to Know the Client

This theme has a purpose; I will actually be developing it for a real client — a company named Athlete By Nature — based in Boise, Idaho. Athlete By Nature is a small wrestling gear retailer that sells primarily at events.

Basically the folks at Athlete By Nature set up tables at wrestling tournaments or visit schools in order to sell directly to individual wrestlers, teams, or clubs. The company's founder, Jacob, has also been known to make house calls, personally delivering headgear, shoes, or mouth guards to wrestlers — some of whom were waiting for the gear in order to compete.

Jacob and Athlete By Nature's other proprietors now want an online channel. They've asked me to help, and I am going to share with you what I am doing as I work on the project.

Setting Up My Development Environment

For this project, I am using Wamp Server which is a Windows, Apache MySQL, and PHP stack. You can download Wamp Server for free, which means that it is priced just right for this project.

Magento has several system requirements, so you will want to make sure that you all of the required PHP extensions. For the Wamp Server environment, I also need to turn off setting some session cookie parameters in Magento's Varien.php file located at app > code > core > Mage >Core > Model > Session > Abstract.

The code you need to comment out is at about line 81.

        // session cookie params
        $cookieParams = array(
            'lifetime' => $cookie->getLifetime(),
            'path'     => $cookie->getPath(),
            'domain'   => $cookie->getConfigDomain(),
            'secure'   => $cookie->isSecure(),
            'httponly' => $cookie->getHttponly()
        );

Just comment out the last three and be sure to remove the comma from the second.

        // session cookie params
        $cookieParams = array(
            'lifetime' => $cookie->getLifetime(),
            'path'     => $cookie->getPath()
            //'domain'   => $cookie->getConfigDomain(),
            //'secure'   => $cookie->isSecure(),
            //'httponly' => $cookie->getHttponly()
        );

To install Magento, prepare a MySQL database, download the latest stable release, unzip it, and place it in your development environment. Then double check that you have the required PHP extensions, and point your browser to the folder you placed the files in.

You should see the Magento installation wizard.

Installation waizard

After you have accepted the license agreement, the wizard will ask you to set your location and preferred currency.

License agreement

Next, you will provide Magento with the name of the MySQL database you created and the associated credentials.

shows database connection form

If you get a warning about your base URL not being valid, and if that URL looks like http://localhost/some-directory/magento/, you can hack the form field to get it to work. Use a tool like Firebug or Chrome's developer's tools to remove the validate_url class from the input field and then resubmit the form. Hopefully, the Magento folks will fix this in a future addition.

This step in the installation process can take a few minutes.

Load your personal (think user) information next. You also get an encryption key that you should file for safekeeping. I make a screen capture of the key and save the image.

shows user information form

Using Magento's Functions and Features

Magento's standard features and functions — with the exception of an integrated blog — should work very well for the folks at Athlete By Nature. So I won't have to do any custom module development. This is good news, since it means that the project should move more quickly.

It also means that I can use an existing Magento theme as a starting point for my own custom theme development. In this case, I am going to use the Modern theme as my starting point. This theme is included in the basic Magento installation.

To add it, I navigate to the Magento backend, go to System > Configuration > Design, and add "Modern" to the "Skin," "Layout," and "Default" fields.

Shows modern theme

Graphic Design

Although I have my development environment ready, I am still not quite done with the graphic design portion of the project.

I met with the Athlete By Nature folks, went over their needs and wants, and got a list of several sites that they liked. From that meeting, I produced three initial graphic designs.

I called this composition the "Virginia Comp." I often use "found" images in comps. But then I always buy the rights for photos once the client approves.

This was the "Dark Pattern" comp. I hoped this one would be faster loading, since it has a tiled background.

The last of the three initial compositions was dubbed "White Stone."

Jacob provided me with some excellent feedback about the compositions, and I produced a single design for the second round.

In the second round of designs, several concepts were marred together.

There was more discussion about the design, and then a third-round composition.

The client really liked this third-round composition.

The only feedback that this comp received was related to the font face. Jacob and the Athlete By Nature team wanted to use Footlight MT Light, which is also featured in their logo. I tracked down the font, got a license, and generated a fourth-round composition using Footlight MT Light just about everywhere. I had to reposition some of the text to get things to layout well with this serif font.

This composition uses the Footlight MT Light font.

The folks at Athlete By Nature said that they really liked this fourth-rounder, but I still don't have the official stamp of approval.

Summing Up

In this first episode of the series, I introduced you to my client, described my development environment — I even walked you through the Magento installation — and shared some of my initial design work.

As the series goes on, I will be creating a custom Magento theme for the Athlete By Nature site. Sometimes, I will use video to demonstrate what I am doing, other times the "episode" will feature text and pictures.

Finally, don't be surprised if you are experiencing a bit of deja vu, this is actually the second time I have written a Magento theme series on Ecommerce Developer, but enough has changed with the Magento platform to make this new series worthwhile.

This Series

Related Articles

Search Terms

11 Comments

Rss-sm