Chat with us, powered by LiveChat

This website uses cookies

Our website, platform and/or any sub domains use cookies to understand how you use our services, and to improve both your experience and our marketing relevance.

A Guide To Magento 2 Theme Development (Part 1)

July 23, 2018

5 Min Read
Guide To Magento 2 Theme Development
Reading Time: 5 minutes

The theme is a component of Magento 2 which gives a consistent look and feel to your whole store. It provides an improved look to areas like Magento 2 Admin and Storefront by utilizing a combination of custom templates, designs, styles or images development.

Don’t know How to Choose the Best Magento Theme for Business? Here is How!

By default, there are 2 Magento themes – Luma and Blank – that you can see after installing Magento 2 successfully. Luma is a demonstration theme, and Blank is a basis for custom theme creation.

In Magento 2, there are no restrictions on using the Luma theme for your live store. However, if you want to customize the default design or if you need to create your own theme, Magento strongly recommends not to change or edit the default Luma and Blank theme files. Many people ask why Magento does not allow to change or edit Luma and Blank theme files? The answer is: when you change or edit the default files, your changes can be overwritten by the latest version of the default files during your Magento 2 upgrades.

Bonus Tip: Did you know? You can improve your website speed by 200% with an optimized Magento web hosting

This Magento 2 theme development series is for beginners, and I am going to cover the basic of frontend Magento 2 custom theme development. If you are an advanced Magento developer, this may not be of much help to you.

  1. Requirements for Magento 2 Theme Development
  2. Create Theme Directory
  3. Declare your Magento 2 theme
  4. Directory Structure in Magento 2 Theme Development
  5. Apply and Configure theme in Magento 2 Admin

Let’s start.

Make Unlimited Customizations to Your Ecommerce Store

Deploy Your Magento Store in Minutes and Add as many Customizations to it as you want.

Requirements for Theme Development

Before developing your own theme for Magento 2, make sure these requirements are fulfilled:

  • You have a little bit of Magento coding experience
  • You have some knowledge of Magento 2
  • Magento 2 is installed on your local host and running smoothly, and you have access to the frontend & backend.
    • If you don’t yet have Magento 2 running, then you can easily have it thanks to Cloudways Managed Magento Hosting. Launch your Magento 2 store in a matter of a few clicks and start creating your store from scratch.

Create Mobile Friendly Websites

Create Theme Directory

To create a directory for your Magento 2 theme, you need to go: <your Magento 2 root directory>/app/design/frontend. Under frontend directory, create a new directory according to your theme vendor name: /app/design/frontend/Cloudways (I choose Cloudways for my theme vendor name) under your theme vendor directory, create a directory for your Magento 2 theme: /app/design/frontend/Cloudways/m2-theme.

After creating this structure, you need to declare your Magento 2 theme so that Magento system knows it exists and you can set your theme as a current theme in your Magento 2 backend.

Declare your Magento 2 theme

Now you need to create the theme.xml file under app/design/frontend/Cloudways/m2-theme/theme.xml and use the code below:

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

In <title> tag insert the name of your theme, and in the <parent> tag you can specify parent theme for fallback purposes. I am using the Luma theme.

In the <preview_image> tag I declare a theme image. This is a thumbnail image which shows in the Magento 2 admin on our theme page so we can see a preview of what our theme looks like. Thumbnail image is located in app/design/frontend/Cloudways/m2-theme/media/m2-theme-image.jpg. Make sure you have this thumbnail in the correct location. If you don’t have this file in the correct location, you will get an error when you visit your theme page in Magento 2 admin.

Make Your Magento 2 Theme a Composer package

Add a composer.json file in your theme directory: app/design/frontend/Cloudways/m2-theme/composer.json to register the package on a packaging server. This file is provided in the theme dependency information. Magento default public packaging server is https://packagist.org/. Use this following code:

