HOW TO CREATE A 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 here : /app/design/frontend/Akshaweb 

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

/app/design/frontend/Akshaweb/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/Akshaweb/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/Akshaweb/Mytheme/composer.json to register the package on a packaging server. This file is provided in the theme dependency information.

{
    "name": "Akshaweb/Mytheme",
    "description": "N/A",
    "require": {
        "php": "~5.5.0|~5.6.0|~7.0.0",
        "Akshaweb/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/Akshaweb/Mytgeme/registration.php and use the following code in your registration.php:

Code:

<?php
use Magento\Framework\Component\ComponentRegistrar;
ComponentRegistrar::register(
ComponentRegistrar::THEME,
'frontend/<Akshaweb>/<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:

Tip:

In Magento 2, theme or extension development, when you update any files in app/design/frontend/Akshaweb/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