Pages

Monday, September 7, 2015

Magento 2: Create New Custom theme

In magento 2, all the file structure is changed compare to older version. So let’s start to create new theme in magento 2
  • Create Theme Directory
  • Go to the magento Directory
  • Create the directory <vendor> in the path app/design/frontend. <Vender> Should be the interface or package name for theme.
  • Create the theme folder on the <vender> folder. So Path is app/design/frontend/<vendor>/<theme>
  • To create the theme in magento 2 theme.xml and composor.json files are most important. This two files are located in our theme folder.



In theme.xml
<theme xmlns:xsi = "http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation = "../../../../../lib/internal/Magento/Framework/Config/etc/theme.xsd">
<title>Magento theme</title>
<parent>Magento/blank</parent> <!--the parent theme, in case your theme inherits from an existing theme -->
<media>
<preview_image>media/preview.jpg</preview_image>
</media>
</theme>


In composor.json
{
    "name": "magento/theme-frontend-<themename>",
     "description": "N/A",
     "require": {
        "php": "~5.5.0|~5.6.0",
         "magento/theme-frontend-blank": "0.42.0-beta1",
         "magento/framework": "0.74.0-beta11",
         "magento/magento-composer-installer": "*"
        },
     "type": "magento2-theme",
     "version": "0.74.0-beta11",
     "license": [
                "OSL-3.0",
                 "AFL-3.0"
                ],
     "extra": {
            "map": [
                        [
                        "*",
                         "Magento/<theme folder name>"
                        ]
                    ]      
            }  
}


After add this file. We can see the theme in backend admin side. Content >> Theme
Now theme is created and displayed at admin side store >> Configuration >> General >> Design to change the theme.
Enjoy the Magento 2 new theme :)

No comments:

Post a Comment