Magento Theme Structure

magento_ecommerceIt’s normal for us as developers to change the appearance of a product or application. Even if you have an excellent theme for your Magento website, maybe, you could create a seasonal design, or make some alterations in your current theme. Why not try something new?

If you have prior experience using CMS, for example Joomla, probably you’ve noticed that in Magento themes are structured in a different way. While in Joomla you could create your template using just one file, in Magento you need to use different files and follow its file structure. This idea might sound a little bit complex in the beginning, but with a little understanding you see all the advantages of Magento and how flexible it is.

Magento’s themes are developed around two main principles: structure and appearance. A theme’s structure defines blocks on the page and the content related to each block. It’s controlled by files that stores information about layout, templates and locales. On the other hand, appearance is how a theme looks and feels. The theme’s appearance is controlled by CSS, JavaScript and images.

Also, Magento requires those files in the proper directories. Files related to the theme’s structure must be in the app/design/frontend/<designPackageName>/<themeName>/ directory. Inside this directory, the following sub directories are used to organize all the files:

  • Layout—Contains the basic XML files that define block structure for different pages as well as control meta information and page encoding.
  • Template—Contains the PHTML files that contain xHTML markups and any necessary PHP to create logic for visual presentation. Some templates are page templates and some are block templates.
  • Locale—Contains simple CSV text documents organized on a per language basis containing translation strings (as name-value pairs) for all text produced by Magento (e.g., for interface elements and messages, not    products and categories)

Files related to theme appearance must be in the skin/frontend/<designPackageName>/<themeName>/ directory. Inside this directory, the following sub directories are used to organize all the files:

  • CSS—Contains the CSS files used to control visual styling of the website
  • Images—Contains all images used by the theme
  • JS—Contains theme-specific JavaScript routines and callable functions. (Most JavaScript libraries, which might be shared across themes) are placed in the js/ directory at the Magento root

There is a reason behind this apparent complexity. Magento stores those files in two main different directories for security reasons. Considering the client’s browser only needs to access the files in the skin/frontend/<designPackageName>/<themeName>/ directory and just your Magento application should have access to the app/design/frontend/<designPackageName>/<themeName>/ directory, you can better control  the permissions for each directory and keep your application secure.

If you plan to create your own theme, the first step is to create the new directories for it. The following articles in this series will bring information on how to change and create structure or appearance files in order to create your theme. See you next time.