How to create new custom frontend theme in Magento 2 ?

Welcome to Kishan Savaliya's Magento 2 Blog. In this blog post, I will show how you can create new custom frontend theme in Magento 2. I will provide you step by step guidance here in this post. It'll be quite easy to understand. Save my website in your bookmarks. ;-)

We can create new theme for storefront to customize frontend, as Magento don't having final version, it means that contains multiple minor and major bugs and Magento release new versions with updated files and new features, so we can not change any file in vendor directory and it's not a good practice as well. If you're working with live projects then you must know we can not change any vendor files, instead of this we can override core files in any particular module or theme. So to do customization in frontend, we can create new theme in Magento. Magento 2 had provided Blank and Luma themes for storefront pre-installed.

What happen if we will directly update any files in while ? If we directly update any files in core modules then whenever we'll upgrade Magento version all changes gets wiped out. So you must take care this point.

So let's start how to create new storefront theme for magento 2 by extending luma or blank magento 2 themes. You can refer below steps to create new custom frontend theme in Magento 2.

Go to you Magento 2 root directory, and navigate inside app/design directory. Inside app/design directory you can see adminhtml and frontend directories there, so navigate inside frontend directory, because we need to create theme for storefront and follow below steps..

• Create Vendor name directory and inside it Create theme directory.
• Create theme.xml file for theme declaration.
• Create registration.php file to register new theme.
• Create composer.json file.
• Create directories for CSS, JavaScript, images, and fonts.
• Configure your theme in Backend.

Step - 1 : Create Vendor name directory and inside it Create theme directory.

In this step, you need to create one vendor name directory, that can be whatever, so we will create SK name directory inside app/design/frontend/ and inside SK/ directory we need to create one theme directory, we can set whatever name for theme as well, so we will use Storefront, so it'll be

app/design/frontend/SK/Storefront

Step - 2 : Create theme.xml file for theme declaration

Create theme.xml file here in your new theme

app/design/frontend/SK/Storefront/theme.xml

Content for this file is..

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
   <title>SK Storefront</title> <!-- Your Custom theme's name you can define here inside title tags. -->
   <parent>Magento/luma</parent> <!-- You can define parent theme's name here, we're extending luma theme for our new custom theme, so we used luma as a parent theme. -->
   <media>
      <preview_image>media/preview.png</preview_image> <!-- here you can add preview image of your new theme, this is optional, if you don't have any preview image then you can remove media tags completely here. -->
   </media>
</theme>

Here in above file inside <title></title> tag you can degine your custom theme's name. You can define your parent theme's name inside <parent></parent> tags, we're going to extend luma theme for our new theme so I used luma as a parent theme. In <media></media> tag you can set your theme's preview image if you already have it. Otherwise that is optional param, you can remove that tag completely, and if you have preview image then you can create media directory inside your theme directory and you can put your preview image there and you can change your preview image path and file name in above file accordingly.

Step - 3 : Create registration.php file to register new theme.

In this step, create registration.php file inside your theme directory here

app/design/frontend/SK/Storefront/registration.php

Content for this file is..

<?php

use \Magento\Framework\Component\ComponentRegistrar;

ComponentRegistrar::register(ComponentRegistrar::THEME, 'frontend/SK/Storefront', __DIR__);

In above file, I used SK as my vendor name and Storefront is my theme name, you can change that based on your requirements accordingly.

Step - 4 : Create composer.json file.

Create composer.json file inside theme directory here

app/design/frontend/SK/Storefront/composer.json

Content for this file is..

{
    "name": "magento/theme-frontend-sk-storefront",
    "description": "SK Storefront Magento 2 custom theme.",
    "config": {
        "sort-packages": true
    },
    "require": {
        "php": "~7.1.3||~7.2.0",
        "magento/framework": "*",
        "magento/theme-frontend-blank": "*",
        "magento/theme-frontend-luma": "*"
    },
    "type": "magento2-theme",
    "license": [
        "OSL-3.0",
        "AFL-3.0"
    ],
    "autoload": {
        "files": [
            "registration.php"
        ]
    }
}

Here in this file you can define you theme name and theme's description. In require section you can define theme's and module's dependencies. type must be "magento2-theme".

Step - 5 : Create directories for CSS, JavaScript, images, and fonts.

You can create web directory inside your custom theme, and inside web directory you can create CSS, JS, Images and fonts directory inside it. And you can put your custom CSS, JS, Images and Fonts there and you can use it with your theme.

So finally, our directory structure for new theme is..

Now, to activate and register new theme in Magento we need to run following commands, so open you terminal and run below commands.

php bin/magento setup:upgrade
php bin/magento setup:static-content:deploy -f
php bin/magento cache:flush
php bin/magento cache:clean

Step - 6 : Configure new theme in Backend.

Now our new theme is activated, so we can set new theme via Backend.

Go to Content > Design > Themes. There you can see your new theme in list.

Yes, new theme is available there and now we can set this theme for our storefront.

Go to Content > Design > Configurations > Edit your store view > Select your new theme in Applied theme dropdown > Save Configurations

After saving this configuration, you need to clear Magento cache and flush it. You can run below commands in terminal.

php bin/magento cache:clean && php bin/magento cache:flush

That's it. Now your theme is applied successfully. You can use it and you can override vendor files in your new theme. ;-)

Hope you may like this article and can understand this easily. You can add comments below in case if you have any questions regarding this article or if I missed anything here. I will check and get back to you with proper solution.

If you enjoyed this blog post, share it with friends!