Custom Theme in Magento 2

Magento 2 Theme Development & Customisation – Today, we will learn how to create a custom theme in Magento 2. Let’s look through all the steps which are required to create a custom theme in Magento2.

Create a Magento 2 theme directory :

Magento 2 themes are located in the /app/design/frontend folder, so First, we have to create a Vendor folder and then create a theme folder inside of it.

E.g: app/design/frontend/Webkul/CustomTheme

Here, Webkul is a Vendor name and CustomTheme is the theme name.

Magento theme declaration :

First, we should create a theme.xml file in the theme root folder with the following code:

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
  <title>CustomTheme</title>
  <parent>Magento/Luma</parent>
  <media>
     <preview_image>media/mytheme.png</preview_image>
  </media>
</theme>

Here, we set the theme’s title tag where we set the ThemeName and parent tag where we set the parent theme name because all unfound static files, as well as template files, will be taken from a parent theme. and In the preview_image tag, a thumbnail is defined to present a theme in the admin part.

Magento theme registration

To register the theme into the system, we need to create a registration.php file at the root directory of the theme folder.

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::THEME,
    'frontend/Webkul/CustomTheme',
    __DIR__
);

Adding Composer.json file

This step is not necessary, but if you want to spread a theme as a composer package then you need to create a composer.json file in the root directory.

{
    "name": "Webkul/CustomTheme",
    "description": "This is a Custom Theme",
    "require": {
        "php": "~5.5.0|~5.6.0|~7.0.0",
        "Webkul/CustomTheme": "100.0.*",
        "magento/framework": "100.0.*"
    },
    "type": "magento2-theme",
    "version": "100.0.1",
    "license": [
        "OSL-3.0",
        "AFL-3.0"
    ],
    "autoload": {
        "files": [
            "registration.php"
        ]
    }
}

Now, run the Magento setup: upgrade and deploy commands and check our custom theme is available in the Admin area.

Proceed to the section Content —> Design —> Themes and make sure that the created theme is on the list:

If you apply the custom theme then proceed with Content → Design → Configuration and then click Edit for the website or web store that you want to apply your theme too. Select a theme and save settings.

Creating directories for CSS, JavaScript, images, and fonts

Let’s create folders for custom theme static files. The structure should be the following:

app/design/frontend/<Vendor>/<theme>/

Theme logo definition

In Magento2, the logo format is SVG by default, and the logo.SVG is located in <theme_dir>/web/images

To add a custom logo then:

1> If the logo format is SVG then put in <theme_dir> /web/images

2> if the logo format is different then it’s necessary to add a file <theme>/Magento_Theme/layout/default.xml.

In this case, we extend the layout of a parent theme. Then in the layout, the data on the logo should be added.

For customlogo.png with the size 70×40 will be declared as:

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <css src="css/style.css" />
    </head>
    <body>    
        <referenceBlock name="logo">
            <arguments>
                <argument name="logo_file" xsi:type="string">images/mytheme.png</argument>
                <argument name="logo_img_width" xsi:type="number">70</argument>
                <argument name="logo_img_height" xsi:type="number">40</argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

The complete file structure will be: