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.

Version Control

Version Control is a system which tracks changes to a set of files over time in order to recall specific versions from the past at some point in the future. It will allow a development team to revert files to a previous (sane) state, identify who made changes to a file, compare and track changes over time, and more. In short, it provides a way to recover from disaster in the development cycle. Developers need to collaborate with other developers on other parts of a system and version control allows them to do so safely.

Centralized Version Control systems, such as CVS or SVN, have a single server which contains all the versioned files in the system, and any number of clients which check these files in and out from that central place. SVN manages files and directories, allowing developers to modify and manage the same set of data from their respective locations and tracks changes by version number so any incorrect change can be backed out. Developers can be aware of what files other developers are working on within the system, and administrators can control what parts of the project individual developers can access. A drawback of the centralized version control system is that it contains a single point of failure – should the central server go down, no one can save versioned changes or collaborate while it is down.

Distributed Version Control systems, such as Git, Mercurial, or Bazaar, fully mirror the repository at each client. If the server crashes, it can be restored from any of the client repositories. Essentially, every check out to a client is a full backup of all the data. Distributed version control leverages the power of high-speed network connections and low storage costs which de-centralizes the store of data. Each user keeps and operates a deep local version history. Changesets are traded directly between users’ local data stores, rather than a centralized master data store, offering incredible performance for day-to-day operations.