Ecommerce Developer

Building a Magento Theme Start to Finish, Part Two: Page Planning, Templates, & HTML 5

January 14, 2010 · by Armando Roggio

 

Magento themes and the developers who can create them are in high demand.

Developing Magento themes for specific clients or for resale on template marketplaces can provide a nice bit of incremental income for savvy web developers. And, from a technical standpoint, creating a Magento theme is not much of a challenge.

About this Magento Theme Series

This article is the second in a series of posts created to walk you through developing a Magento theme from start to finish—line-by-line. These articles are aimed at intermediate level web developers and designers, and will discuss all of the major steps and development decisions associated with theme creation. The theme being created in these articles, which I call Pine, will be used on a live store, so this is not just some kind of coding exercise. It is a real Magento store theme in the making.

In the first article, I briefly discussed some of the business decisions behind the Pine Theme, for example, I said that we wanted to include site badges (trust symbols), have lots of merchandising, and engage customers. I showed you a mock-up of the graphic design, and I mentioned that we would not be creating our theme from nothing, rather we are going to start with the Modern Theme from the Magento Core team and build from there.

The Series' Links

Page Planning

The next step in the theme development process is to identify which and how many pages I am going to need to develop. Now, thanks to the Modern Theme, nearly all of the pages I want have been created in some form or another. I just need to identify them so that I am sure to address each one with the appropriate CSS, JavaScript, or other changes. I do this bit of page planning in a simple Microsoft Excel spreadsheet. I track the page, its template in Magento, and the status of any PHP, HTML, CSS, and JavaScript updates. You may also want to track the status of page content if you are building your theme for an actual site, but you won't need to monitor content if you are creating your theme for resale on a theme marketplace.

I use a simple spreadsheet to track the project pages.

Magento Connect to Get the Base Theme

To start, I need to get the Modern Theme. Get an extension key from the Modern Theme page on the Magento website. Navigate to Magento Connect in the store backend, and follow the instructions for including this theme extension.

Avoiding Cookie Problems

If, like me, you also got a few updates when you installed the Modern Theme, and, like me, you are developing on a localhost, you may have some new cookie problems.

Magento sets session cookies. And most browsers won't allow cookies to be set from the localhost. As a side effect of this cookie incompatibility, you may not be able to login to your store backend anymore. But have no fear, this is a pretty simple fix. In fact, if you’re working with Magento on a localhost for the first time, I recommend that you see my earlier article, Avoid Two Problems Installing Magento On A Localhost that describes this cookie fix and points out some PHP extensions you'll need. For the purpose of this theme creation, I am going to comment out session cookies. To accomplish this, I will need to navigate to Varien.php. The path is app/code/core/Mage/Core/Model/Session/Abstract.

I'll find the code for setting session cookie parameters, which should look like this:

        // set session cookie params
        session_set_cookie_params(
            $this->getCookie()->getLifetime(),
            $this->getCookie()->getPath(),
            $this->getCookie()->getDomain(),
            $this->getCookie()->isSecure(),
            $this->getCookie()->getHttponly()

I'll comment out the final three lines, being certain to remove the comma after $this->getCookie()->getPath(). 

        // set session cookie params
        session_set_cookie_params(
            $this->getCookie()->getLifetime(),
            $this->getCookie()->getPath()
            // $this->getCookie()->getDomain(),
            // $this->getCookie()->isSecure(),
            // $this->getCookie()->getHttponly()

File Copying and Theme Selection

Once I have downloaded the Modern Theme, I am going to copy its two folders and rename those copies to Pine. In the Magento admin, I will identify Pine as the theme to use for my store.

HTML 5 Document Type and Sections

Next I am going to change the document type to <!DOCTYPE HTML> and add semantic sections like <header> and <footer> to the PHTML template for the home page, so that our home page will be in HTML 5.

Summing Up

In this article (and video), I took you through the next several steps necessary to build a Magento Theme. In our next episode, I will start to change the CSS, work with layout, and add a content slider to the home page using Magento's CMS features.

Related Articles

This article is filed under Open Source and has the following keyword tags: Magento, theme, tutorial, HTML 5.

18 Comments

Most Active

 

Inside Ecommerce Developer

Articles

Podcasts

Newsletters

Directory

Jobs