How to Create a New Magento Theme

Introduction

Magento is a widely used e-commerce platform that provides extraordinary capabilities to support store customizability. However, although this package is endowed with plenty of impressive features, there is one drawback; Magento offers only two default themes Blank and Luma. When installing Magento, Luma manifests as the default front-end theme.

If you want to implement a classy theme, it’s not wise to edit the default themes directly as this would affect the performance and maintenance of your store. The best option is to create a new theme that will attract customers and incline them towards coming back.

This tutorial will help you create and install a new custom theme in Magento 2.

Prerequisites

I’m going to assume that you have installed Magento 2. to successfully install the application.

If the above condition is met, you can proceed to with the installation.

Step 1- Creating A Theme Directory

The first step when fashioning a custom theme in Magento 2, is to create the theme directory. Theme directories in Magento 2 are found in app/design/frontend. Go to the Cpanel > File Manager > Public_html >Magento

Open the App folder and locate the Design folder.

Open the Design folder and create a new directory in the front-end folder. Name the directory HostAdvice.

Next, create a theme Directory titled MyTheme in this folder.

That’s it! The theme directory is successfully created.

Step 2 – Declaring The Theme

Once you create the required theme directory, next create a theme.xml file in the directory app/design/frontend/HostAdvice/Mytheme. Copy and paste the code below in the file:

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

Step 3 – Registering The Theme

In the directory app/design/frontend/HostAdvice/Mytheme, create a registration.php file. Copy and paste the code below in the file.

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

Step 4 – Uploading The Preview Image

By now, the theme is registered. Next, upload the preview image. Go to this directory app/design/frontend/HostAdvice/Mytheme/media and upload the preview image in .jpg format.

Step 5 – Declaring The Theme Logo

To declare the theme logo, go to app/design/frontend/HostAdvice/Mytheme/Magento_Theme/layout and create a default.xml file.

Copy the code below and paste it in the default.xml.

Step 6 – Uploading The Theme Logo

Go to app/design/frontend/HostAdvice/Mytheme/web/images and upload your preferred logo image in .png format.

That’s all! We can now upload the new Custom theme.

Step 7 – Applying The Theme

Before configuring the theme, you must upgrade and flush the cache to eliminate any potential problem.

To upgrade your cache run the command below:

# php bin/magento setup:upgrade

Then run the command below to flush the cache:

# php bin/magento cache:flush

Click Edit,

Select MyTheme from the available options and click Save Configuration.

Next, open your SSH terminal and access the root directory of your Magento 2. Run the commands below one by one

# rmr  -rf var/di/* var/generation/* var/cache/* var/log/* var/page_cache/* var/session/* var/view_preprocessed/* pub/static/*

# php bin/magento setup:upgrade
1
# php bin/magento setup:upgrade

# php bin/magento setup:db-schema:upgrade
1
# php bin/magento setup:db-schema:upgrade

# php bin/magento setup:di:compile
1
# php bin/magento setup:di:compile

# php bin/magento setup:static-content:deploy
1
# php bin/magento setup:static-content:deploy

# php bin/magento indexer:reindex
1
# php bin/magento indexer:reindex

# php bin/magento cache:clean
1
# php bin/magento cache:clean

# php bin/magento cache:flush
1
# php bin/magento cache:flush

Once you are done, open the homepage of Magento store. The page should display the new custom theme.

Conclusion

That’s it! You have successfully created a new custom theme and applied it in your Magento store. This will prevent you from editing the default Magento themes thus averting any problem that may be caused by the modification of the core files.