Magento 2 Theme Fallback – Fixing Blank Theme Issue

magento2theme-fallback

I am attempting to create a custom theme utilizing the fallback mechanism. The issue I have encountered is that my theme is only falling back to blank.

This is occurring even though I have set the parent to be luma. I have confirmed in the 'core_config_data' table that my theme is applied. As well as the 'theme' table, my theme (vendor_theme) has the correct parent id that corresponds to luma.

theme.xml:

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
<title>Vendor Theme</title>
<parent>Magento/luma</parent></theme>

registration.php:

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

Is there a step that I am missing here?

Also are there any comprehensive tutorials/guides related to custom theme development?

Best Answer

Lets us create a child theme so our all custom themes in Magento 2 goes here:

app/design/frontend/company_name/theme_name

Let us assume, our company name is mycompany and our theme name is basic. We need to create following directory structure for our theme:

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

mycompany :-

The name of the theme package

basic :- The name of the theme. We can have multiple named themes inside the mycompany 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/media/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

Let us now create our files one by one.

theme.xml ( 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>

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

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

default.xml ( 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>

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.

For more detail see here.

Related Topic