Magento 2 offers a range of flexible tools and advanced technology that cover all of your advanced marketing, SEO and product management needs. There are significant changes in the structure of directory. Of course the aim of these changes are to provide a better a clear view structure for developer. On basis of this changes, Magento 2 also introduces better theme development using latest technology like HTML 5, CSS 3, jQuery Library, CSS URL resolver, less structure, etc.

In this blog post, we will learn how to create a custom theme in Magento 2.

Let’s consider, vendor name as Magewallet and our theme name is wallet. We need to create following directory structure for our theme:

Please create below folders.

  • magento2/app/design/frontend/Magewallet
  • magento2/app/design/frontend/Magewallet/wallet

Declaration of custom Magento 2 theme

Now, We need to create theme.xml file under app/design/frontend/Magewallet/wallet/theme.xml and use the code below.

Here,
Title – Name of your custom theme
Parent – Parent theme name
Preview Image – You need to put your thumbnail image at app/design/frontend/Magewallet/wallet/media/preview.jpg

Composer package

As per the Magento 2 standard, if have to make package for the theme to register. So we need to add a composer.json file at theme directory app/design/frontend/Magewallet/wallet/composer.json

Register With Magento System

To register your custom theme in the Magento 2 system, we need to create registration.php file in theme directory app/design/frontend/Magewallet/wallet/registration.php

That’s it! You’re now ready to start working with your own theme. So lets check how to apply your custom Magento 2 theme.

Apply Custom Theme

Now, You can apply recently created custom theme from Magento backend panel. Login to backend panel and go to Content > Design > Themes to make sure that your custom theme is available in list.

Select Custom Magento 2 Theme

Click on your theme from the list, you will get the theme information listed as below.

Custom Magento 2 Theme Detail

Once you confirm that your theme is available in list, you can configure the theme at Stores > Configuration > Design. Now you can select your recently created theme from the list at Design Theme.
Save the configuration and clear your cache and your new theme is ready. Check your home page.

Configure Custom Magento 2 Theme

In next series we will learn how to.

  • create child theme and its benefits?
  • override existing theme templates
  • configure image properties
  • add/update blocks via XML

and many more!!

If you have any queries regarding this tutorial, then please feel free to share via the comments section below.

Enjoy Magento 2! Enjoy Magewallet!!

Mahendra Paladiya
Mahendra is a Web Developer whose passions includes web development, technical blog writing, and database management. His passion for web development pushed him into learning how to handle different platforms like Core PHP, Magento, Prestashop, WordPress, CodeIgniter, CakePHP and Oracle.