PhpRiot
News Archive
PhpRiot Newsletter
Your Email Address:

More information

Tutorial: Introduction to Magento Theme Development

Note: This article was originally published at Planet PHP on 9 December 2010.
Planet PHP

In 2008, a small company named Varien, based in Los Angeles, quietly released an open source ecommerce platform to the world.AMagento, as it came to be known as, quickly gained traction with web developers wishing to move on from the days of osCommerce and Zen Cart to a more professional and robust system.

Magento has earned a reputation of being flexible and powerful, while remaining somewhat of a mystery to developers. Documentation for the platform was, and still is, scarce. In this tutorial, we'll look at Magento's powerful theme system, and learn how to build a simple custom theme for Magento.

Magento Templates

The template system that ships with Magento may seem a little complex at first, but the price we pay in complexity affords us a great deal of flexibility and power, as we'll discover.

There are three components to the template system:

  • PHP template files
  • PHP block classes
  • XML layout configuration

The template files contain what you'd expect a template system to handle, such as the html, JavaScript, and some PHP.

The block classes allow us to move the reusable functionality from the PHP template files into PHP classes, which can be used again on different template files in the future.A As a rule, all template files will have an associated block class.A Block classes are just normal PHP classes, and can be accessed in the template through the $this variable.

Various helper methods, such as getSkinUrl($path) or getUrl($path), are contained in all block classes. These methods are then used in a template file, by calling: $this-getSkinurl('images/logo.png'), for example.

Along with providing useful methods to the template files, blocks are also used to decide how to render the template file to the user. Each block has a toHtml() method for this purpose. Usually, the toHtml() method will simply parse the template file and output it to the user, but we could override that functionality and return anything we like, such as XML or JSON.

Finally, the XML layout configuration files are the aogluea that pulls together the entire set of template files to be rendered in the browser. In the XML, we can specify what PHP template/block combinations we'd like to load, and the order that we'd like to display them on the page.

Folder Structure

No doubt, one of the first things you'll notice about Magento is that there are hundreds of folders, and thousands of files. Let's take a look at a few of the more important ones for modifying templates and layouts:

app/ code/ {core,local,community}/ Company/ Module/ Block/ design/ frontend/ base/ default/ layout/ template/ mytheme/ default/ layout/ template/ christmas/ layout/ template/ skin/ frontend/ base/ default/ css/ images/ mytheme/ default/ css/ images/ christmas/ css/ images/

All template files will be in theA.phtml files found in various folders under the app/design/frontend/{$interface}/{$theme}/template folder.A All layout XML files will be found in the app/design/frontend/{$interface}/{$theme}/layout folder.A All blocks will be in the app/code/{core,local,community}/{$company}/{$module}/Block folder.

But what are those interface and theme names in there? An interface, in Magento template terms, is a collection of themes.AA theme, therefore, is just a bunch of layout and template files.ATypically, in a given Magento installation, you'll have one interface with many themes.AThe interface will define the overall layout of your ecommerce site, while a theme sits on top of it and gives it a particular look. Say you have an interface for your site, and a default theme. When you want to customize your shop for a holiday promotion, for example, you'd just create a new theme in the same interface and switch to that one for the duration of the sale.

The Inclusion Hierarchy

Much like WordPress, Magento relies on a hierarchy to locate theme files. Whenever a module specifies that a layout file needs to be loaded by the system, Magento will look in a number of places.

As an example, let's say that the Mage_Customer module is requesting that customer.xml be loaded to define the layout for the customer/account/login page we're trying to display. Let's also assume that we've already created an interface called aositepointa; have three themes called aochristmas,

Truncated by Planet PHP, read more at the original (another 29692 bytes)