Loading…

Magento 2 – How to create a new theme

The first thing that you should know when you start a Magento 2 project is that you shouldn’t modify the out of the box Magento files. These are located in the “vendor” folder. If you use git, the “vendor” folder is included in .gitignore file.

So if we cannot modify the vendor files, we need to create a new custom theme to be able to customize the website.

 

To create a new custom theme in Magento 2 you need to:

 

  1. Set your Magento mode to developer. If you don’t know how to do this, you can read here.
  2. Create a directory for your theme into this path: app/design/frontend/YourVendorName/YourThemeName.
  3. Then in app/design/frontend/YourVendorName/YourThemeName add a theme.xml file which should include:
<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">

    <title>YourVendorName</title>

    <parent>Magento/luma</parent>

</theme>

 

In the parent tag you should include the name of the parent theme, only if your theme inherits from an existing theme like Luma or Blank. Magento documentation recommends to start the customization with the Blank theme.

I would suggest first, before choosing a parent theme, to look at your wireframes/design source files and to see which parent theme looks more like the wireframes and use that theme as a parent. This way you’ll have less customization to do.

 

  1. In the same path (app/design/frontend/YourVendorName/YourThemeName) add a registration.php file, which should include:
<?php

\Magento\Framework\Component\ComponentRegistrar::register(

    \Magento\Framework\Component\ComponentRegistrar::THEME,

    'frontend/YourVendorName/YourThemeName,

    __DIR__

);

Please make sure to change the YourThemeName and YourVendorName into the ones that you chosen for your theme.

5. We can now login into the Admin and apply our new theme in  Content -> Design ->Configuration; Click on the Edit button of the theme. On the Default Theme tab choose from the drop down your newly created theme and don’t forget to save.

 

Now go on the frontend and check if the newly created theme is applied.

Leave a Reply