Magento 2 Buliding your own theme

As in magento 1 we can build our own theme which is in separate directory with the magento system folders.When you  update magento 2 to newer version in future you don’t need to headache for the update modifying your old theme.

Lets build our own theme.

For building theme in magento 2 lets create directory app/design/frontend/Demo/Mytheme where Demo is package name and Mytheme is  theme name. Now add the followings files and folders

app/design/frontend/Demo/Mytheme /registration.php
app/design/frontend/Demo/Mytheme /theme.xml
app/design/frontend/Demo/Mytheme /media
app/design/frontend/Demo/Mytheme /media/preview.jpg

These are the compulsory files and directory for creating your own theme.Now add codes to the files

In app/design/frontend/Demo/Mytheme /theme.xml

In app/design/frontend/Demo/Mytheme /registration.php

app/design/frontend/Demo/Mytheme /media/preview.jpg

Put your theme screenshot in the media folder.

Now our theme is completed.We have make the required files and folders for our theme.You can activate your theme in admin section.

Now login to your admin section and Screenshot_5

and go to

Screenshot_6

Now you will see your theme name appear in the drop down. Select it and activate your theme.

By default your theme will fallback to the blank theme as in older version of magento. so you need to over load your templates files .

To do this

Create following directories

app/design/frontend/Demo/Mytheme /Magento_Theme
app/design/frontend/Demo/Mytheme /Magento_Theme/layout
app/design/frontend/Demo/Mytheme /Magento_Theme/templates
app/design/frontend/Demo/Mytheme /Magento_Theme/web

and  other folders you needed .You can take reference with vendor/magento/module-theme/     directory

In default home page we will see

Screenshot_7

Now I want to change the copyright content and want to use my own theme template file.So I have created following directory

app/design/frontend/Demo/Mytheme /Magento_Theme/templates/html/copyright.phtml to use our own copyright content .

In app/design/frontend/Demo/Mytheme /Magento_Theme/templates/html/copyright.phtml

Now refresh the page and you will see the magic

Screenshot_8

Now the current them is using your own template file.

That is all.

Comments

comments