Magento 1 vs Magento 2 Template Structure (Magento Certification Exam)

We’re going to consider the structure of templates arrangement in Magento 1 and Magento 2. Are there any differences in the Magento versions? Let’s define!

Files arrangement in both Magento versions is following.

As for Magento 1.

• /app/design – folder for all design packages (layouts, templates, translations)
• /app/design/frontend – frontend design
• /app/design/adminhtml –  frontend templates for HTML admin panel
• /app/design/{area}/{package}/{theme} – your theme
• /app/design/{area}/{package}/{theme}/layout – .xml files which determine blocks structure when pages are designed
• /app/design/{area}/{package}/{theme}/template – .phtml (html with php tags) – templates
• /app/design/{area}/{package}/{theme}/locale – Zend_Translate language tables for automatic package/theme translation
• /skin/{area}/{package}/{theme} – css, javascript-files and package/theme images

In Magento 1 theme file inheritance is covered:

Let’s consider files inheritance of the theme example.phtml:

app/design/frontend/our_package/our_theme/template/page/example.phtml
app/design/frontend/our_package/default/template/page/example.phtml
app/design/frontend/base/default/template/page/example.phtml

Here is the example of example.css file inheritance:

skin/frontend/our_package/our_theme/css/example.css
skin/frontend/our_package/default/css/example.css
skin/frontend/base/default/css/example.css

As for Magento 2, it can be arranged in two places.

1. If a theme module is deployed in composer repository:

vendor/magento/theme-frontend-<theme_code>
vendor/magento/theme-adminhtml-<theme_code>

2. Classical arrangement:

app/design/frontend/<Vendor>/<theme_code>
app/design/adminhtml/<Vendor>/<theme_code>

In Magento 2 theme inheritance takes place in the file “theme.xml”. In the tag <parent> parent theme is specified (inheritance from theme to theme is unlimited).

Partner With Us Let's discuss how to grow your business. Get a Free Quote.

Talk to Andrey

Let’s explore the templates structure which is suitable for arrangements described above.

<theme_code>/<Vendor>_<Module> – Module-specific styles, layouts, and templates.

<theme_code>/<Vendor>_<Module>/web/css/source – Module-specific styles (.css and/or .less files). General styles for the module are in the _module.less file, and styles for widgets are in _widgets.less.

<theme_code>/<Vendor>_<Module>/layout – Layout files which extend the default module or parent theme layouts.

<theme_code>/<Vendor>_<Module>/layout/override/base – Layouts that override the default module layouts.

<theme_code>/<Vendor>_<Module>/layout/override/<parent_theme> – Layouts that override the parent theme layouts for the module.

<theme_code>/<Vendor>_<Module>/templates – This directory contains theme templates which override the default module templates or parent theme templates for this module. Custom templates are also stored in this directory.

<theme_code>/etc/view.xml – This file contains images configuration for all storefront product images and thumbnails.

<theme_code>/i18n – .csv files with translations.

<theme_code>/media – This directory contains a theme preview (a screenshot of your theme).

<theme_code>/web – Static files that can be loaded directly from the frontend.

<theme_code>/web/css/source – This directory contains theme lessconfiguration files that invoke mixins for global elements from the Magento UI library, and theme.less file which overrides the default variables values.

<theme_code>/web/css/source/lib – View files that override the UI library files stored in lib/web/css/source/lib

<theme_code>/web/fonts – Theme fonts.

<theme_code>/web/images – Images that are used in this theme.

<theme_code>/web/js – Theme JavaScript files.

<theme_code>/composer.json – Describes the theme dependencies and some meta-information. Will be here if your theme is a Composer package.

<theme_code>/registration.php – Required to register your theme in the system.

<theme_code>/theme.xml – The file is mandatory as it declares a theme as a system component. It contains the basic meta-information, like the theme name and the parent theme name, if the theme is inherited from an existing theme. The file is used by the Magento system to recognize the theme.

For static file generation it’s necessary to execute the command:

magento setup:static-content:deploy [<list of languages>] [-t|–theme[=”<theme>”]] [–exclude-theme[=”<theme>”]] [-l|–language[=”<language>”]] [–exclude-language[=”<language>”]] [-a|–area[=”<area>”]] [–exclude-area[=”<area>”]] [-j|–jobs[=”<number>”]]  [–no-javascript] [–no-css] [–no-less] [–no-images] [–no-fonts] [–no-html] [–no-misc] [–no-html-minify] [-d|–dry-run]

Static files are placed in <your Magento install dir>/pub/static and <your Magento install dir>/var/view_preprocessed

As we can see from the examples, .css and .js files arrangement has changed. Now they are not stored out of the template folder in “skin” folder as in Magento 1, but they are placed in homonymous folders within the theme.

Moreover, modules template arrangement has also improved. Similarly to Magento 1, they were placed in /app/design/{area}/{package}/{theme}/template, now they are placed in the module folder <theme_code>/<Vendor>_<Module>/templates.

All the changes have simplified dealing with themes and modules templates. It’s unnecessary to look for files templates all over the project. Now it’s easier to create and install modules as well as themes.