Create new custom theme in magento2

Magento provide default theme when install so I would recommend to keep Magento’s blank theme as parent so that all necessary functionalities for theme will automatically inherit which you can define in theme.xml file. All you need to follow Magento standards to create theme

Steps to make theme as following

Create theme folder structure
Define, registration and composer
Adding custom content
Activate new theme on storefront

Create theme folder structure

All you need to create theme’s folder structure in app/design/frontend/ folder

For example: app/design/frontend/<VendorName>/<ThemeName>

Define, registration and composer

Create file app/design/frontend/<VendorName>/<ThemeName>/theme.xml

<?xml version="1.0"?>
<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
    <title>ThemeName</title>
    <parent>Magento/blank</parent>
</theme>

2. Theme’s details and dependencies can be define in composer.json file but this could be optional as initial phase. use following code in app/design/frontend/<VendorName>/<ThemeName>/composer.json file

{
    "name": "VendorName/ThemeName",
    "description": "Theme description text",
    "require": {
        "php": "~5.5.0|~5.6.0|~7.0.0",
        "magento/theme-frontend-blank": "100.0.*",
        "magento/framework": "100.0.*"
    },
    "type": "magento2-theme",
    "version": "100.0.1",
    "license": [
        "OSL-3.0",
        "AFL-3.0"
    ],
    "autoload": {
        "files": [
            "registration.php"
        ]
    }
}

3. Registration

You may noticed that in composer.json we have registration.php file which needs to create to register theme in Magento

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

Adding Custom Content

Basic structure of theme is already completed and we can activate this theme from admin panel but it will look same like Magento Blank Theme so we can further define theme’s css, images, logo and other content

New logo for theme

Upload logo in app/design/frontend/<VendorName>/<ThemeName>/web/images/logo.svg file or you can define in app/design/frontend/<VendorName>/<ThemeName>/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/new_logo.png</argument>
        <argument name="logo_width" xsi:type="number">250</argument>
        <argument name="logo_height" xsi:type="number">250</argument>
      </arguments>
    </referenceBlock>
  </body>
</page>

Further you can create web/css, web/fonts, web/images folders and files inside to define more code and content to design

Add custom layout using xml file as following

app/design/frontend/<VendorName>/<ThemeName>/Magento_Theme/layout/default_head_blocks.xml

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
  <head>
    <!-- Custom stylesheet -->
    <css src="css/new_theme.css"/>
    <!-- Custom JavaScript -->
    <script src="js/new_theme.js"/>
  </head>
</page>

Activate new theme on storefront

Theme customization depend upon your requirement for new theme. Once completed content and design then we can apply theme from Admin Panel.

All you need to login to Admin Panel

Go to Content -> Configuration -> (select store view and Edit )

Select ThemeName and save configuration

Clear cache from Cache Management or run following commands

php bin/magento cache:flush

Please feel free to say hi@emadtech.com for any issue faced.

Create new custom theme in magento2

Create theme folder structure

Define, registration and composer

Adding Custom Content

Activate new theme on storefront

Leave a Reply Cancel reply