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:
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.
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.
