>How to Create Admin Theme in Magento 2

How to Create Admin Theme in Magento 2

Whether you are developers wanting to make money with Magento 2 or merchants wishing to save cost and customize online stores yourselves, welcome back to our tutorial series. Today we will instruct you how to create Magento 2 admin theme. 

Let’s get started!

First off, set Magento 2 application to developer mode since it will affect the way Magento caches static files.

php bin/magento deploy:mode:set developer

I. Create Theme Directory

In the app/design/adminhtml directory, please add the new directory: < VendorName>/<theme_name>

To make “how to create Magento 2 admin theme” as clear as possible, we will give an example of Bss/backend theme: app/design/adminhtml /Bss/backend

Step 1: Create theme.xml file

app/design/adminhtml /Bss/backend/theme.xml

Contents should be:

<?xml version="1.0"?><theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">

<title>Bss Admin Section</title>

<parent>Magento/backend</parent>

</theme>

Then, it is necessary to create the registration.php  file by following these codes:

app/design/adminhtml /Bss/backend/ registration.php

<?php

 \Magento\Framework\Component\ComponentRegistrar::register(

\Magento\Framework\Component\ComponentRegistrar::THEME,

'adminhtml/Bss/Backend',

__DIR__

);

Step 2: Create folder to save media file

app/design/adminhtml/Bss/backend/web

NOTE:

  • Here, we change the logo of admin login page and in dashboard
  • In “web” folder, save image/css/less file as below:
app/design/adminhtml/Bss/backend/web/app/updater/styles/less/components

app/design/adminhtml/Bss/backend/web/css/source/variables

app/design/adminhtml/Bss/backend/web/images

II. Create Module to Declare Theme

First, create new directory < VendorName>/< ModuleName > in the app/code/ directory.

Step 1: Create the registration.php file

In the app/code/Bss/Backend/registration.php, you should add the following code:

<?php

\Magento\Framework\Component\ComponentRegistrar::register(

\Magento\Framework\Component\ComponentRegistrar::MODULE,    

'Bss_Backend',

__DIR__

);

?>

Then, add the folder “etc/” and create module.xml file and di.xml file.

Add code to the app/code/Bss/Backend/etc/module.xml

<?xml version="1.0"?><config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">

<module name="Bss_Backend" setup_version="0.0.1">

<sequence><module name="Magento_Theme"/></sequence>

</module>

</config>

Similarly, add code to the app/code/Bss/Backend/etc/di.xml

<?xml version="1.0"?>

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">

<type name="Magento\Theme\Model\View\Design">       

<arguments>

<argument name="themes" xsi:type="array">

<item name="adminhtml" xsi:type="string">Bss/Backend</item>

</argument>

</arguments>

</type>

</config>

Step2: Create “view/” folder to push all media files and layout

In the app/code/Bss/Backend/view/adminhtml/layout/admin_login.xml add the following code:

<?xml version="1.0"?>

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="admin-login" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">

    <update handle="styles" />

    <body>

           <referenceBlock name="logo">

            <arguments>

                <argument name="logo_image_src" xsi:type="string">images/logo-bss.png</argument>

            </arguments>

        </referenceBlock>

    </body>

</page>

Here is the result when logging in:

how to add admin theme in Magento 2

In the app/code/Bss/Backend/view/adminhtml/layout/default.xml file, add the code:

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="admin-1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">

    <body>

        <referenceContainer name="header">

            <block class="Magento\Backend\Block\Page\Header" name="logo" before="-">

                <arguments>

                    <argument name="show_part" xsi:type="string">logo</argument>

                    <argument name="edition" translate="true" xsi:type="string">Community Edition</argument>

                    <argument name="logo_image_src" xsi:type="string">images/logo-bss-mini.png</argument>

                </arguments>

            </block>

        </referenceContainer>

    </body>

</page>

On completing the upgrade and deploy, you can see the logo to be changed in the Admin Panel.

how to add admin theme in Magento 2

III. Run the module

After all steps, the admin module is already to register to Magento application. Please run the following command:

php bin/magento setup:upgrade

php bin/magento setup:static-content:deploy –f

php bin/magento cache:flush

The module should be displayed in your browser when you open the backend login and after login. Hope this article is helpful.

< Previous Post
Next Post >