How to Create a Custom Theme in Magento 2

Magento 2 Theme Development & Customisation – Today, we will learn how to create a custom theme in Magento 2.

After doing the Magento 2 Installation, you’ll find two default themes: Luma and Blank.

Luma serves as a demonstration theme, showcasing Magento’s capabilities, while Blank is designed as a foundation for building custom themes.

Although Luma is primarily a demo theme, you are free to use it for your live store without any restrictions.

Let’s look through all the steps that are required to create a custom theme in Magento 2.

Searching for an experienced
Magento 2 Company ? Find out More

Create a Theme directory
Declare your Theme
Add registration.php file and composer package
Configure your custom theme
Creating directories for static files(CSS, JavaScript, images, and fonts)
Declare Theme Logo

1. Create a 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.

2. Declare your Theme :

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>

3. Add registration.php file and composer package :

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"
        ]
    }
}

4. Configure your custom theme :

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.

5. Creating directories for static files(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>/

6. Declare Theme Logo :

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: