We suppose you continue following our Magento certification-dedicated posts in our blog. This week we turn to another pack of Basics questions, concerning main Magento design areas; the structure of a complete theme and Magento templates, layout, skin and javascript files location.
In classical MVC architecture view files are html code with output of the logic in templates via php or any template engine, for example, Smarty (in Prestashop, Oxid) or Twig, Dwoo, Calypso, etc. Working with Magento, you may fall into delusion that everything is extremely complicated, but this complexity allows you to maintain flexibility and modularity.
In Magento there are three components of the template system. As we discussed in a previous article, there are php classes that are stored in modules folder called Block. They load the data from database and transfer it to the PHP/HTML templates in your theme (.phtml files). There are also XML layout configuration files that act as application guides on how to build a page, what to build it with and the behavior of each building block.
Identifying ad explaining the main Magento design areas (adminhtml and frontend)
All frontend files are stored in three main Magento design areas.
install
Files from this area will be displayed during the installation process.
adminhtml
Everything that you will observe while working in the admin panel can be found here. In other words, if module performs anything related to admin panel, all templates and layouts will be there.
frontend
Everything that can be observed on your webstore by any customer is stored there.
What does the structure of a complete theme look like?
Package
There are two basic packages that come with Magento installation – base and default for Community Edition, base and enterprise for Enterprise Edition and base and pro for deprecated Professional Edition.
Themes
Theme is a set of layout, template, locale and skin files, i.e. visual representation of your store. Magento is built with the option of loading multiple themes which can be divided into two major types:
- Default theme
Each package has a ‘default’ theme, i.e. the main theme of this interface. Magento automatically searches the default theme and loads it to the front-end. There are two ways of changing a store appearance: either by bringing changes directly to the theme, or, which I personally find better, creating an individual non-default theme.
- Non-default theme
Non-default theme can be completely different from the default theme or may contain some images of them. Corrections in CSS file, layout file and all the rest will be loaded from the interface default theme. Dig more about creation of a non-default theme here.
Describe Magento templates and layout files location
A theme consists of the following elements:
Layout folder includes XML files that define the layout of the theme. Layout files work as a “glue” between the modules (which are found under the app/code directory), and the template files. For more information read Intro to Layouts.
Because of Magento modularity, all XML data of the default theme are stored in separate files with the name of the module to which they belong to. A non-default theme, contrariwise, should have a single layout file, named local.xml, where all layout updates are placed.
Template folder contains of .phtml files that have HTML and PHP code for each Magento blocks which will be displayed in the frontend.
Locale folder contains .of CSV files organized on a per language basis that provide translations in format of languagecode_COUNTRTYCODE (en_US or en_UK)/translate.csv. More detailed information about internationalization will come in the future articles.
Describe Magento skin and javascript files location
Skin folder includes Javascript, CSS and image files that are used in .phtml files in template folder, i.e. all the files in this folder vary from theme to theme. From the given picture you can see that there are three main folders – CSS for style-sheets of your theme, images (for media files that are used in your theme) and JS for the templates javascript files.
JS folder embodies JS files, libraries and frameworks that are used via frontend and backend. If you need to add a new Javascript/AJAX library or your module from Local code pool requires special scripts, they should be placed here.
Read our previous posts.
Partner With Us
Looking for a partner to grow your business? We are the right company to bring your webstore to success.
Talk to Andrey
Thanks Glenn for reading and for the comment. You’re absolutely right and it’s weird that no one mentioned that before. What should be there is:
“Because of Magento modularity, all XML data of the default theme are stored in separate files with the name of the module to which they belong to.”
“Because of Magento modularity, all XML files of the default theme are stored in separate folders with the name of the module to which they belong to.”
Has this changed in later versions of magento? because in CE 1.7 and EE 1.12 the layout files are not stored in separate folders. Excluding a pair of layout files for sales, they all recide directly under /package/theme/layout.
Thanks) fixed
Little fault i saw was you typed admintml but its adminHtml :)
Hello Daren, thank you for your reply. :)
This article was written before the Magento Extension Developers Guide was published. You can put your media files (css, js, etc.) and templates in */frontend/base/ folders.
Since this is my first comment on your blog, I must start this out with this: Awsome information you guys have here. My certification exam date is this following Monday morning and when I pass I must give credit to your blog for making that possible.
My question is this: Is there an appropriate method for modules that may not be site specific (community code pool) to store JS/css/image files, so that manual installation (i.e. unzipping the module into the site) doesn’t require renaming of the skin’s package name?
Adding them to /skin/frontend/base/ would work however my understanding is that base should be left alone (at least, the existing files already in there).