Learn theme Development in Magento- Part 1

Magento is a famous platform that is specifically used for the purpose of e-commerce. There are a plethora of dimensions to this comprehensive platform and in the first part of this blog-guide to Magento, we will be discussing the theming process in the platform.

When we endeavor to develop a website, there aren’t too many guides available out there and hence the primary resource that i have considered is the Magento 2Â dev.docs which is considered to be very useful. The proof of its usefulness lies in its comprehensiveness as it incorporates almost everything a user requires. As there is a lot to cover, this blog will be divided into two parts.

Pre requisites

  • Prior experience of Magento coding.
  • Know how of Magento 2
  • Completely Installed Magneto 2, running smoothly, and accessible to the frontend &Â admin

Installing Magento

Installation of Magento is the first step and it can be tough task if you have not installed it before, but there some good resources out there that are recommended to especially the beginners such as:

Beginner’s guide to installing Magento 2 using Composer

Magento 2 Vagrant

Magento 2 developer documentation

Creating a good theme

After the process of installation is completed, we would now move on to creation of a good theme to attract online traffic. In Magento 2, as similar to Magento 1, the themes are stored in ~/app/design/frontend.  which is inside of the front end directory. For this purpose, you will have to create a Vendor Directory, similar to the Package in Magento 1. Then a theme folder has to be developed within the vendor directory with the name of your choice.

Now you have a directory structure as below:

  • ~/app/design/frontend
    •  /<Vendor_Name>
      • /<Theme>

Now, you need to declare your theme as your structure is in place so that Magento knows of its existence and hence you can apply it as an active theme in the admin.

After this, you have to create theme.xml file on the root in the previously created theme folder. The code can also be used inside the Luma and Blank theme folders as well. Now, the name of the theme needs to be inserted in the <title> tags and the parent theme can be specified for fallback purposes.

1234<theme xmlns:xsi="<a class="vglnk" href="http://www.w3.org/2001/XMLSchema-instance" rel="nofollow"><span>http</span><span>://</span><span>www</span><span>.</span><span>w3</span><span>.</span><span>org</span><span>/</span><span>2001</span><span>/</span><span>XMLSchema</span><span>-</span><span>instance</span></a>" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd"><title>INSERT THEME NAME</title><parent>Magento/blank</parent></theme>

This code is the minimum magnitude you’ll need and you can declare a theme image too. It will be exhibited on your theme page, in the admin so that you can see a preview of the theme. Use the code given below in order to add one of these. The code must be used between the <theme> XML nodes and underneath the declaration of <parent> theme.

123<media><preview_image>media/theme-screenshot.jpg</preview_image></media>

Thumbnail image name should be changed to that of your filename and image should be placed in the following location:

  • ~/app/design/fronted/<Vendor_Name>/<Theme>
    • /media
      • /theme-screenshot.jpg

It is important to note that if this file is not in the current location when  theme page is visited in the admin, then an error is likely to occur. Hence, make sure your image is placed perfectly.

Registration.php

Lastly, you have to add a registration.php file to the root of your theme in order to declare your theme.

  • ~/app/design/frontend/<Vendor_Name>/<Theme>
    • /registration.php

Paste the following code given below into the file, then edit the Vendor Name and Theme to match the structure the structure of your theme?

01020304050607080910<?php/*** Copyright © 2015 Magento. All rights reserved.* See COPYING.txt for license details.*/\Magento\Framework\Component\ComponentRegistrar::register(\Magento\Framework\Component\ComponentRegistrar::THEME,'frontend/<Vendor_Name>/<Theme>',__DIR__);

Composer

An interesting aspect of Magento is that the theme are distributed as various composer packages and hence include a composer.json file. It is optional to create one of these files and its not included in the demo but you can add such files. Just simply copy the file from Luma theme or Magento Blank and then edit it according to your need.

Structure of Directory

Now, at this point the overall registering and declaration is complete and you now only need to create a directory structure which is in the preparation of your  layout and template files. Your theme directory should appear as follows.

  • ~/app/design/frontend/<Vendor_Name>/<Theme>
    • /theme.xml
    • /registration.php
    • /composer.json
    • /media
      • /theme-screenshot.jpg
    • /web
      • /css
        • /source
      • /fonts
      • /images
      • /js
    • /etc
      • /view.xml
    • /Magento_Theme
      • /layout
        • /default.xml

The web folder contains your theme’s images css, fonts, and js will go. Also, as the Magento 2 doesn’t have a skin folder therefore these files go in here.

The Magento Catalog image sizes can be configured from etc/view.xml file by just copying it from one of the default themes and editing it accordingly.

In addition, you can also add a logo and declare it before activating your theme. Then the image folder will be used to store the image file and this can be file type you prefer. In this case, the file type is svg; and hence, to tell the theme to utilize the logo, you have to create the Magento_theme/layout folders and make sure that the following code is added to the default.xml file. You can edit this accordingly.

0102030405060708091011<page xmlns:xsi="<a class="vglnk" href="http://www.w3.org/2001/XMLSchema-instance" rel="nofollow"><span>http</span><span>://</span><span>www</span><span>.</span><span>w3</span><span>.</span><span>org</span><span>/</span><span>2001</span><span>/</span><span>XMLSchema</span><span>-</span><span>instance</span></a>" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"><body><referenceBlock name="logo"><arguments><argument name="logo_file" xsi:type="string">images/logo.svg</argument><argument name="logo_img_width" xsi:type="number">300</argument><argument name="logo_img_height" xsi:type="number">300</argument></arguments></referenceBlock></body></page>

Activate your theme

Once everything is complete, you have to browse to the admin of your Magento 2 store, where you will go to the Content > Design > Themes. You have to make sure that your theme appears in this particular list. In the case if it doesn’t appear, the theme has not been declared correctly.

After you correctly manage to declare and see your theme in the path above, you have to browse to Stores > Configuration > Design. Here, you have to select the right store scope with changing of the theme to your own designed theme.

Concluding Part 1

This brings our Part 1 of Theme creation to an end. It is assumed that you would now have a working theme which is created and configured by yourself. In the Part 2, we will be covering the following:

  • Styling
  • Layout changes
  • Editing & Overriding templates

Let us know if there are any comments, queries or questions.