Magento 2: Creating a New Theme

Magento 2: Creating a New Theme

Today we are going to consider a case, when you want create a new theme for Magento 2. Just follow the steps described below, and you will realize that it is not so difficult as it seems at first.

Initial setup

After Magento 2 is installed you should switch it to “developer mode”, to disable caching, what will help to prevent conflicts and errors. This step is obligatory for further theme development as well.

Creating a theme catalog

The first step of making a new theme for Magento 2 is creation of a new directory, where all the resources and files will be stored. We are talking about templates, layouts, css, js, as well as static images and fonts.

The biggest difference from Magento 1 is that all module’s resources are stored in the same directory. That’s why you should open a directory, where all the themes for your store are placed and create here a new one for a new theme.

Where <Vendor_Name> is a name of vendor/company  and  <Theme_Name> is a name of a new theme.

As the result we are getting the following structure:

Magento 2: Creating a New Theme

Theme declaration

The next step is creation of “theme.xml” file in the theme root directory, where such parameters have to be specified:

  • a name of a theme;
  • a name of the parent theme (optional);
  • additionally it is available to set up preview image of a theme, which could be displayed in admin panel.

For example, “theme.xml” file in our theme will look as follows:

Theme registration

The final step of the theme registration is creating “registration.php” file, which is also stored in root directory and looks as follows:

After all these manipulations we should get such structure, with a new, up and running theme, where we are able to add / replace all resources and templates that we need.

Magento 2: Creating a New Theme

Creating a composer package (optional)

By default Magento 2 themes are distributed in a package form composer.

Therefore, in case you’re planning to distribute your theme through the Composer, it is necessary to add “composer.json” file into the root directory and register the package on packaging server.

Example of the composer.json file:

To get more detailed information regarding the Composer integration with Magento 2, you can read the official developer’s guide.

Theme activation

At this stage we are ready to activate the theme in admin panel and make it visible on a frontend, therefore we have to perform the following steps:

  • login to admin panel as administrator;
  • follow to section: Content -> Design -> Configuration;
  • choose the store you need;
  • apply the theme.

Select theme in admin

By the way we strongly recommend you clear cache, to prevent conflicts. Follow these simple instructions to perform it:

  • follow to section System -> Tools -> Cache Management;
  • clear cache by clicking the “Flush Magento Cache” button.

So now you can start theme development, and notice all the changes applied.

Creation of directory for static files

It is necessary to create “web” directory for global resources of the theme, where each resource has to be placed in corresponding subdirectory:

Directory for static files

 

Every module has its own resources, that are stored in the <Namespace_Module>/web/ directory, where it is possible to modify them or add others. In order to modify modules’ resources just for certain theme it is necessary to create a new directory with a name of this module:

app/design/frontend/<Vendor_Name>/<Theme_Name>/<Namespace_Module>/web/

For example, let’s add background image to a catalog page, where “Magento_Catalog ” it is a name of a module in Magento 2:

Catalog background

Then you need to add only the path name to a certain image in _extend.less file, and only after compile LESS to display all applied changes.

Images configuration

As distinct from Magento 1, Magento 2 allows to set up image size in one file, and apply it to all images, that are used in a store. That is very useful and doesn’t require unnecessary search in templates.

This configuration file is not obligatory and in case you inherit your theme, this file will be taken from the parent theme. But if you use a new, “clear” theme, and want to change some sizes, then you need to create “view.xml” file, and perform the following steps:

  • create “etc” folder in the root directory;
  • to copy “view.xml” file from parent theme, or from “Magento/blank”;
  • to make necessary changes.

For example, let’s change a size of basic image on a product page:

It may require to re-create new images by means of using command:

Except of ability to change sizes of images, there is another one, that allows to configure images gallery on a product page.

For example, it’s available to activate points navigation on a slider in mobile version:

Logo adjustment

By default in Magento 2 the logo has SVG format, and it is stored in a directory with all static files:

<Magento_Dir>/app/design/frontend/<Company_Name>/<Theme_Name>/web/images/logo.svg

Also, the inheritance rule is acceptable here. If your theme is inherited, then logo will be used from parent theme. That’s why it is necessary to extend default layout for using  your own logo and change its size.

For that we should create a new “default.xml” file with location:

app/design/frontend/<Vendor_Name>/<Theme_Name>/Magento_Theme/layout/default.xml

And write down new rules for our logo in it:

But logo file should be placed in the directory for static files:

<Magento_Dir>/app/design/frontend/<Company_Name>/<Theme_Name>/web/images/logo.png

Done

After all these steps are completed, we should get the following structure of our new theme with all the files that we mentioned in the current article:

Complete

And now our new Magento 2 theme is finally ready for further customization.



Post a new comment

top