Creating and Managing Themes in Magento 2.0

Creating and Managing Themes in Magento 2.0

How to create a custom theme

First, let’s begin with the theme folder which is created here:

app / design / frontend /

Next comes the folder with the company name (or “Vendor Name” as used in the Developer Guide) and inside it our theme folders are located. Why do I have several themes? To explain this, let’s try to create the following structure.

image1Creating and Managing Themes in Magento 2.0

MyStore – «Vendor Name» – is the folder with the store name.

MyAbstract – is the main theme.

But as you see I have also created such themes as ‘MyHalloween’ and ‘MyNewYear’. Those themes contain some minor changes in the design and are bound to a specific period of the year.

Our second step is to create the file theme.xml with the following content in our theme folder:

Here we indicate the name of the theme, its preview, and what is more important – how is the next theme inherited.

The MyAbstrасt theme can be inherited from any of the basic Mаgentо themes (I indicated the theme as ‘blank’), but the themes «MyHalloween» and «MyNewYear» should be indicated as follows:

Now let’s use the admin panel.

Installing the basic theme: Stores / System / Configuration / General / Design

image2Creating and Managing Themes in Magento 2.0

In the upper left-hand corner there is the ‘scope’ menu where you can specify for which store this theme should be applied. Next, go to the Design Theme section where can you select the required theme.

The other themes are bound to specific dates. We’ll install them here: Content / Design / Schedule

image3Creating and Managing Themes in Magento 2.0

And that is all. All themes have been created and assigned.

Inheriting themes

We have created our themes in this directory: app / design / frontend /

But does this folder have the highest priority?  No, it does not. In our previous article about multistores we mentioned the folder ‘pub’. This folder is one of the innovations in Magento 2 and it works like a cache for scripts and styles. And you can connect a domain directly to this folder.

What is more interesting is that when we create a theme in the way described above, that theme cache is also automatically created in the ‘pub’ folder (if it is active on the front-end).

Now, let’s move to setting priorities for searching theme files.

Folder 1 – (read-only)

pub / static / frontend / Magento / [theme] / en_US /

[theme] / en_US / [vendor]_[ext] / [css / js / images]
[theme] / en_US / [css / js / images]

The reason I indicated the “en_US” localization folder is that we are setting up themes for Store View which is related to localizations. For every localization we can specify its own theme, which is also reflected in the files.

The locale of our Store View is indicated here:

Stores / System / Configuration / General / General / Locale Options

image4Creating and Managing Themes in Magento 2.0

In my case, I simply left the en_US locale by default – scope: Default Config

Do not edit files in this folder.

While cache updating all styles from modules and themes and js libraries are generated here. Let’s go further.

Folder 2

app / design / frontend / [Theme Vendor] / [theme] /

[theme] / theme.xml The information about the theme and how it is inherited
[theme] / etc / view.xml The file with the settings for product image sizes
[theme] / i18n Localization CSV files
[theme] / [vendor]_[ext] / layout Layout changes
[theme] / [vendor]_[ext] / templates Modified templates
[theme] / [vendor]_[ext] / web / [css / js / images] Modules styles, scripts, and images
[theme] / web / [css / js / images] Theme styles, scripts and images

I would like to draw your attention to the layout and localization files.

They list only changes. There is no need to copy complete files from the Folder 3.

If, however, such a layout file is also found in the parent theme, then it will be ignored.

Folder 3 – (read-only)

The list of store modules includes both basic and customized modules.

code / [vendor] / [ext] /

[ext] / etc Module settings. For instance, the view.xml file which conatins the settings for image sizes
[ext] / i18n Module localization
[ext] / view / frontend / layout Module Layout
[ext] / view / frontend / templates Module templates
[ext] / view / frontend / web / [css / js / images] Module styles, scripts and images

Folder 4 – (read-only)

lib / web /

lib / web / i18n
lib / web / [css / js / images]

Here we have a set of script libriaries and their styles. Bootstrap, jQuery, Prototype and plenty of other plugins. Therefore, before you decide to install any additional library you better check first whether it is already available in this directory.  There is no need to add the same library several times.

Layout

Now we understand that SCC can be modified in Folder 1 and Folder 2. Templates and layout are modified in Folder 2. For global changes or creating theme settings we need to create a module in the “Folder 3 “.

But I would like to specifically describe the layout modification.

As I have already mentioned before, there is no need to copy layout files into the theme.

Let’s take a closer look at certain cases, which we may need a bit later:

1. Connecting custom libraries and styles

The main additional parameters are:

src The path to the library
defer true / false There you can define the libraries which should be updated in the end.
ie_condition [lt/gt] IE [version] Connecting libraries depending on the version of the IE browser
charset Optionally you can specify the file encoding

The tag <script> also has the parameter prompt that indicates that it does not depend on other scripts and can be loaded simultaneously.

There is another <link> tag to insert. It is identical to the previous two and you can use it to insert CSS and js files – the tag will apply them automatically.

2. Blocks and Containers

There are 2 main blocks:

  • the block that generates HTML template;
  • the block that generated other blocks one by one without a template.

They can be described in the following way:

The second block was named as “container”.

Here you can also insert additional parameters that will define the html tag of the container (if necessary): htmlTag, htmlId, htmlClass

3. Inserting blocks

If you try to insert into another block:

And then inside the template block we call this:  echo $this->getChildHtml(‘my_alias’)

It is the same way for containers:

All blocks will be automatically generated one be one (you can manage output sequence by indicating block names in the ‘before’ and ‘after’ parameters).

The path to the module template is indicated in the following way:

This template will be taken either from the module:

app / code / [Vendor] / [Ext] / view / frontend / templates / my.phtml

or from the theme if it has been overridden:

app / design / frontend / [Theme Vendor] / [theme] / [Vendor_Ext] / templates / my.phtml

It has also become possible to split one big template into several smaller templates. And all of them could be overridden, but they can be connected to each other inside the template by the command ‘include’:

One more innovation. It is no longer recommended to use  <action>  as it has become obsolete. Instead, to change the template in a block you can do as follows:

4. Removing unnecessary libraries and blocks

5. Moving blocks

Basic module layouts are currently using a lot of containers. But thanks to the ‘move’ command we have the possibility to move blocks without customizing templates.

6. Transferring variables from layout into block

You can use the following types of transmitted variables: string, boolean, object, number, null, array.

Some examples:

In the end I would like to mention that if you encounter the case when you are not able to manage the block through layout you can always delete it and create a new one. For any technical problem request a support, we’d be happy to help!



6 comments

  1. Hi MISHEL SOIKO, I’m using Magento 2.0.1 But the menu system is not the like the screenshot which you have attached above. If you are using beta version. Can you make one more post for us with Magento Community 2.0.1. Which will be very helpful. Thanks in advance.
    Have a nice day.

Post a new comment

top