How to create Magento2 custom theme?

Posted on 11 April, 2018

As we know Magento 2 already provides a default theme named Luma, which is the most attractive and elegant theme. Though, sometimes it is mandatory for developers to do some customization into the theme. But it is such touchy task. So to make it easy here is the guidance for all developers who wish to make changes in their theme and make it look like they want.

To Create Magento 2 Theme:

  • Create folder and file
  • Declare your theme
  • Composer package
  • Add registration.php file
  • Create static files, folders
  • Configure catalog product images
  • Layout changes
  • Apply and Configure theme in Magento 2 Admin

Create folder and file:

You need to create a folder in app/design that contains theme <vendor_theme>
Create Folder 1 <vendor>. It is the vendor name. For example: Emipro
Create Folder 2 <theme> inside <vendor> folder. It is the theme name. For example: custom
Now the path is app > design > frontend > Emipro > custom

Declare your theme:

Now you need to create an XML file that is theme.xml which contain the name of your theme and its parent theme. That should be done in a case when your theme inherits from an existing one. You can optionally specify where to store the theme preview image.

  • Add or copy from an existing theme.xml to your theme directory app/design/frontend/Emipro/custom/theme.xml
  • Configure it using the following example:
 
1
2
3
4
5
<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
<title>Emipro Custom Theme</title> <!--the path to your theme's preview image -->
   
<parent>Magento/luma</parent> <!-- the parent theme, in case your theme inherits from an existing theme -->
</theme>

Composer package:

We know that Magento’s default themes stay distributed in the form of composer packages. Thus, to distribute your theme as a package, add a composer.json file to the theme directory and register that on a packaging server. This composer.json file will provide you theme dependency information. Example of theme composer.json is as below:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
{
    "name": "emipro/custom",
    "description": "N/A",
    "require": {
        "php": "~5.5.0|~5.6.0|~7.0.0",
        "magento/theme-frontend-blank": "100.0.*",
        "magento/framework": "100.0.*"
    },
    "type": "magento2-theme",
    "version": "100.0.1",
    "license": [
        "OSL-3.0",
        "AFL-3.0"
    ],
    "autoload": {
        "files": [
            "registration.php"
        ]
    }
}

Add registration.php:

To register your theme in the system, you need to add a registration.php file in your theme directory with the following content:

1
2
3
4
5
6
7
<?php
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::THEME,
    'frontend/<Vendor>/<theme>',
    __DIR__
);
?>

<Vendor> is vendor name. e.g: Emipro
<theme> is theme name. e.g: custom

Creating static files, folders:

Now if you want static files/folders in your theme, you need to create a web folder which contains all kind of files like images, CSS, js, fonts, etc.

app/design/frontend/Emipro/custom/
├── web/
│ ├── css/
│ │ ├── source/
│ ├── fonts/
│ ├── images/
│ ├── js/

  • CSS folder contains the CSS files and LESS file.
  • To create or override LESS file, create ‘source’ folder inside the CSS folder.
  • Then create _extend.less file which is overridden by its parent theme.

  • The _extend name indicates extending the parent LESS file and not overriding it. So the values that you do not change in _extend.less, that will be implemented from its parent file.
  • Put all the content of overridden LESS file here. Like if you want to change menu color and design, then copy _navigation.less file from its parent directory (like /vendor/magento/theme-frontend-blank/web/css/source/_navigation.less) then make change in navigation file.

After creating a theme, you need to decide that which compilation mode you will use. There are mainly two modes available in Magento:

  • Server-side compilation mode
  • Client-side compilation mode (recommended while under development)

I will give you a practical example how to change the theme color to override LESS variable.

In Magento, LESS file defines variables of theme. To change properties of any CSS, override its variable or class in your LESS file. To add custom CSS to your custom theme create _extend.less file.

In Luma Theme, Base color is blue, Now I want to replace all blue to red then just override the blue color value with red.

How?

Let me give you an example:

In _extend.less file:

1
2
3
@color-blue1: #e4373a; // normal red
@color-blue2: #9e1517 ; // dark red
@color-sky-blue1: #e37173; // light red

Here @color-blue1 , color-blue2 and color-sky-blue1 are magento default variables. I have override their values with distinct red color code.

You can create your own variable globally like :

1
2
3
4
5
6
7
@emipro-footer-bg-color:#000;
.page-footer
 {
    background: @emipro-footer-bg-color;
    margin-top: auto;
    padding-bottom: 25px;
 }

 @emipro-footer-bg-color is custom variable, now I can use this variable in any class.

Configure catalog product images:

If you want to change the product image size, for example, Product images size Category page, then you can change it in below way rather than forcefully overriding the CSS file. It is not a mandatory step while creating a theme, but we have included it here for ease of developers.

Now follow the path app/design/frontend/Emipro/custom/ and create a new folder named etc. In that folder create view.xml file or copy it from the parent theme(i.e. a Blank theme)

