Understanding Magento Theme: Best approach to creating a theme in Magento 2

Hello Friends!!

In today’s blog, I will recommend the best approach for creating a custom theme.

We should always use best practices for theme development to avoid conflicts and issues with
our theme after we update or upgrade our Magento instance.

By default, there are 2 Magento themes.
Luma and Blank
Luma is a demonstration theme, while Blank acts as a basis for custom Magento theme customization.

Now Create a theme.xml file to initialize your theme.

It contains the title of the theme, the preview image of the theme, the parent theme (all layouts of this theme), and CSS can be inherited by default.

Example –

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

Create a composer.json file in your theme directory to register the package.

{
   "name": "Vendor/themeName",
   "description": "Custom theme in Magento 2",
   "require": {
     "php": "~5.6|~7.0|~7.1|~7.2|~7.3|~7.4",
     "magento/framework": "100.0.*"
   },
   "type": "magento2-custom-theme",
   "version": "1.0.0",
   "autoload": {
      "files": [
         "registration.php"
      ]
    }
}

Create a registration.php file in your theme directory to register your theme in Magento.

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

Now create a view.xml file to change the type and size of the image or create your own type in the app/design/frontend/Vendor/themeName/etc directory.

Example –

<view xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/view.xsd">
<media>
<images module="Magento_Catalog">
.....
     <image id="category_page_grid" alt="preview_img" type="small_image">
        <width>200</width>
        <height>200</height>
      </image>
.....
    </images>
</media>
</view>

Base layouts –
Layout files provided by modules, Location :

• Page configuration and generic layout files: moduleDirectory/view/frontend/layout
• Page layout files: moduleDirectory/view/frontend/page_layout

Theme layouts:
Layout files provided by themes, Location :

• Page configuration and generic layout files: themeDirectory/Vendor_ThemeName/layout
• Page layout files: themeDirectory/Vendor_ThemeName/page_layout

Always create new XML layout files instead of customizing and overriding .phtml templates.
Such as if you need to create a new container, it is better to add an XML file than override an existing template.

We can create extending layout files, and modify our code as per our needs.
To extend the layout, add a layout file at the following location:

themeDirectory/Vendor_ThemeName/layout/layout.xml

Example –
To customize the layout defined in /view/frontend/layout/catalog_product_view.xml,
We need to create a layout file with the same name in our custom theme.

/Magento_Catalog/layout/catalog_product_view.xml

Override base layouts –
If we want to override the layout file, This means the new file that we place in the theme will be used instead of the parent theme layout file of the base layout file.
To override the base layout file, put a layout file with the same name at the following location –

themeDirectory/Vendor_ThemeName/layout/override/base/layout.xml

Example –

/Magento_Checkout/layout/override/base/checkout_cart_index.xml

Containers and blocks –
Always change the position of a block or container using <move>.
To move an element, we have to refer to it with its name and then set the destination attribute which can either be a container or a block.
To add or remove a block or container by setting the remove or display attribute to true or false within the <referenceBlock>.

<referenceBlock name="block-name" remove="true" /> 
OR
<referenceContainer name="container-name" display="false" />

Example –

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
   <head
        <!-- Remove local resources -->
        <remove src="css/styles.css" />
        <!-- Remove external resources -->
        <remove src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"/>
        <remove src="http://fonts.googleapis.com/css?family=Arials" /> 
   </head>
</page>

We can reorder block and container using the after and before attributes of the <referenceBlock> .

CSS –
If you are inheriting from a default Magento theme, always extend the default styles instead of overriding them.
If possible, put your customizations in the _extend.less or _theme.less file, instead of overriding a .less file from a parent theme.
Your _theme.less file of the theme overrides your parent’s theme. So, if you have to assign a parent theme to your theme,
copy the all content from the parent file _theme.less of parents theme.

If possible use Magento generic CSS classes.
It’s a best practice to use generic CSS classes because there are many third-party extensions that uses Magento generic CSS classes.

You can also include your own custom CSS by adding it in the default_head_blocks.xml file which is located in the Magento_Theme module.

Example –

<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/styles.css" />
        <css src="css/print.css" media="print" />
    </head>
</page>

When you are styling a custom theme, add styles to separate less files, instead of appending to a single file.
Because in this way, you can track down and debug the styles easily.

As a reference, check [Magento_Blank_Theme_Path]/web/css/_styles.less

Translation

If you need to change the phrases in the user interface, add custom CSV dictionary files instead of overriding .phtml templates.

Always keep the text translatable.
To ensure all the text which are used within your Magento templates can be translated,
you should wrap it within the translate function:

Example –

<a href="#"><?= /* @noEscape */ __('Show the Details'); ?></a>

That’s all about the custom theme development Hope this will be helpful.

If you have any questions please comment below, and we will try to respond to you.

Thanks! 🙂