In this post, we will learn how to create a basic theme in Magento 2.

First of all, make sure you have a module ready. Click here to see how to create a module in Magento 2.

All themes in Magento 2 goes in:

app/design/frontend/<company_name>/<theme_name>

Let us assume, our company name is Mycompany and our theme name is Basic. We need to create following directory structure for our theme:

<app>
     <code>
          <Mymodule>
              <Test>
                  <etc>
                      module.xml
                  <view>
                      <frontend>
                           <layout>
                           <templates>

— And —

<app>
     <design>
          <frontend>
              <Mycompany>
                  <Basic>
                      <etc>
                      <Magento_Theme>
                           <layout>
                                 default.xml
                      <media>
                           preview.png
                      <web>
                           <css>
                           <fonts>
                           <images>
                           <js>
                  theme.xml

Let us see the purpose of each folder:

Mycompany :-
The name of the company who is designing the theme

Basic :-
The name of the theme. We can have multiple named themes inside the company folder.

etc/view.xml :-
This file is used to specify product image dimensions, thumbnails etc.

Magento_Theme :-
This directory is used to override existing Magento’s theme files.

Magento_Theme/layout/default.xml :-
By default Magento2 assumes that your theme’s logo file should be: /web/media/logo.svg
If you want some other file for logo, then you must declare it in default.xml file.

This file is also used to override default theme’s settings.

media/preview.png :-
The preview of current theme.

web :-
This directory contains all the theme’s static data like images, styles, javascript, fonts etc.

registration.php :-
This file is required to register our theme to Magento2 system.

theme.xml :-
This is a compulsory file that defines our theme name, its parent and optionally theme’s preview image.

Creating theme files

Let us now create our files one by one.

theme.xml ( app/design/frontend/Mycompany/Basic/theme.xml )

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
   <title>Basic</title> <!-- your theme's name -->
   <parent>Magento/blank</parent> <!-- the parent theme -->
   <media>
        <preview_image>media/preview.jpg</preview_image> <!-- theme's preview image -->
   </media>
</theme>

registration.php ( app/design/frontend/Mycompany/Basic/registration.php )

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::THEME,
    'frontend/Mycompany/Basic',
    __DIR__
);

default.xml ( app/design/frontend/Mycompany/Basic/Magento_Theme/layout/default.xml )

<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/my_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>

At this point, our theme is ready. Clear your cache and we will now select our new theme from admin.

Now, login to admin and move to following path:

Content -> Design -> Themes

You should see your theme listed.

Now go to:

Stores -> Configuration -> Design

Choose Main Website in front of Store View at top left. Now click Desgin -> Design Theme

Uncheck Use Default checkbox and pick your theme. Click Save Config, clear your cache and your new theme is ready. Check your home page.

Overriding Theme Templates

Sometimes we need to make modifications to existing templates. Instead of making changes directly to existing template files, we should override them in our own theme.

Let us assume that we want to update the category listing page ( list.phtml ). To do so, create following directory structure:

app/design/frontend/Mycompany/Basic/Magento_Catalog/templates/product

Here I assume that our current theme is Basic. Now copy the list.phtml file into product directory from the following location:

app/vendor/magento/module-catalog/view/frontend/templates/product/list.phtml

Now you can make any modifications you want to your overridden file.

Changing Theme Templates

To customize our Magento 2 stores, we need to do lot of customization.

Now, we will replace existing block templates with our own templates. Here is how to do:

Make sure, you have view/frontend/templates folder ready inside your module directory.

Create a new directory named header (you can give any name) inside view/frontend/templates folder. Next create a new file named top_links.phtml (you can give any name) inside header. Add following code to it:

<a href="home">Home</a> &nbsp;&nbsp;
<a href="contact">Contact Us</a>

Next, open the default.xml file from our theme: app/design/frontend/Mycompany/Basic/Magento_Theme/layout

Add following reference block to it:

<referenceBlock name="top.links">
    <arguments>
        <argument name="template" xsi:type="string">Mymodule_Test::/header/top_links.phtml</argument>
    </arguments>
</referenceBlock>

Now, refresh cache and check your home page. You should see your own template for links is now displayed instead of default one.

Working with existing layouts

Now, we will see how we can modify & remove existing blocks/containers for a page. First, we would like to override the default.xml file provided with Magento.

  1. Create following folders in your current theme:
     Mycompany/Basic/Magento_Theme/layout/
     Mycompany/Basic/Magento_Theme/layout/override
     Mycompany/Basic/Magento_Theme/layout/override/base
  2. Now copy the default.xml file from:
    /vendor/magento/module-theme/view/frontend/layout

    to the folder

    /app/design/frontend/Mycompany/Basic/Magento_Theme/layout/override/base

    You can have a look at blocks and containers defined in this file.

  3. Now, we will modify this layout from out own default.xml file created at the path:
    /app/design/frontend/Mycompany/Basic/Magento_Theme/layout/default.xml
  4. Let us say, we don’t want the top.links section. Under body section of this file, we can write:
    <referenceBlock name="top.links" remove="true"/>
  5. Let us say, we want to modify the whole footer according to our requirement. We can do:
    <referenceBlock name="footer_links" remove="true"/>
    <referenceBlock name="report.bugs" remove="true"/>
    <referenceBlock name="copyright" remove="true"/>
    <referenceContainer name="footer">
        <block class="Mymodule\Test\Block\Footer" name="main-footer" template="footer/main_footer.phtml"/>
    </referenceContainer>

    Create a block class named Footer (how to create blocks in Magento 2) in the file Footer.php inside the folder :

    Mymodule/Test/Block/Footer.php

    Also, create the file main_footer.phtml:

     /app/code/Mymodule/Test/view/frontend/templates/footer/main_footer.phtml