How To Create Custom Theme in Magento 2 (Part -1)

by Fayyaz Khattak  April 11, 2016

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

Create Custom Theme Magento 2

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.

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

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

Let’s start.

Requirements for Theme Development

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

  • You have 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 few clicks and start creating your store from scratch.

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:

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:

  • Add registration.php to register your Magento 2 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:

Directory Structure in Magento 2

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 theme in Magento 2 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 theme which you’ve configured and created by yourself. In this first part of this series, I have covered the basics of theme development. In the next part Finalize Custom Theme In Magento 2, 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. If you have any issues in this tutorial, then please feel free to let me know via the comments section below.

Start Creating Web Apps on Managed Cloud Servers Now!

Easy Web App Deployment for Agencies, Developers and E-Commerce Industry

About 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

Stay Connected:

You Might Also Like...

  • Wajid Khan

    very nice and smple

  • Nitish

    I can see my theme in content>themes. but as I’m going to stores->configuration->design, I m not able to see the theme design section. There is only one section i.e. Search engine Robots… could you please help me to find out the theme design section.

    Thanks!

    • avinash gaud

      It has been moved to Content > Configuration. Click Edit on your Store under the Action column you’ll be able to set the theme.

      • Nitish

        Thanks, I got it. but could you please tell me that how can I include my custom css into my custom theme?

  • Aamir Khakhu

    I have changed my default theme to a custom theme, but I can see that only my home page is updated with the new custom theme, the other pages are not reflected. What am I missing here?

  • Kupenthiran T

    nice blog. Please send me create-custom-theme-magento-2-part-2 link

  • Susanta Kumar Das