Magento Templates and Layout Files

Themes allow you to control the look and feel of your Magento installation and the stores it contains. Related themes are grouped together in design packages, and each store in your installation can use its own theme, share a single theme, or any combination of each. The “base package” is the default design package (a collection of related themes) installed.

The files that determine the visual output and frontend functionality of your store are contained inside the themes in a design package. Each design package must contain a default theme and can contain any number of theme variants.


theme-design-treeThemes are found in two main directories in the Magento file system:theme-skin-tree

  • app/design – control how the pages are rendered
  • skin – control the visual aspect of the theme (CSS, images, etc)

Theme Files

  • Layout – the basic XML files that define block structure and control meta information
  • Template – contains the PHTML files containing xHTML markups and the PHP for visual presentation (both page and block templates)
  • Locale – CSV documents with language translation strings for non product and category text within Magento

Skin Files

  • CSS – the CSS files for the theme
  • Images
  • JS – the theme-specific JavaScript routines and callable functions

Theme Fall-back

Any files not customized by a particular theme are pulled from the default theme and base package, allowing developers to localize their themes by changing or adding only those files necessary for a custom theme.

  1. If a custom theme is specified, the application looks in:
    1. app/design/frontend/custom_package/custom_theme
    2. skin/frontend/custom_package/custom_theme
  2. If the file is not found in the custom theme, the application looks in
    1. app/design/frontend/custom_package/default
    2. skin/frontent/custom_package/default
  3. If not found in the default, the application looks in
    1. app/design/frontend/base/default
    2. skin/frontend/base/default
  4. If not found, an error occurs

Magento’s Action Controller does not pass a data object to the view or set properties on the view object but rather directly references system models to get the information it needs for display. The view is built by the combination of Blocks and Templates. Blocks are PHP objects, and Templates are PHP/HTML files. Each Block is tied to a single Template file. Inside a phtml file, PHP’s $this keyword contains a reference to the Template’s Block object.

Leave a Reply

Your email address will not be published. Required fields are marked *