Magento, Magento 2

How to Create Custom Theme in Magento 2

How to Create Custom Theme in Magento 2

In this tutorial, Today I will explain to how to create custom theme in Magento 2. Here, steps by step you need to follow Magento 2 theme declaration, registration, how to apply theme in admin etc. By default, Magento 2 provides 2 themes – Luma & Blank.

Let’s follow the below steps :

You may also like this :

1) First of all, Create registration.php file at app/design/frontend/RH/Custom/ and paste the below code to register theme :


<?php
/**
 * Created By : Rohan Hapani
 */

use \Magento\Framework\Component\ComponentRegistrar;

ComponentRegistrar::register(ComponentRegistrar::THEME, 'frontend/RH/Custom', __DIR__);

2) After that, To define custom theme Create theme.xml file at app/design/frontend/RH/Custom/ and paste the below code :


<!--
/**
 * Created By : Rohan Hapani
 */
-->
<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
    <title>RH Custom</title>
    <parent>Magento/blank</parent>
    <media>
        <preview_image>media/preview.png</preview_image>
    </media>
</theme>

Make sure you added preview.png file at app/design/frontend/RH/Custom/media/ directory location.

3) In Last, It’s not neccessary file. But, you can create a composer.json file at app/design/frontend/RH/Custom/ for theme dependency information and paste the below code :


{
    "name": "rh/custom",
    "description": "N/A",
    "config": {
        "sort-packages": true
    },
    "require": {
        "php": "~5.5.0|~5.6.0|~7.0.0|~7.1.0|~7.2.0|~7.3.0",
        "magento/theme-frontend-blank": "*",
        "magento/framework": "*"
    },
    "type": "magento2-theme",
    "license": [
        "OSL-3.0",
        "AFL-3.0"
    ],
    "autoload": {
        "files": [
            "registration.php"
        ]
    }
}

Now, Just upgrade & deploy your instance :


php bin/magento s:up
php bin/magento s:s:d -f
php bin/magento c:c

Now, check your theme added in theme list or not.

  • Go to Admin -> Content -> Design -> Themes

To apply your custom theme :

  • Go to Admin -> Content -> Design -> Configuration

Now, Edit record and open Applied Theme dropdown and select your theme and then, save configuration.

That’s it !!!

I hope this blog is easy to understand about how to create custom theme in Magento 2. In case, I missed anything or need to add some information, always feel free to leave a comment in this blog, I’ll get back with proper solution.

Keep liking and sharing !!

Tagged ,