As mentioned above in the theme structure there is a file named view.xml in etc. folder. That is the configuration file. Every single Magento theme must require this file. It is not needed in the case if the file already exists in its parent theme.

Now the new path will be app/design/frontend/Emipro/custom/etc/view.xml

Here, you have update images configuration to use them for catalog product grid page.

1
2
3
4
<image id="category_page_grid" type="small_image">
    <width>250</width>
    <height>250</height>
</image>

In view.xml, image properties are configured in the scope of this element:

1
2
3
<images module="Magento_Catalog">
...
<images/>

So you need to add <image> Tag inside this element.

Image properties are configured for each image type defined by the id and type attributes of the <image> element: (id category_page_grid is default, below way you can create custom id like unique_image_id)

1
2
3
4
5
6
<images module="Magento_Catalog">
    <image id="unique_image_id" type="image_type">
    <width>100</width> <!-- Image width in px -->
        <height>100</height> <!-- Image height in px -->
    </image>
<images/>

Let’s add custom variable.

1
2
3
4
5
6
<images module="Magento_Catalog">
    <image id="watermark_image" type="thumbnail">
    <width>80</width> <!-- Image width in px -->
        <height>80</height> <!-- Image height in px -->
    </image>
<images/>

 Layout changes:

There are mainly two possible ways to customize page layout in Magento.

  • Changing layout file
  • Alter template

To change the layout of the page, you need to modify the page layout files. Other than this, the page configuration or generic layout files will perform all customizations.

There are two ways to change layout:

  • Override Layout File
  • Extend Layout File

Override Layout

To override layout files, you need to copy parent theme or module layout file in your custom theme and make changes you want. For that, you must have to change the name of the block and container.But it's not the proper way override XML files. So I suggest you go with second way.i.e. Extend Layout File

Extend Layout

In Magento system, rather than copying extensive page layout/page configuration code and then modifying them with desired changes, just create an extending layout file that holds everything you want.

Put the layout file in the following location:

<theme_dir>
 ├──/<Namespace>_<Module>
 │ ├──/layout
 │ │  ├──<layout1>.xml
 │ │  ├──<layout2>.xml

For example, to customize the layout defined in <Magento Catalog module dir>/view/frontend/layout/catalog_product_view.xml, you need to add a layout file with the same name in your custom theme, like following:

<theme_dir>/Magento_Catalog/layout/catalog_product_view.xml

Example: Change the layout of product page from default “1-column” to “2-column with left bar”. To do this, extend catalog_product_view.xml in your theme by adding the following layout: app/design/frontend/<Vendor>/<theme>/Magento_Catalog/layout/catalog_product_view.xml

app/design/frontend/<Vendor>/<theme>/Magento_Catalog/layout/catalog_product_view.xml

1
2
3
<page layout="2columns-left" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
...
</page>

Include static resources (JavaScript, CSS, fonts):

The <head> tag of the page configuration file will hold all the static resources like JavaScript, CSS, and other assets.

The default look of a Magento store page <head> is defined by app/code/Magento/Theme/view/frontend/layout/default_head_blocks.xml. The recommended way to add CSS and JavaScript is to extend this file in your custom theme, and add the assets there.

  <theme_dir>/Magento_Theme/layout/default_head_blocks.xml

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <!-- Add local resources -->
        <css src="css/my-styles.css"/>
     
        <!-- The following two ways to add local JavaScript files are equal -->
        <script src="Magento_Catalog::js/sample1.js"/>
        <link src="js/sample.js"/>
         
        <!-- Add external resources -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js" src_type="url" />
        <link rel="stylesheet" type="text/css" src="http://fonts.googleapis.com/css?family=Montserrat" src_type="url" />
    </head>
</page>

Apply and Configure theme in Magento 2 Admin:

  • After adding your theme to the file system, you can activate and apply it to the store. Now to view your custom theme in the list go to Content > Design > Themes from a backend.
  • As you find your theme in the list,  go to Content > Design > Configuration.
  • Now select your theme and click on the “Save Config” button.
  • Clear the cache.
  • Press Ctrl + F5 or Ctrl + Shift + R to hard-refresh the static files on your frontend.(i.e. Homepage).Now you can see the change in your theme.
  • In case, if any picture won’t display on the homepage-Deploy the static file again by using below commands:
php bin/magento setup:upgrade
php bin/magento setup:static-content:deploy

Nimita Gajera , eCommerce Project Manager

Magento Blog

About Emipro

Being an emerging leader in IT market since 2011, Emipro Technologies Pvt. Ltd. has been providing a wide range of business solutions in Odoo & Magento. We are pleased to have a large pool of contented customers with our meticulous work in the domain of ERP & e-Commerce. Our customers are companies of all sizes ranging from startups to large enterprises who realize that they need a professional internet solution to generate revenue streams, establish proper communication channels, to achieve desired goals and streamline business operations. [....] Read More

Our writings seems informative ?

Subscribe for our Magento Blog and get more amazing stuff directly to your inbox!

Post Your Review

X

Your Review has been posted

0 Comment(s)