Published on

Magento2 theme development process step by step

Authors
  • avatar
    Name
    Bal Singh
    Twitter

As we know that magento2 had released and first step every developer try to read and search, is, How to implement/create theme in magento2. In this article I am going to explain step by step process of how to develop theme in magento2 and how to modify/extend magento style sheet or add new custom style (style sheet).   How to develop new theme

  1. Create theme directory app/design/frontend/MySite/MyTheme
  2. Create theme.xml file under app/design/frontend/MySite/MyTheme and configure it using following content:
<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd"> 
    <title>New theme</title> <!-- your theme's name --> 
    <parent>Magento/blank</parent> <!-- the parent theme, in case your theme inherits from an existing theme --> 
    <media><!-- media tag is optional --> 
        <preview_image>media/preview.jpg</preview_image> <!-- the path to your theme's preview image --> 
    </media> 
</theme>
  1. Add registration.php file in theme directory (MyTheme) and content of this would be
<?php \Magento\Framework\Component\ComponentRegistrar::register( 
    \Magento\Framework\Component\ComponentRegistrar::THEME, 'frontend/MySite/MyTheme', \_\_DIR\_\_ 
);
  1. Login to admin panel, Go to Store->Configuration->design. Select your theme and save it.
  2. Refresh magento cache, it will work.

  How to override/modify css file You can modify the style(css) of your theme by 2 ways.

  • Method 1 - By overriding _theme.less file in your theme.
  • Method 2 - By including custom css file in your theme.

Method 1 -
To overriding _theme.less file in your theme, you need to copy _theme.less file of your parent theme. Then add your style or override class/id of style sheet. Path of _theme.less file in your theme should be app/design/frontend/MySite/MyTheme/web/css/source/_theme.less.

Method 2 -
Create new custom css file (mystyle.css) in your theme (app/design/frontend/MySite/MyTheme/web/css/mystyle.css). Then to include it in all pages, you need to modify default_head_blocks.xml file of Magento_Theme module. Extend the Magento_Theme module in your theme, and including the required stylesheets in this file. Your custom default_head_blocks.xml file path should be app/design/frontend/MySite/MyTheme/Magento_Theme/layout/default_head_blocks.xml. Content of your default_head_blocks.xml file should be like: -

 <?xml version="1.0"?> 
    <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> 
        <head> 
            <css src="css/styles-m.css" /> 
            <css src="css/styles-l.css" media="screen and (min-width: 768px)"/> <css src="css/print.css" media="print" /> 
            <css src="css/mystyle.css"/> 
        </head> 
    </page>

Note: Clear your magento cache (Flush Magento Cache)