How to create a custom theme in Magento 2 - Part 1

How to create a custom theme in Magento 2 - Part 1

Magento is one of the most popular and widely-used ecommerce platforms. Magento has announced Magento 2 in July 2015 with a promise to have an extraordinary feature rich ecommerce platform including bug fixes from Magento 1. A theme is a component of Magento2 application which provides a consistent look and feel (visual design) for entire Magento application area (for example, storefront or Magento admin). It uses a combination of custom templates, layouts, styles or images.

By default, you get two themes when you install Magento 2 – Luma and Blank – which you can see after installing Magento 2 successfully. Luma is a demonstration theme, and Blank is a basis for custom theme creation. By the way, Luma theme is derived from blank theme, so ultimately Magento blank theme is the skeleton for any future custom theme development in Magento 2.

In Magento 2, if you want to customize default design or if you need to create your own theme, you have to create a custom theme, Magento strongly recommends not to change or edit the default Luma and Blank theme files.

This guide (part 1 and part 2) will help you developing your own custom theme in Magento 2.

 

Here are the list of steps you need to follow for a custom theme development:

  1. Create a directory for the theme

  2. Add a declaration for theme

  3. Add a composer.json file

  4. Add registration.php

  5. Create directories for CSS, JavaScript, images, and fonts

  6. Configure your theme in the Admin panel

  7. Final Deployment

 

Requirements for Theme Development

It is also very important to check whether your server meets the minimal Magento 2 requirements:

Apache: 2.2 or 2.4

PHP: 5.5.x or 5.6.x

MySQL: 5.6.x

Also, we assume that you have some knowledge of Magento 2 and Magento 2 is installed on your server as well as on your local computer to test this new theme development.

 

1. Create a directory for the theme

Go to: <your Magento 2 root directory>/app/design/frontend and create a new directory with the vendor name you want for theme package,

For example I have used name Bizspice here : /app/design/frontend/Bizspice

Now in your vendor directory, create your theme directory, for example – Mytheme:

/app/design/frontend/BizSpice/Mytheme/

 

2. Add a declaration for theme

Once you have created directory structure of your theme, now we have to declare that theme by creating theme.xml file to declare it.

theme.xml defines basic theme configuration, including at least the title and usually the parent theme that’s being extended.

Create the theme.xml file under app/design/frontend/Bizspice/Mytheme/theme.xml and use the code below:

 


<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
  <title>Mytheme</title>
  <parent>Magento/Luma</parent>
  <media>
     <preview_image>media/mytheme-theme-image.jpg</preview_image>
  </media>
</theme>

 

3. Add a composer.json file

To distribute your theme as a package, add a composer.json file to the theme directory and register the package on a packaging server. 

app/design/frontend/Bizspice/Mytheme/composer.json to register the package on a packaging server. This file is provided in the theme dependency information.

 


{
    "name": "Bizspice/Mytheme",
    "description": "N/A",
    "require": {
        "php": "~5.5.0|~5.6.0|~7.0.0",
        "Bizspice/Mytheme": "100.0.*",
        "magento/framework": "100.0.*"
    },
    "type": "magento2-theme",
    "version": "100.0.1",
    "license": [
        "OSL-3.0",
        "AFL-3.0"
    ],
    "autoload": {
        "files": [
            "registration.php"
        ]
    }
}

 

 

4. Add registration.php

To register your theme in the Magento system, you need to create registration.php file in your theme directory: app/design/frontend/Bizspice/Mytgeme/registration.php and use the following code in your registration.php:

Code:

 


<?php
use Magento\Framework\Component\ComponentRegistrar;
ComponentRegistrar::register(
ComponentRegistrar::THEME,
'frontend/<Bizspice>/<Mytheme>',
 __DIR__
);

 

5. Create directories for CSS, JavaScript, images, and fonts

Theme package consists of many types of files: styles, fonts, JavaScript and images. Each one have to be stored in its own sub-directory of web in theme directory:

 


app/design/frontend/Bizspice/Mytheme
├── web/
│ ├── css/
│ │ ├── source/
│ ├── fonts/
│ ├── images/
│ ├── js/

 

Tip:

In Magento 2, theme or extension development, when you update any files in app/design/frontend/Bizspice/Mytheme/web folder, you have two static folders which are located at pub/static and var/view_preprocessed. You will need to compile and recreate static files, otherwise, you will see there is still no change in frontend.

 

Directory Structure in Magento 2 Theme Development

At this point you can see how your theme directory should look like. I am using my own Vendor and directory name.

 

app/design/frontend/Mycompany/

 


├── default/
│   ├── etc/
│   │   ├── view.xml
│   ├── web/
│   │   ├── images/
│   │   │   ├── logo.svg
│   │   ├── css/
│   │   │   ├── source/
│   │   │   │   ├── _theme.less
│   │   ├── fonts/
│   │   ├── js/
│   ├── registration.php
│   ├── theme.xml
│   ├── composer.json

 

 

6. Configure your theme in the Admin panel

 

Step 1:  Go to Magento 2 backend, then go to Content > Design > Themes. And make sure your theme appears on this list.

Step 2:  Go to  Store => Configuration => Design => Choose your newly created theme from those shown in the image below.

Step 3:  Select Mytheme from the Applied Theme drop down menu and click on Save Configuration.

After you select your theme, click on the “Save Config” button.

Clear the cache.

 

7. Final Deployment

Open the SSH terminal and go to the root directory of your Magento 2. Now run all these commands one by one:

 


rm -rf var/di/* var/generation/* var/cache/* var/log/* var/page_cache/* var/session/* var/view_preprocessed/* pub/static/*
php bin/magento setup:upgrade
php bin/magento setup:db-schema:upgrade
php bin/magento setup:di:compile
php bin/magento setup:static-content:deploy
php bin/magento indexer:reindex
php bin/magento cache:clean
php bin/magento cache:flush 

Great job! You’re all done! Open the homepage of your store and you’ll see that your custom theme has been applied successfully. 

Here is the link to see the second part of this article: Click Here