{
    "name": "Cloudways/m2-theme",
    "description": "N/A",
    "require": {
        "php": "~5.5.0|~5.6.0|~7.0.0",
        "Cloudways/m2-theme": "100.0.*",
        "magento/framework": "100.0.*"
    },
    "type": "magento2-theme",
    "version": "100.0.1",
    "license": [
        "OSL-3.0",
        "AFL-3.0"
    ],
    "autoload": {
        "files": [
            "registration.php"
        ]
    }
}

Add registration.php to register your Magento 2 Custom theme

To register your theme in the Magento system, you need to create registration.php file in your theme directory: app/design/frontend/Cloudways/m2-theme/registration.php and use the following code in your 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/Cloudways/m2-theme',
    __DIR__
);

Directory Structure in Magento 2 Theme Development

After complete theme declaration and registration, you need to create the directory structure for your theme layout, styles and template files. Below, you can see how your theme directory should look like. I am using my own Vendor and directory name.

/app/design/frontend/Cloudways/m2-theme/theme.xml

/app/design/frontend/Cloudways/m2-theme/registration.php

/app/design/frontend/Cloudways/m2-theme/composer.json

/app/design/frontend/Cloudways/m2-theme/media

/app/design/frontend/Cloudways/m2-theme/media/m2-theme-image.jpg

/app/design/frontend/Cloudways/m2-theme/web

/app/design/frontend/Cloudways/m2-theme/web/css

/app/design/frontend/Cloudways/m2-theme/web/css/source

/app/design/frontend/Cloudways/m2-theme/web/css/fonts

/app/design/frontend/Cloudways/m2-theme/web/css/images

/app/design/frontend/Cloudways/m2-theme/web/css/js

/app/design/frontend/Cloudways/m2-theme/etc

/app/design/frontend/Cloudways/m2-theme/etc/view.xml

/app/design/frontend/Cloudways/m2-theme/Magento_Theme

/app/design/frontend/Cloudways/m2-theme/Magento_Theme/layout

/app/design/frontend/Cloudways/m2-theme/Magento_Theme/layout/default.xml

The web folder will be created where our theme’s CSS, js, fonts and images is located. If Magento 2 doesn’t have a skin folder, these files go in here.

We have created view.xml file under the etc directory, with the view.xml file. We configure the Magento 2 Catalog images size and other things.

Apply and Configure Magento 2 Custom Theme in Admin

After adding your theme to the file system, everything is ready for you to activate your theme and apply it to your store. Go to Magento 2 backend, then go to Content > Design > Themes. And make your sure your theme appears on this list.

Magento Theme Setting

When you can see your theme in this list, go to Stores > Configuration > Design, select your newly created theme from those shown in the image below.

Magento Design Configuration

  • After you select your theme, click on the “Save Config” button.
  • Clear the cache.

Note: This is the first of this Magento 2 theme development series. I hope now you have a working Magento 2 custom theme which you’ve configured and created by yourself. In this first part of this series, I have covered the basics of Magento 2 theme development. In the next part Finalize Magento 2 Custom Theme Development, I am going to include the following:

  • Configuring images
  • Declaring logo
  • Configuring image properties
  • Styling and Editing & Overriding templates
  • Locate layouts, templates, and styles

Keep looking out for this space for my upcoming posts in the series of Magento 2 theme development. If you have any issues in this tutorial, then please feel free to let me know via the comments section below.

Share your opinion in the comment section. COMMENT NOW

Share This Article

Boost Your Magento Store Performance by 5x Times & Maximize Your Sales

Our fastest Magento hosting can help you in growing your business revenue by 500%

Fayyaz Khattak

Fayyaz is a Magento Community Manager at Cloudways - A Managed Magento Hosting Platform. His objective is to learn & share about PHP & Magento Development in Community. Fayyaz is a food lover and enjoys driving. You can email him at m.fayyaz@cloudways.com

Get Our Newsletter
Be the first to get the latest updates and tutorials.

Do you like what you read?

Get the Latest Updates

Share Your Feedback

Please insert Content

Thank you for your feedback!