The Magento Commerce platform's template and theme structure makes it a flexible, extendable, and downright muscular ecommerce platform that can also be somewhat complex.
With the Magento platform each “page” is a set of .phtml template files rendered block-by-block and then skinned, so that you can control what content appears on a page and how that content looks at a website, store, page, or block level.
“The template system in Magento is pretty controversial,” wrote Mark Kimsal, in his 2008 book, php|architect’s Guide to Programming Magento. “The choice of using regular PHP for the templating language has caught some criticism from a few users. But, the choice of regular PHP has not made the templating system simple or underpowered, not by a long shot. This has to be the most flexible and advanced templating system” in PHP.
Kimsal went on to write, “There are no explicit ‘widgets’ in the system, that means, you won’t find a specific ‘Form’ class nor ‘Button’ class or object. The lowly Block classes [emphasis in original] straddle the line between widgets and templates. The nested set of templates and blocks is controlled by... you guessed it, an XML file, specifically a set of XML files. This is quite powerful for developers and plug-in contributors, but it seems that it is overly complicated for most designers (even those familiar with PHP et al).”
Magento Templates and Themes: Beauty and the Beast
In a matter of a couple of paragraphs, Kimsal elegantly captured the essence of the love, hate relationship that some web designers and developers have with Magento Commerce. The platform’s template and theme structure is at once beautiful and complex.
But it is in no way unmanageable, and, in fact, it is vital to making Magento such a useful ecommerce content management system. As an example, I recently had a conversation with an executive at one of Magento’s competitors. He asked me what I thought was Magento’s best feature, and I said it was Magento’s out-of-the-box ability to support multiple storefronts from a single backend. That executive, whose product is also very good, agreed. Even adding that it was a feature his company sought to match. Well, one of the reasons that Magento can pull off the multi-store trick is, in fact, the nature of its template and theme structure, which allows a designer or developer to apply themes and templates at a number of places in the system hierarchy, so that each storefront (or even every page) can have a different theme.
Put another way, Magento allows you override default themes and templates so that you can create two very different looking websites that still run from the same backend.
File Structure
Magento themes are divided between two directories, app and skin. By separating those theme files that a browser needs to see to (JavaScript, CSS, and HTML) from those files that a browser does not need to see (templates and layout), the Magento structure is actually more secure than many other templating systems. Web clients just don’t have direct access to files that only the server needs.
So in one sense, this is more complex than some other ecommerce platforms—two directories not one—but since these directories mirror each other at the interface level, it hardly seems overwhelming.
The app Directory
Within this structure, the app directory is populated with XML layout files, which control how each page is rendered, and PHTML blocks that contain specific page content.
Blocks are an important concept in Magento. To quote Kimsal, “blocks are the brains behind Magento’s templating scheme. Blocks form a nested set of objects that coordinate the models with the template files. Each block controls one template file: a simple HTML and PHP mixed file with a .phtml extension. What this means is that for any page request on Magento, you are dealing with an equal, but large, number of Block objects and .phtml template files.”
Put another way, blocks are feature or section modules that you can place, remove, or reposition on any page you like using layouts.
Magento has two kinds of blocks.
Structural Blocks that exist to provide structure to a page, including a header, footer, body, and column.
Content Blocks that contain content like navigation, merchandising banners, and product information.
The app directory also includes the local files, which are CSV documents that make operating storefronts in any number of languages very simple in Magento. For an example of how these CSV files work, see my article Use Magento’s Translation CSV File to Change Site Labels.
The skin Directory
In the skin directory, you will find CSS, image, and JavaScript files. These files govern site aesthetics and interactivity. No big surprise.
When I am creating a custom theme for Magento, I use the default CSS files as a starting point, since all of the class and ID identifiers that are specified in the template files are already listed in these files.
Summing Up
In this article, I have tried to provide a basic introduction to Magento’s template and theme system, including introducing you to Magento’s blocks and interface and theme directory structure.
Resources
- Magento Design Terminology
- php|architect’s Guide to Programming Magento
- Designers Guide: Creating Themes Video
