Magento

How to Create a Custom Theme in Magento 2

Written by Jayesh Makwana

Jul 09

How to Create a Custom Theme in Magento 2

In this article, we will create a custom theme in Magento 2. We cover a few things like Magento theme declaration, registration, applying it in the admin panel, creating directories for CSS, JavaScript, images, and fonts, etc.

Please follow the below steps to know how to create a custom theme in Magento 2.

Step 1: Magento theme directory

  • 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/Dolphin/custom_theme.

Step 2: Magento theme declaration

  • In order to define Magento themes, in the theme root folder you should create a theme .xml file at app/design/frontend/Dolphin/custom_theme/ and paste the below code :
<!--
/**
 * Created By: Dolphin Web Solution Pvt. Ltd.
 */
-->
<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
    <title>Dolphin 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.png</preview_image> <!-- the path to your theme's preview image -->
    </media>

Note: Make sure you added preview.png file at app/design/frontend/Dolphin/custom_theme/media/ directory location.

Step 3: Magento theme registration

In order to register a theme in the system, in the theme folder you should create a registration.php file at app/design/frontend/Dolphin/custom_theme/ and paste the below code :

<?php
/**
 * Created By : Dolphin Web Solution Pvt. Ltd.
 */
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::THEME,
    'frontend/Dolphin/custom_theme',
    __DIR__
);

Step 4: Apply the custom style for your custom theme

You can create a _extend.less file at app/design/frontend/Dolphin/custom_theme/web/css/source/ like as below code:

& when (@media-common = true) {
    p {
    	font-size: 16px;
    }
}

Your theme directory structure will look like below.

app/design/frontend/<Vendor>/
├── <theme>/
│   ├── etc/
│   │   ├── view.xml
│   ├── web/
│   │   ├─css/
│   │   │   ├─source/
│   │   │       ├─_extend.less
│   │   │
│   │   ├─Fonts/
│   │   │   ├─font.ttf
│   │   │
│   │   ├─images/
│   │   │    ├── logo.svg
│   ├── registration.php
│   ├── theme.xml

Step 5: Now, Just run below Magento commands

php bin/magento s:up

php bin/magento s:s:d -f

php bin/magento c:c

Step 6: Applying theme in the admin panel

Now, check your theme is added to the theme list or not.

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

themelist

To apply your custom theme :

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

themeconfig

That’s it!

I hope this technical blog will help you to find what you were looking for.

For more related to this blog is here:

  1. use System Configuration and Helpers in Magento 2
  2. Add custom variant checkout in Magento 2

That’s all, If you have any further questions about Magento 2 theme development or if need any help from our Magento 2 expert, contact us now for a free consultation.

Bookmark it for your future reference. Do comment below if you have any other questions.

P.S. Do share this note with your team.

Written by Jayesh Makwana

Magento Store

Our Magento Store

Do not miss a chance to grab exciting offers on Magento Development at Dolphin Web Solution. We are providing discounts on various Magento services this season. Go and grab yours today at our Magento Store.

Multiple Wishlist for Magento 2

Multiple Wishlist for Magento 2

₹ 3106

Wallet and Reward Points for Magento 2

Wallet and Reward Points for Magento 2

₹ 9476

RMA for Magento 2

RMA for Magento 2

₹ 11865

₹ 14254
Abandoned Cart Email for Magento 2

Abandoned Cart Email for Magento 2

₹ 6291

Simple Details on Configurable Product for Magento 2

Simple Details on Configurable Product for Magento 2

₹ 7883

₹ 9476
Frequently Bought Together for Magento 2

Frequently Bought Together for Magento 2

₹ 5494

₹ 7087

Let's Start Your Project

Get free consultation for your digital product idea to turn it into reality!

TO TOP