By default, there are two Magento themes called Luma and Blank. Luma is a demostartion theme but Blank theme is for customization. We can Customize Blank theme by creating its child. We should not do modification directly in themes. By creating child theme ,it is appropriate way to do modification in themes
Requirements for Theme Development
- Before developing your theme for magento2 there should be Basic Knowledge about its directory structure.
- You have a little bit of Magento coding experince
- you should have a latest version of magento2 installed on your local
Create Theme Directory
- To Create a Magento2 theme you have to create an appropriate directory ,it should just like as <your Magento 2 root directory>/app/design/frontend.
- Under the frontend folder create a new folder according to your vendor name
- /app/design/frontend/dhaliwal (i choose dhaliwal as avendor name)
- In next step again under the dhaliwal folder create another folder for your theme for example /app/design/frontend/dhaliwal/mytheme
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.
Declaration of your Magento 2 theme
- Now create the theme.xml file under your theme’s folder
- Paste below code into your theme.xml
<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd"> <title>mytheme</title> <parent>Magento/Blank</parent> <media> <preview_image>media/mytheme-image.jpg</preview_image> </media> </theme>
- <title> tag insert the name of your theme
- <parent> tag represents your theme’s parent theme
- In the <preview_image> i declare an image , which shows in admin panel , which helps the admin to look a preview of your theme
- Directory Structure for image is app/design/frontend/dhaliwal/mytheme/media/m2-theme-image.jpg.
Register your Magento 2 theme
- To register your Magento 2 Theme you need to create another file named registration.php
- Directory Structure of registration.php is… app/design/frontend/dhaliwal/mytheme/registration.php
Paste below code into your registration.php
<?php /** * Copyright © 2015 Magento. All rights reserved. * See COPYING.txt for license details. */ \Magento\Framework\Component\ComponentRegistrar::register( \Magento\Framework\Component\ComponentRegistrar::THEME, 'frontend/dhaliwal/mytheme', __DIR__ );
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.
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.
Activate Your Custom Theme in Magento 2 Admin
After Creating your Custom Magento 2 theme now it need to activate in admin panel so that we can work with our custom theme. Go to Magento backend , then go to Content > Design > Themes. Your Custom theme appears here on the list . if it appears in list then go to Stores > Configuration > Design, and select your Custom Magento 2 theme and Click on Save Config Button. Here is very Important to clear your Magento Cache Before Leave your admin. Most of beginners do not Flush the cache and some unexpected issues occurs.