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 –
- All required php extensions are installed
- Development mode is set to enabled
- 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
- Excellence is the package name you are working under.
- kishor1.0 is the custom theme name.
- Magento_Theme is the default fallback if not found in you theme.
- 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
\Magento\Framework\Component\ComponentRegistrar::THEME, 'frontend/Excellence/kishor1.0', __DIR__
Above code would register your custom theme in magento.
This xml file is necessary to let your theme visible on magento admin page where you can configure your custom theme.
<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
<title>kishor1.0</title> <!-- your theme's name -->
<parent>Magento/blank</parent> <!-- the parent theme, in case your theme inherits from an existing theme -->
<preview_image>media/preview.jpg</preview_image> <!-- the path to your theme's preview image -->
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
Finally create a web folder under your theme folder inside which you are going to create
folders for your custom theme.
Now your final step is in CLI open CLI and head out to your projects root directory and type
C:\xampp\htdocs\demo> php bin/magento setup:static-content:deploy
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
- You will see a list of magento stores. Edit the Default store view
- Activate your theme under applied theme section and save the configuration.
Later you can edit head, header and footer just below it.
Default Magento 2.1 Luma theme
Our custom theme
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. 🙂