MAGENTO

Create a custom theme in Magento 2.1

In this tutorial I am going to demonstrate how to create a custom theme in Magento 2.1 v. In magento v2 the procedure to create a custom theme is quite different from that of v 2.1. Here defaults magento theme lies under vendor package.

Create a custom theme in Magento 2.1 tutorial

Before creating a custom theme you should make sure that magento 2.1v is installed properly with following configurations –

  1. All required php extensions are installed
  2. Development mode is set to enabled
  3. You should at least know how to create a basic custom module in magento 2.1v. If you still need assistance in creating a custom module in Magento v2.1 here is the link Create custom module in Magento 2.1.

1. Folder structure

The folder structure in Magento 2.1 custom theme is very simple and sorted.

Create a custom theme in Magento 2.1

Create a custom theme in Magento 2.1

  1. Excellence is the package name you are working under.
  2. kishor1.0 is the custom theme name.
  3. Magento_Theme is the default fallback if not found in you theme.
  4. Web folder is where you store media, css and js files.

You can get Magento_Theme folder from vendor/magento/Magento_Theme.  Just copy paste the folder inside your custom theme folder.

2. Register your theme

To register your theme create a registration.php under your theme folder

\app\design\frontend\Excellence\kishor1.0\registration.php

Above code would register your custom theme in magento.

3. Theme.xml

This xml file is necessary to let your theme visible on magento admin page where you can configure your custom theme.

\app\design\frontend\Excellence\kishor1.0\theme.xml

4. Media

Now create a media folder under your theme in which you are going to store your theme’s preview image. Add a theme preview image as preview.jpg

5. Web

Finally create a web folder under your theme folder inside which you are going to create

  • css
  • fonts
  • images
  • js

folders for your custom theme.

All set

Now your final step is in CLI open CLI and head out to your projects root directory and type

This is going to deploy your custom theme in magento 2.1. Now activate your theme via magento admin panel.

  • Go to magento admin panel
  • Click on Content > Configuration

    Create a custom theme in Magento 2.1
    Create a custom theme in Magento 2.1
  • You will see a list of magento stores. Edit the Default store view
    Create a custom theme in Magento 2.12
    Create a custom theme in Magento 2.1

     

  • Activate your theme under applied theme section and save the configuration.
    Create a custom theme in Magento 2.1 3
    Create a custom theme in Magento 2.1 3

    Later you can edit head, header and footer just below it.

Conclusion

Default Magento 2.1 Luma theme

Create a custom theme in Magento 2.14
Create a custom theme in Magento 2.1

 

Our custom theme

Create a custom theme in Magento 2.1
Create a custom theme in Magento 2.1

That’s all guys ! Please note that some  structures are different from Magento 2 v. So I strictly recommend not to follow this tutorial if your Magento version is 2.0. Like share and comment and don’t forget to subscribe. 🙂

 

Share

6 Comments

  1. Ravi Kumar

    i completed above 5-steps and the final step going to deploy your custom theme in magento i am try like thi D:wampwwwMagentonew>php bin/magento setup:static-content:deploy in CMD but ended with error-‘php’ is not recognized as an internal or external error

    Reply

Leave a Comment

Your email address will not be published. Required fields are marked *