Best explanation of Custom Magento 2 Theme Development

In this article, you going to see custom Magento 2 Theme Development in detail and step by step describing each and every point.

If you are looking for this topic then you are at a right place.

In Magento 2 there are 2 default theme called Luma and Blank.

Which you can see after complete installation of Magento 2 using composer or via done using manually step by step.

In Magento 2, demonstration theme is Luma and important point regarding Blank theme is that it act for custom theme customization.

As Luma is a defult theme and there is no restriction on using this default Luma theme.

But if any one is want to customize or to create new theme from this default Magento, then due to which there is chances of conflicts.

So not to get conflicts due to customization of the default theme Magento strongly recommends not to change default Luma and Blank theme files.

Why not to change?

Because due to this changes it may overwritten by the latest version of the default files during the upgrade to Magento.

From the above points you completely understand why we should not to change the default theme.

So let’s start with the discuss regarding how to develop a new theme.

Various steps for Magento 2 theme development

Step 1. What are the requirement for theme development in Magento 2

• Before going to start with theme development, make sure the following requirements.
• In the Magento framework, you should have some coding experience and basic knowledge of Magento 2.
• After installation of Magento please check with the front-end and back-end work successfully.

Step 2.Directory Structure for theme development in Magento 2.

For changing theme, style and template files for that it is necessary to create directory structure.

From the below path of the files you completely understand directory structure for Magento.

1. Vendor Name: Techone
2. Directory name: customtheme

/app/design/frontend/Techone/customtheme/theme.xml

/app/design/frontend/Techone/customtheme/registration.php

/app/design/frontend/Techone/customtheme/composer.json

/app/design/frontend/Techone/customtheme/media

/app/design/frontend/Techone/customtheme/media/customtheme-image.jpg

/app/design/frontend/Techone/customtheme/web

/app/design/frontend/Techone/customtheme/web/css

/app/design/frontend/Techone/customtheme/web/css/source

/app/design/frontend/Techone/customtheme/web/css/fonts

/app/design/frontend/Techone/customtheme/web/css/images

/app/design/frontend/Techone/customtheme/web/css/js

/app/design/frontend/Techone/customtheme/etc

/app/design/frontend/Techone/customtheme/etc/view.xml

/app/design/frontend/Techone/customtheme/Magento_Theme

/app/design/frontend/Techone/customtheme/Magento_Theme/layout

/app/design/frontend/Techone/customtheme/Magento_Theme/layout/default.xml

Create a web folder to add theme CSS, js, images and fonts.

In case of Magento 2 it gets totally change, instead of skin folder all goes in web folder.

Next step is to create etc folder which contain view.xml file.

All the configuration of catalog images sizes and other thing are to be done in this file.

Step 3. Create Theme Directory for theme development in Magento 2.

For creating a theme directory you need to create folder called ‘Techone‘ as a vendor name.

Under this create theme folder called as customtheme as directory name.

From the path above show from which you can under stand easily.

Step 4. Declaration of the theme.

Create file name theme.xml file under path /app/design/frontend/Techone/customtheme/theme.xml

Add below code snippet in that file.

<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/customtheme-image.jpg</preview_image>
</media>
</theme>

In the above code you will see tag name title in which you have to add theme name.

Then in parent tag you have add name of parent theme for fallback process.

And in the preview image tag you have to add image name which is represent the look of the theme image and added under media folder.

Step 5 : Create a composer for Magento theme package.

Create a file name composer.json file under the theme folder.

This file is very important in each and every aspects because it contains theme dependency information.

File path : app/design/frontend/Techone/customtheme/composer.json

Below is the code for composer file.

{
"name": "Techone/customtheme",
"description": "Magento 2 Custom Theme",
"require": {
"php": "~5.6|~7.0|~7.1|~7.2|~7.3|~7.4",
"Techone/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"
    ]
}
}

Step 6. Registration of Custom theme in Magento 2.

Create a file name registration.php file under the theme folder.

File path : app/design/frontend/Techone/customtheme/registration.php

