Categories: Magento 2 Tutorials

How to Create a Custom Theme in Magento 2

A theme is perhaps the most important component of any online store. If the theme of your store is not up to the mark and fails to attract visitors, there’s a fairly high chance that your customers won’t incline towards coming back. Magento is one of the most popular and widely-used ecommerce platforms people base their online stores on. I’m going to assume that you have already installed Magento 2, considering you want to put a classy theme to it. In case you haven’t, you can download it from here, and to learn how to install it, you can check the following guides: Install Magento 2 using Composer Install Magento 2 on localhost You get two themes by default when you install Magento 2: Luma and Blank. But if you want something more personal, you have to create a custom theme. Hence, today I’m going to show you how to create a custom theme in Magento 2. Let’s get right to it!

Create Directories

Go the root directory of your Magento 2 and navigate to app/design/frontend. Now create new directories in it as shown below: Magenticians: Vendor name of your theme. Mytheme: The name of your theme Magento_Theme / layout: For declaring a logo for the theme. media: The preview image for the theme will be placed here. web: Contains CSS, images, js folders.

Declaration of Theme

Create theme.xml file in app/design/frontend/Magenticians/Mytheme, and paste the following code in it:
<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
<title>Mytheme</title>
<parent>Magento/blank</parent>
<media>
<preview_image>media/preview.jpg</preview_image>
</media>
</theme>

Registration of Theme

Now create registration.php file in app/design/frontend/Magenticians/Mytheme and paste the following code in it
<?php
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::THEME, 'frontend/Magenticians/Mytheme', __DIR__
);

Upload Theme Preview Image

Go to app/design/frontend/Magenticians/Mytheme/media and upload your preview image (preview.jpg) here.

Declaration of Theme Logo

Go to app/design/frontend/Magenticians/Mytheme/Magento_Theme/layout and create a default.xml file. Paste the following code in it:
<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/mytheme-logo.png</argument>
<argument name="logo_img_width" xsi:type="number">200</argument>
<argument name="logo_img_height" xsi:type="number">200</argument>
</arguments>
</referenceBlock>
</body>
</page>

Upload Theme Logo

Go to app/design/frontend/Magenticians/Mytheme/web/images and upload your logo (mytheme-logo.png) here.

Apply Your Theme

Open the Admin panel of your Magento 2 and go to Content → Configuration. Now click on Edit as shown: Select Mytheme from the Applied Theme drop down menu and click on Save Configuration.

Run Commands

Open the SSH terminal and go to the root directory of your Magento 2. Now run all these commands one by one:
rm -rf var/di/* var/generation/* var/cache/* var/log/* var/page_cache/* var/session/* var/view_preprocessed/* pub/static/*
php bin/magento setup:upgrade
php bin/magento setup:db-schema:upgrade
php bin/magento setup:di:compile
php bin/magento setup:static-content:deploy
php bin/magento indexer:reindex
php bin/magento cache:clean
php bin/magento cache:flush
And you’re all done! Open the homepage of your store and you’ll see that your custom theme has been applied successfully.

Final Words

You can edit a theme to your heart’s content to make it look more attractive. However, editing the core files is not the right approach. Hence, a custom theme is required for this purpose. After following this tutorial, you should be able to create a custom theme in Magento 2. If you want to discuss anything related to this tutorial, just use the comment section below and let’s get chatting!
Syed Muneeb Ul Hasan

Syed Muneeb Ul Hasan is an expert in PHP and Magento, he prefers to educate users in implementing and learning Magento. When not working, he loves to watch cricket.

View Comments

  • Hi Syed Muneeb Ul Hasan,

    I have created a new theme. but my theme console showing the "
    TypeError: require.config is not a function" after activate the new custom theme .
    Please advice me how can i solve it , I have tried removed static content , cache clear etc.

    Thanks,

    • The file which is giving you the error in console, you have to include it manually in your custom theme.

      • i have included the file manually, but i got autoload error.
        We can't read some files that are required to run the Magento application. This usually means file permissions are set incorrectly.

  • For what Magento Version exactly is this tutorial? I follow the steps exactly how you described but looks like the theme isn't showing up in the dashboard configuration of Magento 2.2.1. Am I missing something?

  • I have followed the steps, my logo and css is not including in my theme. Content are appearing as of default theme but without logo and css.

  • thanks for providing article for custom magento 2 theme. i read properly and it was a great things with detail steps.

Share
Published by
Syed Muneeb Ul Hasan

Recent Posts

Building Employee Trust and Dedication – A Complete Guide

In the highly competitive modern workplace, trust, and employee loyalty are crucial factors for long-term… Read More

3 months ago

12 Winning Strategies for Small Businesses Marketing

In the ever-evolving world of small business developing and implementing effective marketing strategies is critical to… Read More

3 months ago

Top 10 App Development Companies in Dubai 2024

With one of the highest internet penetration rates, the UAE has set out to revolutionize… Read More

3 months ago

Transforming Industries: How Amazons GPT44X is Revolutionizing AI Technology

Artificial Intelligence (AI) has been continually evolving, leading to remarkable advancements in various industries. Among… Read More

8 months ago

Top Magento 2 Extensions for 2023

Extensions, extensions and lots of extensions. We all love extensions, don’t we? After all, extensions… Read More

11 months ago

Unleashing the Power of Software Testing: Cooperating with a Testing Firm

Software quality is crucial to a firm's success across industries in the quickly changing digital… Read More

11 months ago