How to create theme on Magento 2 (part 1)
April 25, 2015 | Write by
Hey guys, how much knowledge you have accumulated for Magento 2? Anything you want to share? For me, there are many interesting features I’ve found in Magento 2.
Whoever you are an extension or theme developer, you should spend time reading this blog post because you’ll understand more about theme and template structure in Magento 2.
I will divide this tutorial into 2 parts. The part one in today’s post is about primary elements in Theme package. Part 2 will reveal how to customize it in Magento 2.
1. Fundamental elements in Theme package
a. Theme structure in Magento 2
MVC structure in Magento 2 is clearer than in Magento 1.x. Modules in Magento 2 will also be added View element in the module folder structure. Catalog module: app/code/Magento/Catalog/ is an example for you.
Please pay attention to View element which is in the same position with Controller, Model. In the View folder, there are below elements:
We can see that the inside structure has 3 elements, in which base element is moved out from <area>. The folder structure in <area> folder includes layout, templates, web. For example, frontend has 3 fundamental folders
+ Layout folder contains all the layout file of module (similar to layout file of Magento 1.x which is contained in all layout folders of theme). The code of these layouts, of course, have different structure. I will write in details in the specific part for layout file below.
+ Template folder has all template.phtml file, which is file rendered into html as we know in Magento 1.x, inside code is not very different, just php code mixes with html code.
+ Web folder is a totally new folder in Magento 2. You can see the image below
Let’s take a look at child folder and the files inside! We can realize that here is where css – stylesheet, js, media – images (that are called elements to make website appearance better-looking) are grouped. It replaces for 3 folders: css, images, js in previous skin/frontend/base/default. In other words, in Magento 2, the old skin folder is removed and divided into elements in each module, which makes the module more independent.
In Magento 2, each module has a default layout which can be overwritten and expanded by another layout.
Magento 2 separates layout files into particular handle
Handle declaration is nearly the same as the previous rule:
catalog_product_view – is a handle according to module and controller action
The definition for page we want to apply the layout is more specifically by declaring
Or we can call to include other handles
Here is the example about layout file position of Catalog module:
There are 2 types of layouts in module, including Base layout and Theme layout
+ Base layout is a default layout area of each module. It’s not recommended to edit in these layout files if it’s not your custom module.
+ Theme layouts is the theme outside the module, allowing customizing default layout of module by reporting corresponding <Namespace>_<Module> in theme folder
To create a layout file, follow the rules:
- Each layout file calls for one handle and others called
- Name of layout file is the name of handle layout. Eg: checkout_cart_index
- Layout file called is in layout folder
<layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"> <update handle="page_one_column" /> <referenceContainer name="content"> <!-- ... --> </referenceContainer> </layout>
The order to read and process layout files is described as below:
- If layout file belongs to different module, the order to run will be: independent module, dependent module and then alphabetical order of file name.
- If file belongs to the same module, the order will be alphabetical order of file name
The steps to proceed layout of the system:
- Read the group of all default layout files (base), including dependent ones
- Determine the order of inherited or overwritten files
- Add all expanded layout, replace layout in base, get in parent layout, replace parent layout files which are overwritten by the child ones
Here is the model of processing layout
It can be seen that layout files are overwritten from the top down, the parent theme overwrites base theme of module, the child theme (the theme we often customize) overwrites the parent one.
The file layout_2 of module Module_One is declared in the parent theme parent_theme in override folder. Thus, instead of the layout Module_One > layout_2.xml, the system will use the file parent_theme > Module_One > override > layout_2.xml
Therefore, if you want to customize the element of layout, by these rules above, you can easily copy to the structure of the child theme to rewrite the layout files.
Similarly to Magento 1.x, it is divided into the fundamental layout areas:
+ Container: The area to distribute page elements
+ Block: the area where default block elements of Magento are in container
The sample of layout content:
<container name="container.1" label="Container 1" as="container_1" output="1" htmlTag="div" htmlId="container-1" htmlClass="container"> <block class="Magento\Module\Block\Class" name="block.1"> <container name="child.container" label="Child Container" as="child"> <block type="Magento\Module\Block\Class" name="block.2"> </container> <block class="Magento\Module\Block\Class" name="block.3"/> </container> <container name="container.2" as="container_2" htmlTag="div" htmlId="container-2" htmlClass="container"/>
c. Introduction about new language style – LESS
Before we can customize the elements in theme, we need to learn about the new language style – LESS. This language is interesting in Magento 2.
LESS is added as higher-level than CSS because there are many advanced features. It is translated into CSS thanks to LESS library in php. We’re still allowed to add CSS URL in the source to use directly.
Use via LESS:
The pre-process LESS language in Magento 2 is through library in lib/internal/Magento/Css/PreProcesso.
The way to import in LESS file
|@import “path/to/dir1/some_file”;@import “path/to/file/file1.less”;@import “path/to/file/file2.less”;|
The structure of default LESS library folder is imported
│ ├── docs/ (Library documentation)
│ ├── source/
│ │ ├── lib/ (Library source files)
│ │ │ ├── abstract.less
│ │ │ ├── actions-toolbar.less
│ │ │ ├── breadcrumbs.less
│ │ │ ├── buttons.less
│ │ │ ├── dropdowns.less
│ │ │ ├── forms.less
│ │ │ ├── icons.less
│ │ │ ├── layout.less
│ │ │ ├── lib.less
│ │ │ ├── loaders.less
│ │ │ ├── messages.less
│ │ │ ├── navigation.less
│ │ │ ├── pages.less
│ │ │ ├── popups.less
│ │ │ ├── rating.less
│ │ │ ├── resets.less
│ │ │ ├── responsive.less
│ │ │ ├── sections.less
│ │ │ ├── tables.less
│ │ │ ├── tooltips.less
│ │ │ ├── typography.less
│ │ │ ├── utilities.less
│ │ │ └── variables.less
│ │ └── theme.less
│ └── styles.less
│ └── Blank-Theme-Icons/ (Library custom icons font)
│ └── blank-theme-icons.png (Library icons sprite)
d. Mage_page element
The Mage_page element in the previous Magento version is replaced by Mangento_Theme module.
NOW ARE YOU READY FOR THE NEXT PART » How to create theme in Magento 2 (part 2)