How To Create Magento 2.x / Adobe Commerce 2.x Custom Theme Design / Development

Frontend developers need to design the custom Magento themes to come with packages, custom themes, or extended default theme design directories located at the below path

app/design/frontend/<Vendor>/ CustomTheme structure.

Each theme follows the directory structure as:

_{├── <theme1>

├── <theme2>/

├── <theme3>

├--...}

app/design/frontend/John/

_{├── <mytheme1>

├── <mytheme2>/

├── <mytheme3>

├--...}

Custom Magento 2.x Theme Directory Structure

_{/app/design/frontend/John/mage2db-theme/theme.xml
/app/design/frontend/John/mage2db-theme/registration.php
/app/design/frontend/John/mage2db-theme/composer.json
/app/design/frontend/John/mage2db-theme/media
/app/design/frontend/John/mage2db-theme/media/mage2db-theme-image.jpg
/app/design/frontend/John/mage2db-theme/web
/app/design/frontend/John/mage2db-theme/web/css
/app/design/frontend/John/mage2db-theme/web/css/source
/app/design/frontend/John/mage2db-theme/web/css/fonts
/app/design/frontend/John/mage2db-theme/web/css/images
/app/design/frontend/John/mage2db-theme/web/css/js
/app/design/frontend/John/mage2db-theme/etc
/app/design/frontend/John/mage2db-theme/etc/view.xml
/app/design/frontend/John/mage2db-theme/Magento_Theme
/app/design/frontend/John/mage2db-theme/Magento_Theme/layout
/app/design/frontend/John/mage2db-theme/Magento_Theme/layout/default.xml}

The following below steps to create custom Magento theme.

Step [1] – Create a Theme Directory

Go To: Magento 2.x Root Directory

<your Magento 2 Root Directory>/app/design/frontend

Syntax::

<your Magento 2 Root Directory>/app/design/frontend/vendor/theme

Example::

magento24/app/design/frontend/John/mage2db-theme

Step [2] – Declare Magento Theme

Go To: Magento 2.x Root Directory

Syntax::

_{<your Magento 2 Root Directory>/app/design/frontend/vendor/theme/theme.xml}

Example::

_{magento24/app/design/frontend/John/mage2db-theme/theme.xml}

write below code inside theme.xml

_{<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
    <title>John Mage2db</title>
    <parent>Magento/blank</parent>
    <media>
        <preview_image>media/preview.jpg</preview_image>
    </media>
</theme>}

_{<title> tag, display name of theme
<parent> tag, display name of parent theme
<media> tag, display preview image of theme 

Make sure you have this thumbnail (preview.jpg) in the correct location (inside media folder of theme)}

Step [3] – Add Composer Package

Go To: Magento 2.x Root Directory

Syntax::

_{<your Magento 2 Root Directory>/app/design/frontend/vendor/theme/composer.json}

Example::

_{magento24/app/design/frontend/John/mage2db-theme/composer.json}

write below code inside composer.json

_{{
    "name": "John mage2db theme",
    "description": "Custom Theme John mage2db ",
    "require": {
        "php": "~7.0.13|~7.1.0|~7.2.0|~7.3.0|~7.4.0",
        "magento/theme-frontend-blank": "100.2.*",
        "magento/framework": "101.0.*"
    },
    "type": "magento2-theme",
    "version": "100.2.4",
    "license": [
        "OSL-3.0",
        "AFL-3.0"
    ],
    "autoload": {
        "files": [
            "registration.php"
        ]
    }
}}

Step [4] – Add registration.php File

Go To: Magento 2.x Root Directory

Syntax::

_{<your Magento 2 Root Directory>/app/design/frontend/vendor/theme/registration.php}

Example::

_{magento24/app/design/frontend/John/mage2db-theme/registration.php}

write below code inside registration.php

_{<?php
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::THEME,
    'frontend/John/mage2db',
    __DIR__
);}

Run below command

_{php bin/magento setup:upgrade
php bin/magento setup:static-content:deploy -f
php bin/magento indexer:reindex
php bin/magento cache:flush
php bin/magento cache:clean}

Step [5] – Configure Custom Theme

_{[5.1] – Go To Magento 2.x admin}

_{[5.2] – Content → Design → Themes}

_{[5.3] – Content → Design → Configuration}

_{[5.4] – Select custom Theme John Mage2db theme from drop down}

_{[5.5] – Finally, custom Theme John Mage2db has been applied as default theme}

_{Run below command & Theme has been applied}

_{php bin/magento cache:flush
php bin/magento cache:clean}

Step [6] – Configure Image Properties

Go To: Magento 2.x Root Directory

Syntax::

_{<your Magento 2 Root Directory>/app/design/frontend/vendor/theme/etc/view.xml}

Example::

_{magento24/app/design/frontend/John/mage2db-theme/etc/view.xml}

write below code in view.xml

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

Step [7] – Declare Logo in Custom Theme

Go To: Magento 2.x Root Directory

Syntax::

_{<your Magento 2 Root Directory>/app/design/frontend/vendor/theme/Magento_Theme/layout/default.xml}

Example::

_{magento24/app/design/frontend/John/mage2db-theme/Magento_Theme/layout/default.xml}

write below code in 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/mage2db-logo.png</argument>
  <argument name="logo_img_width" xsi:type="number">148</argument>
  <argument name="logo_img_height" xsi:type="number">43</argument>
</arguments>
        </referenceBlock>
    </body>
</page>}

–