How to Create Child Theme in Magento 2

Wednesday, December 9, 2020

If you want to customize the appearance (front end), it is necessary to create child theme in Magento 2 rather than implementing the changes in the parent theme. Because, if the changes are directly implemented in the parent theme, upgrading the Magento version results in loss of theme changes in the parent theme.

Steps to Create Child Theme in Magento 2:

Before following these steps, note that “Magelearn” is the vendor name and “luma” is the parent theme name.We need to create following directory structure for our theme:

<app>
     <design>
          <frontend>
              <Magelearn>
                  <luma_child>
                      <etc>
                      <Magento_Theme>
                           <layout>
                                 default.xml
                      <media>
                           preview.png
                      <web>
                           <css>
                           <fonts>
                           <images>
                           <js>
                  theme.xml

Let us see the purpose of each folder:

Magelearn :-

The name of the theme package.

luma_child:-

The name of the child theme. We can have multiple named themes inside the Magelearn folder.

etc/view.xml :-

This file is used to specify product image dimensions, thumbnails etc.

Magento_Theme :-

This directory is used to override existing Magento’s theme files.

Magento_Theme/layout/default.xml :-

By default Magento2 assumes that your theme’s logo file should be: /web/images/logo.svg

If you want some other file for logo, then you must declare it in default.xml file.

This file is also used to override default theme’s settings.

media/preview.png :-

The preview of current theme.

web :-

This directory contains all the theme’s static data like images, styles, javascript, fonts etc.

registration.php :-

This file is required to register our theme to Magento2 system.

theme.xml :-

This is a compulsory file that defines our theme name, its parent and optionally theme’s preview image.

Creating theme files

1. Create a child theme folder named as {parent-theme-name}_child in the following folder path.

Magento root folder /app/design/frontend/Magelearn/luma_child

Name your child theme related to the parent theme. It can be anything that is developer friendly!

2. Create file theme.xml inside the child theme to specify the parent theme inherited by the child theme.

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
    <title>{Child Theme Name}</title>
    <parent>{parent-theme-vendor-name}/{parent-theme-name}</parent>
    <media>
        <preview_image>media/preview.png</preview_image>
    </media>
</theme>

Example:

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

3. Create a registration.php file for registering your child theme.

<?php
\Magento\Framework\Component\ComponentRegistrar::register(\Magento\Framework\Component\ComponentRegistrar::THEME, 
    'frontend/{theme-vendor-name}/{parent-theme-name}_child', 
    __DIR__
);

{theme-vendor-name} should exactly match the vendor folder name. Vendor name should be capitalized. Ex: Magelearn

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

4. Create composer.json file.

{
    "name": "{theme-vendor-name}/theme-frontend-{parent-theme-name}-child",
    "description": "N/A",
    "require": {
        "php": "~5.5.0|~5.6.0|~7.0.0|~7.1.0|~7.2.0|~7.3.0",
        "{parent-theme-vendor-name}/{parent-theme-name}": "100.0.*",
        "magento/framework": "100.0.*"
    },
    "type": "magento2-theme",
    "version": "100.0.1",
    "license": [
        "OSL-3.0",
        "AFL-3.0"
    ],
    "autoload": {
        "files": [
            "registration.php"
        ]
    }
}

Example:

{
    "name": "magelearn/theme-frontend-luma-child",
    "description": "N/A",
    "require": {
        "php": "~5.5.0|~5.6.0|~7.0.0|~7.1.0|~7.2.0|~7.3.0",
        "magento/luma": "100.0.*",
        "magento/framework": "100.0.*"
    },
    "type": "magento2-theme",
    "version": "100.0.1",
    "license": [
        "OSL-3.0",
        "AFL-3.0"
    ],
    "autoload": {
        "files": [
            "registration.php"
        ]
    }
}

5. Create default.xml file.

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

At this point, our theme is ready. Clear your cache and we will now select our new theme from admin.Now, login to admin and move to following path:

Content -> Design -> Themes

You should see your theme listed.

Now go to:

Stores -> Configuration -> Design

Choose Main Website in front of Store View at top left. Now click Desgin -> Design Theme

Uncheck Use Default checkbox and pick your theme. Click Save Config, clear your cache and your new theme is ready. Check your home page.

Overriding Theme Templates

Sometimes we need to make modifications to existing templates. Instead of making changes directly to existing template files, we should override them in our own theme.

Let us assume that we want to update the category listing page ( list.phtml ). To do so, create following directory structure:

app/design/frontend/Magelearn/luma_child/Magento_Catalog/templates/product

Here I assume that our current theme is luma_child. Now copy the list.phtml file into product directory from the following location:

app/vendor/magento/module-catalog/view/frontend/templates/product/list.phtml

Now you can make any modifications you want to your overridden file.

Working with existing layouts

Now, we will see how we can modify & remove existing blocks/containers for a page. First, we would like to override the default.xml file provided with Magento.

1. Create following folders in your current theme:

Magelearn/luma_child/Magento_Theme/layout/

Magelearn/luma_child/Magento_Theme/layout/override

Magelearn/luma_child/Magento_Theme/layout/override/base

Now copy the default.xml file from:

/vendor/magento/module-theme/view/frontend/layout

to the folder
/app/design/frontend/Magelearn/luma_child/Magento_Theme/layout/override/base

You can have a look at blocks and containers defined in this file.

Now, we will modify this layout from out own default.xml file created at the path:

/app/design/frontend/Magelearn/luma_child/Magento_Theme/layout/default.xml

Let us say, we don’t want the top.links section. Under body section of this file, we can write:

<referenceBlock name="top.links" remove="true"/>

Let us say, we want to modify the whole footer according to our requirement. We can do:

<referenceBlock name="footer_links" remove="true"/>

<referenceBlock name="report.bugs" remove="true"/>

<referenceBlock name="copyright" remove="true"/>

<referenceContainer name="footer">
<block class="Magelearn\Test\Block\Footer" name="main-footer" template="footer/main_footer.phtml"/>
</referenceContainer>

Create a block class named Footer (how to create blocks in Magento 2) in the file Footer.php inside the folder :

Magelearn/Test/Block/Footer.php

Also, create the file main_footer.phtml:

/app/code/Magelearn/Test/view/frontend/templates/footer/main_footer.phtml

Tag : Magento2 Theme

Magento 𝟮