How To Create Theme In Magento 2.0

Magento is undoubtedly one of the better web commerce portals available to the world. The key to Magento’s success is through the extreme ease of customizability and management that even tech novices can easily master.

It has not been long since Magento 2.0 was launched. As the world delves into unraveling the vast expanse of features in the 2.0 release let me quickly run you through a neat set of steps that will help you in creating themes in Magento 2.0

Step 1

Go to:
<magento root folder>/app/design/frontend

Step 2

Create a new directory named your vendor name:
/app/design/frontend/<Vendor>

Step 3

Under the vendor directory, create a directory to name your theme.
Here: “Daffodil” is vendor name and “daffodil” is theme name

Step 4

Add theme.xml to your theme folder:
app/design/frontend/<Vendor>/<theme>

It should contain, at least, the theme name and the parent theme name (if theme inherits any other theme). Optionally you can specify where the theme preview image is stored.

Step 5

theme.xml:

[php]<theme xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance”

xsi:noNamespaceSchemaLocation=”urn:magento:framework:Config/etc/theme.xsd”>

<title>Daffodil theme</title> <!– your theme’s name –>

<parent>Magento/blank</parent> <!– the parent theme, in case your theme inherits from an

existing theme –>

<media>

<preview_image>media/preview.jpg</preview_image> <!– the path to your theme’s preview

image –>

</media>

</theme>[/php]

{{cta(‘d495ce8c-2afe-4ccc-af04-77de6bb56dff’)}}

Step 6

If you want to distribute your theme as a package, add a composer.json file to the theme directory:
app/design/frontend/<Vendor>/<theme>

[php]{

“name”: “daffodil/theme-frontend-daffodil”,

“description”: “N/A”,

“require”: {

“php”: “~5.5.0|~5.6.0|~7.0.0”,

“magento/theme-frontend-blank”: “100.0.*”,

“magento/framework”: “100.0.*”

},

“type”: “magento2-theme”,

“version”: “100.0.1”,

“license”: [

“OSL-3.0”,

“AFL-3.0”

],

“autoload”: {

“files”: [

“registration.php”

]

}

}[/php]

Step 7

To register your theme in the system, go to your theme directory and add a registration.php file with the following content:

[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/Daffodil/daffodil’,

__DIR__

);[/php]

Step 8

Your theme is now created which you can check under Admin. For this go to Content -> Design -> Themes. Make sure your theme appears in the theme list.

Step 9

Go to Stores -> Configuration -> Design.

Step 10

In the Scope drop-down field, select the store view where you want to apply the theme.

Step 11

On the Design Theme tab, select your newly created theme in the Design Theme drop-down

Step 12

Click Save Config.

Cheers! You have created your very own theme in Magento 2.0!
Easy, isn’t it? There are tons of new features that we have been playing around with Magento 2.0 since its release while delivering projects for our clients.

Get in touch with us if you have a Magento idea in mind or wish to inquire more about Magento 2.0. For more of such posts around the latest technologies that drive the world, sub to the blog and we will keep you updated.