How to Create Custom Theme in Magento2

To initiate learning in Magento 2 Custom theme development the first thing is how to Create Custom Theme in Magento2, As it really helps you to begin any project. You can also read Magento doc from here.

By default Magento comes with 2 default themes: Blank Theme and Luma Theme that you can see after installing magento2.

- - Blank Theme: It acts as a basis for custom theme creation, no restriction to always override Blank themes you can override Luma themes as well.
  - Luma Theme: Luma inherits from Blank theme which contains all the basic functionality and customization required for a theme. Therefore, it’s a child of Blank theme.

Let’s observe how to create custom theme in magento2, Sequentially:
( For Installing Magento2 click here)

Step1: Create Theme Directory

To Create your theme directory you must follow this path:

app/design/frontend/[vendor_name]/[theme_name]

For Example: app/design/frontend/Magento360/theme

Step2: Create Theme Declaration File

To create your theme declaration file which is theme.xml

Create under: app/design/frontend/[vendor_name]/[theme_name]/theme.xml

For Example: app/design/frontend/Magento360/theme/theme.xml

After adding theme.xml in your directory paste this code to your theme.xml and then save

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
<title>Magento360 theme</title> <!-- your theme's name -->
<parent>Magento/blank</parent> <!-- the parent theme, in case your theme inherits from an existing theme -->
<media>
<preview_image>media/preview.jpg</preview_image> <!-- the path to your theme's preview image -->
</media>
</theme>

Proceeding to next step

Step3:Create a Composer Package

For creating composer package to your directory add composer.json file to your directory in the following path:
app/design/frontend/[vendor_name]/[theme_name]/composer.json
For Example: app/design/frontend/Magento360/theme/composer.json

After adding Composer.json file in your directory paste this code to your json file and then save

{
    "name": "magento360/theme",
    "description": "N/A",
    "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"
        ]
    }
}

Step4: Now Register your Custom Theme

For this, create registration.php in your directory in the following path:
app/design/frontend/[vendor_name]/[theme_name]/registration.php

For Example: app/design/frontend/Magento360/theme/registration.php
After creating registration.php file in your directory, paste this code to your file and then save

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

Yeah! that’s it, You just created your own custom theme!

Now you just need to apply it only Lets proceed to that,

Directly bounce to your admin panel and then

Step 6: Apply and Configure Magento 2 Custom Theme in Admin

Go to Content -> Design -> Configuration

After that click on edit

Create Custom Theme in Magento2

Then, you’ll see your applied theme, after that select your theme by clicking on accordion button and then save

Create Custom Theme in Magento2

Atlast just Flush your cache by just writing this command in your SSH:
php bin/magento cache:clean

You can do it by admin panel also, directly jump to
System -> Tools -> Cache Management -> Flush Magento Cache

Now open your Homepage and check you applied your theme successfully.

Create Custom Theme in Magento2

That’s it,

We hope our blog helps you a lot!

How to Create Custom Theme in Magento2