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.