3 Easy Steps to Create Your Very First Magento 2 Theme

You have just decided: you are going to create a Magento 2 theme. Great! That’s why today we write this entire article to help you achieve your mission!

The first thing to bear in mind: do NOT directly edit default themes. This is the mistake that most beginners make, as this makes future upgrading and doing maintenance impossible.

There are 3 steps to create Magento 2 theme:

1. Create a new theme directory
2. Declare the new theme
3. Apply and configure theme in admin

In this article, we will walk through all 3 steps. Make sure not to skip any step, as each one is important itself.

1. Create a new theme directory

Magento 2 theme directory is located in app/design/frontend.

You need to create the directory named <vendor>/<theme_name> inside this directory. You can do so using file transferring software such as FileZilla.

For example, we create app/design/frontend/Bss/default.

 

2. Declare the new theme

After creating the theme directory, you have to create files to declare the new theme: theme.xml, composer.json, registration.php, static files, logo folder.

Create theme.xml

The theme.xml should be created in the directory:

<your Magento install dir>app/design/frontend/<your_vendor>/<your_theme/theme.xml


This file’s content has to contain:

• Title tag. This is displayed in the Magento admin as the name of the theme. This can be viewed in Admin > Content > Design > Configuration > Default Store View.
  For example, in our theme.xml file, we write:

  <title>Bss default</title>

  

• Parent tag. For starter, insert “Magento/blank” into <parent></parent>. This makes Blank the parent theme of the theme we are creating. This means that if the server cannot find any files inside our theme folder (child theme), it will automatically find that file in its parent theme, Blank.
  For example, we write:
• Image preview tag. Inside <preview_image></preview_image>, write the directory of the desired preview image for the theme. This can be accessed in Content > Design > Themes > <theme_name>
  For starter, put the screenshot image in media directory inside the theme folder:

  /app/design/frontend/<your_vendor_name>/<your_theme_name>/media/screenshot_theme.png

This is all we write in the example theme.xml file:

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
   <title>Bss default</title>
   <parent>Magento/blank</parent> 
   <media>
      <preview_image>media/preview.jpg</preview_image>
   </media>
</theme>

Create new Composer.json

In Magento 2, each theme is used as a composite package, even the default themes. Actually, we suggest the starters copy the default themes’ Composer.json in:

vendor/magento/theme-frontend-blank/composer.json

And paste into our new theme folder.

Create new registration.php

To register a theme in the Magento system you need to create the registration.php file. Make sure that you include your new theme’s directory, for example, ‘frontend/<Your_Vendor>/<Your_theme>’,

For a shortcut, write this:

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

Create static files directories

Create folder “web” in the following path:

app/design/fronend/<your_vendor_name>/<your_theme_name>/web

You can then add fonts, CSS, image, js in your theme in this folder. Note that you should create different folders inside this directories. For example, here is our web folder:

Create logo folder

Firstly, create a folder named Magento_theme/layout in your theme folder.

<your Magento install dir>app/design/fronend/<your_vendor_name>/<your_theme_name>/Magento_Theme/layout

Secondly, create a file named default.xml with the content:

<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/logo.png</argument>
                <argument name="logo_img_width" xsi:type="number">300</argument>
                <argument name="logo_img_height" xsi:type="number">300</argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

Notice that images/logo.png from the example above should be replaced by the logo file directory. Both the 300 should be replaced by the width and height of the logo (our example logo’s size is 300×300).

3. Apply and configure theme in admin

To apply the theme, you have to:

1. Upgrade and flush cache
2. Apply the theme in Magento admin
3. Deploy

1. Upgrade

Run the following commands to upgrade and flush cache:

php bin/magento setup:upgrade

php bin/magento cache:flush (notice that if you are running Magento from 2.2.x, add -f to flush cache command: php bin/magento cache:flush -f

2. Apply the theme in Magento admin

Go to Content > Design > Themes (from Magento 2.1) or Stores > Configuration > Design

The created theme will be displayed here. If it is not, check your previous steps for errors.

To view more information, click the theme name.

Then apply the theme by:

• From Magento 2.1: Content> Configuration > Edit theme > Default Theme > Select your theme.
• Magento 2.0: Stores > Configuration > Design Tab > Design Theme.

3. Deploy

Run the following command to deploy the theme to all your stores:

php bin/magento setup:static-content:deploy

Magento 2 create theme: In conclusion,

So there you go, the guide to create Magento 2 theme. By now we hope that you have known the steps to do the work, and have a new theme running on your website. If the parent theme is Blank, your website now should display Blank theme now.

So do you have any question regarding creating Magento 2 theme? Let us know in the question below!