How to Create Child Theme in Magento 2

April 16, 2018 - Fire development, Magento 2

Magento 2 Development; Magento 2 tutorial

Below, we discuss some basic aspects of creating a child theme in Magento 2. If you want to modify certain aspects of the out-of-the-box theme preserving the original files and ensuring all changes are saved after Magento is updated, you need to create a child theme.

Create a child theme so that all your custom themes in Magento 2 go here:

app/design/frontend/company_name/theme_name

Where

company_name is mycompany
theme_name is basic.

The theme has the following directory structure:

<app>
     <design>
          <frontend>
              <mycompany>
                  <basic>
                      <etc>
                      <Magento_Theme>
                           <layout>
                                 default.xml
                      <media>
                           preview.png
                      <web>
                           <css>
                           <fonts>
                           <images>
                           <js>
                  theme.xml
                  registration.php

<app>

<basic>

<etc>

<Magento_Theme>

default.xml

<media>

preview.png

<web>

<css>

<fonts>

<js>

theme.xml

registration.php

Where

mycompany is the name of the theme package;
basic is the name of the theme. Use multiple theme names inside the mycompany folder.
etc/view.xml is a file used for specifying product image dimensions, thumbnails, etc.
Magento_Theme is a directory used for overriding existing Magento’s theme files.
Magento_Theme/layout/default.xml – declare your theme’s logo file here. By default Magento2 assumes that it is /web/media/logo.svg. Use the same file to override the default theme’s settings.
media/preview.png is the preview of the current theme.
web is a directory that contains all the theme’s static data including images, styles, javascript, fonts, etc.
registration.php is a file required for registering your new theme to the Magento 2 system.
theme.xml is a compulsory file that defines your theme name, its parent, and (optionally) theme’s preview image.

Now, it is necessary to create theme files.

app/design/frontend/mycompany/basic/theme.xml

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
   <title>Basic</title> <!-- your theme's name -->
   <parent>Magento/blank</parent> <!-- the parent theme -->
   <media>
        <preview_image>media/preview.jpg</preview_image> <!-- theme's preview image -->
   </media>
</theme>

<title>Basic</title>

<parent>Magento/blank</parent>

<media>

<preview_image>media/preview.jpg</preview_image>

</media>

</theme>

app/design/frontend/mycompany/basic/registration.php

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

<?php

\Magento\Framework\Component\ComponentRegistrar::register(

\Magento\Framework\Component\ComponentRegistrar::THEME,

'frontend/mycompany/basic',

__DIR__

);

app/design/frontend/mycompany/basic/Magento_Theme/layout/default.xml

<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>

<body>

<argument name="logo_file" xsi:type="string">images/my_logo.png</argument>

</arguments>

</referenceBlock>

</body>

</page>

Your new child theme is ready. You have to clear the cache and select it from admin. In the Admin, go to Content -> Design -> Themes. Your theme should be listed here. Now, visit Stores -> Configuration -> Design. Choose “Main Website” in front of “Store View” at top left and click Design -> Design Theme. One of the last steps requires unchecking “Use Default” and picking your theme. Don’t forget to click “Save Config” and clear your cache.

We hope this post was useful. It is based on the StackExchange question by H. Ferrence and the answer by Arunendra. For more useful articles, check out our Cookbook.

Post Tags:Child Theme magento 2 Magento 2 Developer’s Cookbook

← Previous Post Next Post →

Related posts