Magento Theme Development

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.

/app/design/frontend/dhaliwal/mytheme/theme.xml

/app/design/frontend/dhaliwal/mytheme/registration.php

/app/design/frontend/dhaliwal/mytheme/composer.json

/app/design/frontend/dhaliwal/mytheme/media

/app/design/frontend/dhaliwal/mytheme/media/mytheme-image.jpg

/app/design/frontend/dhaliwal/mytheme/web

/app/design/frontend/dhaliwal/mytheme/web/css

/app/design/frontend/dhaliwal/mytheme/web/css/source

/app/design/frontend/dhaliwal/mytheme/web/css/fonts

/app/design/frontend/dhaliwal/mytheme/web/css/images

/app/design/frontend/dhaliwal/mytheme/web/css/js

/app/design/frontend/dhaliwal/mytheme/etc

/app/design/frontend/dhaliwal/mytheme/etc/view.xml

/app/design/frontend/dhaliwal/mytheme/Magento_Theme

/app/design/frontend/dhaliwal/mytheme/Magento_Theme/layout

/app/design/frontend/dhaliwal/mytheme/Magento_Theme/layout/default.xml

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.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s