Magento 2: How To Create a Theme (Pt.1)

Magento 2: How To Create a Theme (Pt.1)

The topic is believed to be of a great importance, as it is dedicated to a currently central theme “How to create a theme for Magento 2.”. At the time of writing the recent version is 2.1.7. If we compare the first version with the second one, the latter is considered as the most up-to-date and upgraded. As for theme development, modular code structure has been implemented. Now all static files such as js, CSS, and images located in web folder while skin folder has been removed from Magento home directory.

Let’s create a new theme and thoroughly consider directory and files structure.

1. Magento theme directory
Themes in Magento 2 are located in the catalog/app/design/frontend. First off, it’s necessary to create a folder Vendor and then inside create a theme folder.

For example: /app/design/frontend/BelVG/air.

BelVG is a vendor, air is a theme folder. It should be mentioned that Magento developers recommend calling a folder with a capital letter despite the fact this is not an indispensable condition.

Magento 2 How To Create a Theme (Pt.1)__1

2. Magento theme declaration
In order to define a theme created by Magento, in the theme root folder you should create a theme .xml file with following details:

In tag “title” a subject name is defined. In “parent” a theme which is set as a parent is defined. All unfound static files, as well as template files, will be taken from a parent theme. In the example, the theme “luma” bound with Magento2 is defined. Whereas, Magento/blank theme is considered as a parent theme for “luma”. It is a basic theme, so there is no parent theme. The levels of inheritance can be in any quantity. Moreover, there are no limitations in contrast to the first version. In tag “preview_image” a thumbnail is defined to present a theme in the admin part.

Magento 2 How To Create a Theme (Pt.1)__2

3. Magento theme registration
In order to register a theme in the system, in the theme folder you should create a registration.php file with following details:

In our case, there will be:

Magento 2 How To Create a Theme (Pt.1)__3

4. Composer.json file addition
It is not necessary, but you may create a composer.json file to spread a theme as a composer package.

As an example, let’s consider a composer.json file from “luma” theme:

5. Theme applying in admin panel
Go to the section Content — Design — Themes and check the theme created is on the list:

Magento 2 How To Create a Theme (Pt.1)_5

If we see a theme created in the list, go to Content → Design → Configuration and then click “edit” for a definite website or selected web store. Select a theme and save settings.

Magento 2 How To Create a Theme (Pt.1)__6

Meanwhile, our theme doesn’t contain anything and we see a “luma” theme. In the next article, we will continue the overview of theme creation.

Magento 2: How To Create a Theme (Pt.1)
Magento 2: How To Create a Theme (Pt.2)
Magento 2: How To Create a Theme (Pt.3)

Post a new comment

BelVG Newsletter
Subscribe to our mailing list and get interesting stuff and updates to your email inbox.
Email *