How to Make Custom Magento Theme

The first thing you are most probably going to do when beginning a new Magento project is creating a custom Magento theme for styling and functioning of your store. It is best advised to follow the Magento rules and recommendations so that your tasks get a lot sorted. The theme of any ecommerce store is its important component as it renders a uniform appearance and feel to your entire store.

You get a better look to store sections like Storefront and Magento 2 Admin by using the combination of custom templates, styles, designs or images development. If you are using Magento 2, you would have noticed that there are generally two theme options- Luma (demonstration theme) and Blank (a basis for custom theme creation) that you get to see after successfully installing Magento 2.

You can indefinitely use the Luma theme for your live store. Magento strongly recommends that if in any case, if you have plans of customizing the default design or creating your own theme, you must not edit or change the default Blank and Luma theme files. This is so because the changes that you make can be overwritten by the latest version of the default files during your Magento 2 upgrades if you change or edit the default theme files.

Creating Custom Magento Theme

The Magento developers must follow the following steps for creating the Custom Magento Theme:

1. PREREQUISITES FOR THEME DEVELOPMENT
   One must fulfill the following requirements before developing your own Magento 2 theme:
   1. You need to have some Magento coding experience prior to the theme development.
   2. You must have knowledge of Magento 2.
   3. Magento 2 must be running smoothly on your local host after installation. You must have the access to the frontend and backend. Even if you don’t have Magento 2, you can easily have it in a matter of few clicks to create your own store.
2. CONSTRUCT THEME DIRECTORY
   1. Follow the following steps to create a directory for your Magento 2 theme:
      “<your Magento 2 root directory>/app/design/frontend”.
   2. Create a new directory under the frontend directory as per your theme vendor name:
      “/app/design/frontend/ABC(Vendor name)”.
   3. Create a directory for your own Magento 2 theme under the theme vendor directory:
      “/app/design/frontend/ABC(Vendor name)/m2-theme”.
   4. Declare your Magento 2 theme after creating the above structure in order to let your system know that it exists and you can set your theme as the current theme in your Magento 2 backend.
3. MENTION YOUR MAGENTO 2 THEME
   Under “app/design/frontend/ABC(Vendor name)/m2-theme/theme.xml”, you are required to create the theme.xml file with the help of the following code:
   “<theme xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance”
   xsi:noNamespaceSchemaLocation=”urn:magento:framework:Config/etc/theme.xsd”>
   <title>m2-theme</title>
   <parent>Magento/Luma</parent>
   <media>
   <preview_image>media/m2-theme-image.jpg</preview_image>
   </media>
   </theme>”
   In place of the “<title>” tag, insert the name of your theme and in the place of the “<parent>” tag, insert the parent theme for fallback purposes. We used Luma for the purpose.
   Declare the theme image in the “<preview_image>”. This thumbnail image will show up in your Magento 2 admin on the theme page to have a preview of what your theme looks like. You can find the thumbnail image in the “app/design/frontend/ABC(Vendor name)/m2-theme/media/m2-theme-image.jpg”. Do make sure that this thumbnail image is where it must be. If in any case, it is not in the correct place, you will get an error on visiting the theme page in Magento 2 admin.
   1. Make your Magento 2 Theme a Composer Package
      Here, you are to add a “composer.json” file to your theme directory:
      “app/design/frontend/ABC(Vendor name)/m2-theme/composer.json” for registering package on the packaging server. You can find this file in the theme dependency information. https://packagist.org/ is the Magento default public packaging server. You can use the following code for it:
      “{
      “name”: “ABC(Vendor name)/m2-theme”,
      “description”: “N/A”,
      “require”: {
      “php”: “~5.5.0|~5.6.0|~7.0.0”,
      “ABC(Vendor name)/m2-theme”: “100.0.*”,
      “magento/framework”: “100.0.*”
      },
      “type”: “magento2-theme”,
      “version”: “100.0.1”,
      “license”: [
      “OSL-3.0”,
      “AFL-3.0”
      ],
      “autoload”: {
      “files”: [
      “registration.php”
      ]
      }
      }”
   2. Add “registration.php” for Registering your Magento 2 Theme
      You are required to create “registration.php” file in your theme directory to register your theme in the Magento system: Directory Structure in Magento 2
      “app/design/frontend/ABC(Vendor name)/m2-theme/registration.php”.
      You can use the following code for it:
      “<?php
      /**
      * Copyright © 2015 Magento. All rights reserved.
      * See COPYING.txt for license details.
      */
      \Magento\Framework\Component\ComponentRegistrar::register(
      \Magento\Framework\Component\ComponentRegistrar::THEME,
      ‘frontend/ABC(Vendor name)/m2-theme’,
      __DIR__
      );”
4. DIRECTORY STRUCTURE IN MAGENTO 2 APPLY AND CONFIGURE THEME IN MAGENTO 2 ADMIN
   After you are done with the complete theme declaration and registration, there is the requirement to create directory structure for the theme layout, template files, and styles. This is how your theme directory must look like:
   “/app/design/frontend/ABC(Vendor name)/m2-theme/theme.xml
   /app/design/frontend/ABC(Vendor name)/m2-theme/registration.php
   /app/design/frontend/ABC(Vendor name)/m2-theme/composer.json
   /app/design/frontend/ABC(Vendor name)/m2-theme/media
   /app/design/frontend/ABC(Vendor name)/m2-theme/media/m2-theme-image.jpg
   /app/design/frontend/ABC(Vendor name)/m2-theme/web
   /app/design/frontend/ABC(Vendor name)/m2-theme/web/css
   /app/design/frontend/ABC(Vendor name)/m2-theme/web/css/source
   /app/design/frontend/ABC(Vendor name)/m2-theme/web/css/fonts
   /app/design/frontend/ABC(Vendor name)/m2-theme/web/css/images
   /app/design/frontend/ABC(Vendor name)/m2-theme/web/css/js
   /app/design/frontend/ABC(Vendor name)/m2-theme/etc
   /app/design/frontend/ABC(Vendor name)/m2-theme/etc/view.xml
   /app/design/frontend/ABC(Vendor name)/m2-theme/Magento_Theme
   /app/design/frontend/ABC(Vendor name)/m2-theme/Magento_Theme/layout
   /app/design/frontend/ABC(Vendor name)/m2-theme/Magento_Theme/layout/default.xml”
   The web folder for the same will be created where the theme’s CSS, fonts, js, and images are located. The files will be found here if the Magento 2 doesn’t have a skin folder. You would have noticed that we created the “view.xml” file under the “etc” directory with the “view.xml” file. Magento 2 Catalog images size and other important things are also configured.
5. APPLY AND CONFIGURE THEME IN MAGENTO 2 ADMIN
   After you are done with adding your theme to the file system, you can now activate your theme and apply it to your entire store. To make sure if your theme appears on this list, go to the Magento 2 backend and go as:
   “Content>Design>Themes”.
   
   Once you get to see your theme on the list, go as:
   “Stores > Configuration > Design”
   and select your own image.
   
   After choosing your theme, click “Save Config” button.
   And then, clear the cache.

And finally, you have a working Magento 2 theme that has been configured and created by you.