Mastering Magento Theme Design: Magento is the super-capable open source e-commerce platform that's number one for a reason. By using this book to optimize your know-how, you'll be acquiring the ultimate in e-tail expertise for yourself and your clients.

The frontend of Magento has been structured in such a way that it allows the designers to create themes based on the basic theme, without changing its structure. This fall-back system allows us to create only the files that are necessary for the customization of our theme. All other files, if any, will be taken from the base theme.

In order to create the theme's files, we can proceed in the following two ways:

In this book, we will use the second option, which is easier and faster. In the theme you need to create/duplicate only the strictly necessary files for its customization. This allows you to have a theme that is much lighter and with fewer files.

For example, let's say we want to change the header.phtml file that is the block of the theme header. You can copy the header.phtml file from the app/design/frontend/base/default/template/page/html/ path to the app/design/frontend/custom_package/custom_theme/template/page/html/ path.

The layout subdirectory allows you to define the structure of the pages through the XML files. Various page types and blocks within each page type are defined in respective XML files. Using XML, you can also incorporate CSS files or JavaScript either to be loaded throughout the site or for specific pages.

There are layouts for page types such as a catalog and category, but not for CMS pages; for them you can define custom XML directly from the admin.

Each page, part, and block of the theme is defined by an XML file. Every page is defined by a handle. To understand better how they work, we need to have an overview of the handles.

The following are the two main handles:

A handle is a reference name that Magento uses to refer to a particular page. For example, the <cms_page> handle is used to control the layout of the pages in your Magento store created through the CMS (Content Management System). Another example is the <catalog_product_view> handle used to control the layout of the product view page.

The XML files are located in app/design/frontend/base/default/layout/. For the curious, the following is a piece of code of the XML file page.xml:

In this example, we see in action the <default> handle that defines the generic JavaScript and CSS for the whole theme.

For the layout, there is no need to duplicate every single XML file to change the appearance of a block; just insert a JavaScript file or CSS file. In fact, with the exception of template files, we can create a single XML file where we can declare all the information that will add or override information of the basic theme.

For example, if we want to insert a new custom JavaScript test.js file in the head for the whole site (where all the main JS are defined), we don't need to duplicate the page.xml file, and declare the new JavaScript file there. Overrides should go in the local.xml file of our theme.

So, we can insert the new custom JavaScript test.js file in the header for the whole site by performing the following steps:

The template files are the PHTML files, a mix of HTML and PHP. These files contain the code of the various blocks and are located at app/design/frontend/base/default/template/.

The following screenshot shows a piece of code of the header.phtml file located at app/design/frontend/base/default/page/html:

Locales contain the files of localization and translation of the theme. The folder that contains translation files of the theme is app/design/frontend/base/locale.

The file that handles the translations must be named translate.csv, and within it, we're going to insert the original lines of text that are defined in the translations, or of the new text that we created in the PHTML file.

To find the default Magento localizations lines of text, you can explore the files at app/locale/en_US. If you open this folder, you can see that the translations are organized in various CSV files. Each of them represents a specific section of the site. For example, the Mage_Catalog.csv file includes all the text about the catalog pages of the site.

The locale folder contains many folders, as there are translations that we want provide, and the translate.csv file must be placed inside the language folder. For example, app/design/frontend/base/locale/en_US/translate.csv.

en_US is the name of the folder that indicates the language of the localization (en) and the country or region of the language (US).

For example, if we want to create an Italian version of the theme, we have to duplicate the translate.csv file from app/design/frontend/base/locale/en_US/ to app/design/frontend/base/locale/it_IT/.

This will be very useful to those who use the theme and will have to translate it in the future.

As I said before, we can change some existent translations or create a new one for the custom text that we insert in the PHTML files. To change the existent translation, we have to proceed in this way. For example, let's suppose that we want to change the text of the Add to Cart button from the default Add to Cart to Buy. We have to write in our two CSV columns. In the first column, the original text, and in the second column, the translated text: Add to Cart, Buy.

Alternatively, you can use the inline translation that will be stored in the database and is the final fallback. However, for theming the method described previously, it is better to have the theme localized.

Let's suppose that you want to add a new title or a new text line into a block. Inside the PHTML file, to make the line translatable, you must incorporate the text into the PHP code in the following way:

<?php echo $this->__('New text') ?>

Now, put the following in the default CSV file: "New text","New text".

When I say "the default CSV file", I mean the English version of the translate.csv file.

The following screenshot shows Reference Blocks and Content Blocks:

The reference blocks or structural blocks are the blocks that precisely define the container of the content blocks. For example, the header, the footer, the left and right sidebar, and the main content are a part of structural blocks. These blocks are defined in the layout XML files and the source files in the template files.

The content blocks are the blocks that hold the content. The structural blocks hold these blocks. For example, the logo, the links at the top, and the search are "content blocks" that are placed inside the reference block "header".

CMS (Content Management System) pages and blocks are static pages and blocks that you can manage through the admin panel. Both CMS pages and CMS blocks can contain the HTML code and Magento variables (check the next topic for more information).

CMS blocks

CMS blocks are blocks that you can create from the admin panel. They are useful for allowing the end user to customize some parts of the theme without modifying the files directly by the admin.

To create a CMS block, navigate to Admin Panel | CMS | Static Blocks as shown in the following screenshot:

Let's say, a customer needs to insert a banner independently, but hasn't HTML or other programming knowledge. We can create a link to a specific CMS block into an XML file that the customer can directly edit by admin, using the editor to insert text or an image.

CMS pages

CMS pages are the pages that can be created directly from the admin panel. CMS pages are static pages such as Homepage, About Us, and Customer Service. They are available via their own URL address that can be defined with his content from the admin as well.

You can create new pages by navigating to Admin Panel | CMS | Pages, as shown in the following screenshot:

CMS pages can contain html code and Magento variables. You can also customize the page aspect through the Design tab, where you can choose the layout of the page, and add additional Layout Update XML that will overwrite the local.xml file as shown in the following screenshot: