Hello everyone! As you know, a theme is one of the important parts of Magento. Depend on your business, you need a theme which is suitable for your website. In this Magento Developer Guide, We will show you how to create a simple theme in Magento 2.

 

1. Prerequisites

 

- Set Magento to Development mode. This removes static files caches. You can do it by using cli command: 

 

php bin/magento deploy:mode:set developer

 

- Do not modify out of the box Magento themes.

 

2. Create A Theme Directory

 

- Go to  <Magento Directory>/app/design/frontend (if it doesn’t exist then you need to create it by yourself).

 

- Create your vendor directory: app/design/frontend/<Vendor>.

(ie: app/design/frontend/Magenest)

 

- Create your theme directory inside vendor directory: app/design/frontend/<Vendor>/<Theme Name>.

(ie: app/design/frontend/Magenest/pretty)

 

After you have done all the steps above, the Magento directory structures should be like this :

 

 

3. Create Theme declaration files

 

- Create theme.xml file

 

After you create a directory for your theme, you must create theme.xml containing the theme name.

 

If your theme inherit from a parent theme (such as luma) you need to specify the parent theme name.

 

Specify your theme preview image (optional)

 

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
     <title>Magenest Pretty</title> <!-- your theme's name -->
     <parent>Magento/blank</parent> <!-- the parent theme, in case your theme inherits from an existing theme -->
     <media>
         <preview_image>media/preview.jpg</preview_image> <!-- the path to your theme's preview image -->
     </media>
 </theme>

 

Simply copy this to your theme.xml file, this file content is predefined by Magento.

 

If you change the theme title or parent theme information in theme.xml after a theme was already registered, you need to open or reload any Magento Admin page for your changes to be saved in the database.

 

- Create a registration.php file

 

To register your theme in the system, in your theme directory add a registration.php file with the following content:

 

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
   \Magento\Framework\Component\ComponentRegistrar::THEME,
   'frontend/<Vendor>/<theme>',
   __DIR__
);
 
Replace <Vendor> and <theme> with your theme’s vendor and name.
ie: 
<?php
\Magento\Framework\Component\ComponentRegistrar::register(
   \Magento\Framework\Component\ComponentRegistrar::THEME,
   'frontend/Magenest/pretty',
   __DIR__
);

 

This registration.php is predefined by Magento.

 

- Create directory for static files (optional)

 

Your theme will likely contain several types of static files:

 

* CSS (Less) Files

 

* Javascript

 

* Images

 

* Fonts

 

* HTML template

 

Each type should be stored in a separate sub-directory of the web in your theme folder

 

 

Create Theme Logo (optional if your theme has parent)

 

In the Magento application, the default format and name of a logo image is logo.svg.  

 

When you put your logo.svg in <Magento Directory>/app/design/frontend/Magenest/pretty/web/images directory (which is the conventional location of the default logo), it is automatically recognized as the theme logo.

 

It should display in the header of the store front page when the theme is applied

 

If you want to use the logo with different file and format, you might need to declare it

 

The necessity of declaration depends on whether your theme has a parent theme and its logo image. The following cases are possible:

 

- Your theme does not have a parent theme:

 

* If your logo image name and format uses the default naming convention (logo.svg), there is no need to declare it.

 

* If your logo image name or format does not use the default naming convention, you need to declare it in layout.

 

- Your theme has a parent theme:

 

* If your theme logo image has the same name and format as the parent’s theme logo, there is no need to declare it.

 

* If your logo image has a different name or format, declare it in the layout.

 

Declare a logo:

 

To declare a theme logo, add an extending

 

<Magento Directory>/app/design/frontend/Magenest/pretty/Magento_Theme/layout/default.xml layout.

 

Example default.xml files

 

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="logo">
            <arguments>
                <argument name="logo_file" xsi:type="string">images/my_logo.png</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>

- Create View.xml file (optional)

 

Product image sizes and other properties used on the storefront are configured in a view.xml configuration file. It is required for a theme but is optional if exists in the parent theme.

 

If the product image sizes of your theme differ from those of the parent theme, or if your theme does not inherit from any theme, add view.xml using the following steps:

 

  1. Create the etc directory in your theme folder.
  2. Copy the view.xml file from the etc directory of an existing theme (for example, from the Blank theme) to your theme’s etc directory.
  3. Configure all storefront product image sizes in the view.xml file

 

- Create Translation directory (optional)

 

In your theme folder, create i18n folder (stands for Internationalization).

 

Create a .csv file to store translation phrases.

After you’ve done all the above steps, your theme directory should look like this.

 

 

4. Apply Your Theme

 

After adding your theme files to the file system and opening the Magento Admin (or reloading any Magento Admin page), your theme gets registered and added to the database.

 

To apply a theme:

 

1. In Admin, go to CONTENT > Design > Configuration. A Design Configuration page opens. It contains a grid with the available configuration scopes. For example:

 

 

2. In the configuration record corresponding to your store view, click Edit. The page with design configuration for the selected scope opens. For example:

 

 

3. On the Default Theme tab, in the Applied Theme drop-down, select your newly created theme.

 

4. Click Save Configuration.

 

5. If caching is enabled, clear the cache.

 

6. To see your changes applied, reload the storefront pages.

 

5. Make Your Theme A Composer Package

 

Magento default themes are distributed as Composer packages.

 

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

 

The composer.json file provides theme dependency information. Refer to a current theme.xml file for the correct dependencies and their versions. If your parent theme is something other than Magento/blank, you may need additional modules in the "require" section.

 

Example of a theme composer.json file:

 

{
    "name": "magento/theme-frontend-luma",
    "description": "N/A",
    "config": {
        "sort-packages": true
    },
    "require": {
        "php": "~7.1.3||~7.2.0",
        "magento/framework": "*",
        "magento/theme-frontend-blank": "*"
    },
    "type": "magento2-theme",
    "license": [
        "OSL-3.0",
        "AFL-3.0"
    ],
    "autoload": {
        "files": [
            "registration.php"
        ]
    }
}

 

6. Deploy your theme

 

- Simply deploy command

php bin/magento setup:static-content deploy

 

- If you want to deploy your theme for a specific language (ie: vn_VN)

php bin/magento setup:static-content deploy vi_VN

 

- If Magento is in developer mode, you need --force option (or -f )

php bin/magento setup:static-content deploy --force

 

- Follow this link for more information about the deployment process.

 

Conclusion

 

The 6 steps I mentioned above is the shortest process for you to Create New Theme in Magento 2. With this guide, you can manage the New Theme in Magento 2 easily. Every store has a New Theme in Magento 2 with many attributes.