Below is the code for registration file.

<?php
/**
* Copyright © Magento. All rights reserved.
* See COPYING.txt for license details.
*/
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::THEME,
'frontend/Techone/customtheme',
__DIR__
);

Below is the image from which you come to understand easily.

Step 7. Apply and Configure the Custom Theme.

Now the important step, as the theme is added to the theme to the file system.

Next step is activate and apply theme to your store.

So to do this login to the admin section then go to Content > Design > Themes and check regarding whether the theme is appearing in the list.

If you see it is appearing the go to the Content > Design > Configuration then select the newly created theme as shown below.

Then the next step to click on Save Config button to save and clear cache.

Step 8: Configuration of image

Now next step is of the configuration of the catalog images which can be done via configuration of its properties in the view.xml file under the theme etc folder.

It configuration all catalog product images of the store front.

For example, if you want to configure category grid view images of size 150 pixels.

Then you have add the code like as below in configuration view file.

...
  <image id="category_page_grid" type="small_image">
      <width>150</width>
      <height>150</height>
  </image>
...

Step 9: Declaration of a logo for custom theme development in Magento 2.

Create a directory named Magento_Theme/layout under which add code to the file called default.xml file.

In this file declaration of logo is done.

File Path : path is /app/design/frontend/Techone/customtheme/Magento_Theme/layout/default.xml.

Below is code snippet from which you can understand easily.

<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/customthemelogo.png</argument>
<argument name="logo_img_width" xsi:type="number">250</argument>
<argument name="logo_img_height" xsi:type="number">250</argument>
</arguments>
</referenceBlock>
</body>
</page>

As per your requirement you can add logo name and size in the code of default file

Step 10: Theme inheritance

With the help of inheritance, themes can be easily extended and lesser the maintenance efforts.

The level of inheritance is not limited in case of Magento 2.

Inheritance of Theme is completely based on fallback mechanism which is same as in Magento 1.

From which we can say that if the view file is not find in custom theme, it searches via going into default themes module files or library section.

The fallback mechanism is completely different for static files like for images, fonts, CSS, and other theme files.

Step 11 : Theme Style for custom theme development in Magento 2

The architecture pattern in case of Magento 2 applications use model-view-controller.

Mostly it involves editing CSS or LESS, so we are going to use to start editing custom theme

There are 3 different method of styling.

You should know all these three different method before starting theme styling.

• Server Side Compilation
• Server-Side Compilation Using Grunt
• Client-Side Compilation

In this article i have used Client-Side Compilation but the output is same for all 3 methods.

Before going to do these un-comment line of code in the file called .htaccess file.

SetEnv MAGE_MODE developer

Then the next step is to change the mode of LESS compilation to client side which can done.

To do this Go to Stores > Configuration > Advanced > Developer > Front-end development workflow > Workflow type

The click save config.

In this particular mode we do not need Grunt running to compile CSS as we refresh browser.

It is take care by the Magento system.

After which we can add any changes to some of the files and see the front end changes.

File Path : /app/design/frontend/Techone/customtheme/web/css/source/tone-theme.less

Use the below code in LESS file.

body {
   margin: 0px!important;
   padding: 0px!important;
}
  .page-wrapper {
   background-color: #edracc;
}

Then next step is to save file and see the result by opening the browser.

Magento 2.4 Installation

Step 12. How to Override Theme Layout

Now it is very important step, how to do Overriding of theme layout.

It is very simple you have to put the layout file with the same name in the following location.

Location is : /app/design/frontend/Magento/luma/Magento_Theme/layout/default.xml

This file override following layout file /Techone/customtheme/Magento_Theme/layout/default.xml

For customization of theme layout overriding mechanism give excellent flexibility.

Before overriding make sure regarding to do some changes in theme layout.

1. Not to change the name of the block.
2. Not to change page type.

Conclusion:

Finally, we done with Magento 2 theme development in a detail and in depth.

I hope you like this article and if you feel like we missed out on anything, please comment below.