How to create Custom Magento2 theme?

In this blog We will discuss how to create custom theme in Magento2 ?

Step 01 : Create Directory Structure in Magento 2 Theme Development

Magento 2 themes are located in the /app/design/frontend folder. First, It’s necessary to create a Vendor folder and then create a theme folder inside of it.

For example: /app/design/frontend/V4U/sampletheme.

V4U is a vendor, sampletheme is a theme folder.

Step 2: Declare Your Magento 2 Theme

Now you need to create the theme.xml file under app/design/frontend/V4U/sampletheme/theme.xml and use the code below:

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

<title>V4U Sample Theme</title>

<parent>Magento/luma</parent>

<media>

<preview_image>media/preview.jpeg</preview_image>

</media>

</theme>

In the <title> tag insert theme name, in the tag you have to define the parent theme name here I have added Magento/luma as a parent theme. <preview_image> tag is the tumbnail image to show the theme page for preview purpose.

The thumbnail image is located in app/design/frontend/V4U/sampletheme/media/preview.jpeg

Step 3 : Magento theme registration

To register your theme in the Magento system, you need to create a registration.php file in your theme directory: app/design/frontend/V4U/sampletheme/registration.php

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

<?php

\Magento\Framework\Component\ComponentRegistrar::register(

\Magento\Framework\Component\ComponentRegistrar::THEME,

'frontend/V4U/sampletheme',

__DIR__

);

Step 4 : Add Magento 2 Theme a Composer Package

To add composer package, you need to create a composer.json file in your theme directory: app/design/frontend/V4U/sampletheme/composer.json

{
    "name": "magento/sample-module-theme",
    "description": "N/A",
    "require": {
        "php": "~5.6|~7.0|~7.1|~7.2|~7.3|~7.4",
        "magento/theme-frontend-luma": "~100.0",
        "magento/framework": "~100.0"
    },
    "type": "magento2-theme",
    "version": "1.0.0",
    "license": [
        "OSL-3.0",
        "AFL-3.0"
    ],
    "autoload": {
        "files": [ "registration.php" ]
    }
}

{

"name": "magento/sample-module-theme",

"description": "N/A",

"require": {

"php": "~5.6|~7.0|~7.1|~7.2|~7.3|~7.4",

"magento/theme-frontend-luma": "~100.0",

"magento/framework": "~100.0"

"type": "magento2-theme",

"version": "1.0.0",

"license": [

"OSL-3.0",

"AFL-3.0"

"autoload": {

"files": [ "registration.php" ]

}

Step 5 : Declaration of Theme Logo & Add Custom CSS

To declare a theme logo, create Magento_Theme/layout directories and add the following code to a default.xml file. The default.xml file path is /app/design/frontend/V4U/sampletheme/Magento_Theme/layout/default.xml.

<?xml version="1.0"?>
<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/custom.css"/>
		<!-- <link src="js/custom.js"/> -->
	</head>
<body>
	<referenceBlock name="logo">
		<arguments>
			<argument name="logo_file" xsi:type="string">images/vp.png</argument>
		</arguments>
	</referenceBlock>
	<remove name="report.bugs"/>
</body>
</page>

<?xml version="1.0"?>

<head>

</head>

<body>

<argument name="logo_file" xsi:type="string">images/vp.png</argument>

</arguments>

</referenceBlock>

</body>

</page>

Step 6 : Add CSS file

To add custom css, create web/css directories. The custom.css file path is /app/design/frontend/V4U/sampletheme/web/css/custom.css

@media screen and (min-width: 768px){
	.logo img{
		width: 100px;
		height: 100px;
		object-fit: contain;
	}
}

@media screen and (min-width: 768px){

.logo img{

width: 100px;

height: 100px;

object-fit: contain;

}

Step 7 : Add Logo Image

To upload logo, create web/images directories. The logo image path is /app/design/frontend/V4U/sampletheme/web/images/vp.png

Now run the following commands :

php bin/magento setup:upgrade

php bin/magento setup:static-content:deploy -f

php bin/magento cache:clean

Now You can set New Theme from Admin Panel Content->Design->Configuration->Edit->Default Theme->Applied Theme->Select Your New Theme->Save Configuration.

Download from GitHub

DevDocs

Home

Happy Coding. Keep Liking & Sharing