Daily Archives: 28 July 2020

A Beginners guide: Creating your first Magento 2 Theme

Hi,

Following on from my last article entitled “creating your First Magento 2 Module” in the series of guides, in this guide I’m going show you the basics for creating a new theme in Magento 2. The theme as per the previous post won’t “do” much other than to demonstrate the basics of what is required for a new theme.

First up – we’re not going to create a new theme, we’re going “extend” one of Magento’s out-of-the-box themes. This is the more normal and fastest approach. Magento ships with two themes out-of-the-box; Blank and Luma.

If you have never had any dealings with Magento previously and are just learning, then I’d highly recommend installing Magento with its sample data and using the “Luma” theme to learn with.

So, without delaying any further, let’s get started creating our new theme.

Directory Structures

On the command line login and navigate to your Magento Application root directory. When in there create the following directories:

  • app/design/frontend/Johnadavies
  • app/design/frontend/Johnadavies/Demo

Replace “Johnadavies” with your company name and replace “Demo” with whatever you’d like your package to be called.

Standing on the shoulders of Giants

We’re going to start by basing our “new” theme off the “Luma” theme. In reality, for anything more than basic we’re probably more likely to base it off the “blank” theme.

In your newly created theme package directory we need to tell Magento a little more about our theme. So we need to create a file called app/design/frontend/Johnadavies/Demo/theme.xml and inside the file we place the following code:

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
    <title>Johns Demo Theme</title> <!-- your theme's name -->
    <parent>Magento/luma</parent> <!-- this tells Magento the parent theme to base it off -->
</theme>

If you want to do things properly you can also add an extra line underneath the parent tag to show a nice little preview image in the admin area.

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
    <title>Johns Demo Theme</title> <!-- your theme's name -->
    <parent>Magento/luma</parent> <!-- this tells Magento the parent theme to base it off -->
<media>
      <preview_image>media/preview.jpg</preview_image> <!-- the path to your theme's preview image -->
   </media>
</theme>

Registering our Theme

As per my blog on creating a custom module, we need to again “register” our new code with Magento, we do this by creating a new file called app/design/frontend/Johnadavies/Demo/registration.php and adding the following code.

<?php
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

use \Magento\Framework\Component\ComponentRegistrar;

ComponentRegistrar::register(ComponentRegistrar::THEME, 'frontend/Johnadavies/Demo', __DIR__);

This just tells Magento how we’re going to refer to it.

Once this is completed, you should be able to navigate to “Content” > “Design configuration” in the admin area:

From here in the “action” column you change the “Applied Theme” to your new theme and hit save.

Congratulations – you now have a new theme.

Please check the next article in the series on what to do next. How to apply CSS updates and Template changes.