In your journey to become a Magento 2 developer, one of the most important skills you will learn is how to create a Magento 2 theme.

There is a demand for developers who can create custom themes for Magento 2 websites, so this tutorial will demonstrate the steps involved from start to finish.

Tutorial Information

Difficulty: Beginner

Time Required: 20 Minutes

Before We Begin

Prior to beginning this tutorial, you should have a fresh Magento 2 installation with FTP access. See our Magento 2 Installation Tutorial for help getting setup and check out FileZilla for an FTP Client.

How to create a Magento 2 theme – Lets Get Started

Firstly, we should disable the Magento Cache to prevent the system from showing old versions of the website and to ensure changes we make are promptly displayed.

Login to your Magento Administrator control panel and navigate to System -> Cache.

Disable all Cache types and then save your changes.

Magento 2 Theme Directory Structure

Secondly, use your FTP client to show your Magento 2 root folder and go to root-folder/app/design.

Create a folder inside here with your vendor name – we will use devblg.

Inside your vendor folder create a theme folder, which is where all the files for your theme will go. Our theme name is going to be demotheme.

Our folder structure now looks like this: root-folder/app/design/devblg/demotheme, however, we are not finished with our directory structure yet.

We will now create the following directories and files inside our theme folder:

-devblg/demotheme
--etc/
---view.xml
--web/
---(All your CSS, IMG and JS folders and contents here)
--composer.json
--registration.php
--theme.xml

It is time to declare our Magento 2 theme with an XML file, which we create in root-folder/app/design/devblg/demotheme/theme.xml

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
     <title>DevBlg Demo Theme</title> <!-- Name to be shown in admin panel -->
     <parent>Magento/blank</parent> <!-- Use Magento Blank as your themes parent -->
 </theme>

Secondly, we must register our new Magento 2 theme in a PHP file which we will create in root-folder/app/design/devblg/demotheme/registration.php

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

Finally, declare your theme as a Composer package by creating root-folder/app/design/devblg/demotheme/composer.json

{
    "name": "devblg/demotheme",
    "description": "A demonstration theme created by DevBlg",
    "require": {
        "php": "~5.5.0|~5.6.0|~7.0.0",
        "magento/theme-frontend-blank": "100.0.*",
        "magento/framework": "100.0.*"
    },
    "type": "magento2-theme",
    "version": "100.0.1",
    "license": [
        "OSL-3.0",
        "AFL-3.0"
    ],
    "autoload": {
        "files": [
            "registration.php"
        ]
    }
}

How to enable a theme in Magento 2

Having created our theme, we must now enable it in the Magento 2 control panel.

Go to Content -> Design -> Configuration and edit the Main Store view. Here you will find a drop down box with your newly created Magento 2 theme.

How to upload a logo to a Magento 2 Theme

The next step is to upload a logo to our Magento 2 theme. In the Main Store view editor, where we just selected our theme from the drop down, expand the Header tab.

Click the upload button next to the logo heading and select your logo file.

Press save to finalise your changes, and then load your website to see them in action.

How to add a style sheet to a Magento 2 Theme

We can now begin to customise our Magento 2 theme, which, currently extends the Magento 2 blank theme.

Our goal is to tell Magento to use our style.css file, however, we would like to take advantage of some of the component styles that come with the Magento blank theme which we have extended.

Take a copy the Magento Blank style sheet located in root-folder/var/view_preprocessed/source/frontend/Magento/blank/en_GB/css/styles-m.css  and copy it to the bottom of your style.css file which you uploaded to your new theme folder.

Note: if you installed Magento 2 with the US store local, replace en_GB with en_US.

To tell Magento 2 to load our website style sheets, create the following directories and files:

root-folder/app/design/frontend/newworlddigitalmedia/mtselectrical/Magento_Theme/layout/default_head_blocks.xml

This file is responsible for managing the <head> tag content and is where we need to include our CSS files.

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <remove src="css/styles-m.css" />
        <css src="css/style.css" />
        <css src="css/foundation.css" />
        <css src="css/swipebox.css" />
        <css src="css/burgers.css" />
        <css src="css/vegas.css" />
        <css src="css/slick-theme.css" />
        <css src="css/slick.css" />
        <css src="css/ionicons.min.css" />
    </head>
</page>

Conclusion

Congratulation, you have learnt how to create a Magento 2 theme and performed some basic customisation tasks, however this is just the beginning. Have a look at our Magento tutorials for the next stage of creating a Magento 2 theme.