Magento admin theme: The definition, how to create and apply it

Capture

In this article, we are going to discuss what Magento admin theme is and look through their benefits for ecommerce. Also, we will outline the definition and the process of applying the Magento admin theme.


What is Magento admin theme?

A theme is a combination of styles, images, layouts and templates. Together, these elements form a Magento application component or a theme that creates a consistent visual design for the area it is intended for. There are two types of Magento admin theme – one for a storefront which defines the style and look of the whole online store. And another Magento admin theme for an admin panel defining the outer look of the Magento back office.

Out-of-the-box Magento comes with two default themes – Luma, the theme for demonstration, and Blank, which can be used as a basis for a Magento custom theme design. Although implementing the default themes into the live store is not prohibited, it is strongly advised to apply an individual design that will single out your store and underline its uniqueness compared to the others. Also, if you make changes to the default themes, they will eventually be overwritten when the new version is introduced. The new theme can be a standalone one or inherited from the default or any existing ones. However, when the theme is inherited, you as its owner can change only certain theme files in it, while the rest of the files will be inherited from the parent theme.

Magento admin theme

Magento admin theme and storefront theme can be downloaded for free or for a certain fee from the official or third-party marketplaces. Another way out here is to create a custom theme, and this is what this article is dedicated to.

Why create a custom Magento admin theme?

magento admin theme

A custom Magento admin theme is the one that was built from scratch and it has several important advantages, opposed to a ready made one. The process can be compared with building a house from scratch or purchasing a complete one. Definitely, using a default theme is less time-consuming in terms of development but it is not going to be tailored and you are likely to experience some inconveniences which will eventually also cost time.

1. Get rid of distrustive unnecessary theme components.

When it comes to ready-made templates, you get the components set by a developer and designer for an average user. Half of them you may not even need or never use – it can be destructive and overwhelming. At the same time, plenty of useless features can result in slower loading speed of your website. While creating a theme from scratch, you know what you need and what you want to get. As a result, you get a theme with “stuff” customized to meet your business needs.

2. More customization opportunities and easier updates.

In most cases, any kind of customization can be complex for ready-made themes. While custom ones can always be changed and improved by a developer. Using a theme designed for your business, you get a product that can be upgraded in the future when the new features come out.

3. Warranty and support.

Using a custom admin template, you can get access to the support from developers. It means that out-of-the-box solutions should not scare you off when you think about the future. If anything goes wrong with your custom theme developed by a professional team, you can rely on them to fix the problem as soon as possible. They understand the importance of keeping the high level of their services. Warranty that comes with most of the custom themes will also ensure your online store safety.

4. Bug fixes

Whenever you find a bug or see any problem with the theme, you don’t have to wait for the future theme update to get the problem solved. With a custom theme, you inform your developers about the existing issue and get help. Moreover, they should provide you with a website testing to avoid any unexpected problems and fix all the possible bugs before they damage your business or job performance.

Discover our step-by-step guide with the process of creating a custom admin theme in Magento 2 and take your online store management experience to the next level.

How to create Magento 2 admin theme

If you are not satisfied with admin themes available at the official or third-party marketplaces and possess the necessary development skills and knowledge, following our guide you can simply create and set a Magento 2 admin theme for your ecommerce. Let’s find out how you can do it:

Step 1: set Magento 2 in Developer mode by executing the php bin/magento deploy:mode:set developer command. 

Step 2: create a folder for the new Magento admin theme < VendorName>/<theme_name>  at the route app/design/adminhtml.

In our case, we’ve got app/design/adminhtml/BelvG/newAdminTheme.

Step 3: create a theme.xml file and insert the following content:

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

Step 4: create registration.php with the following content:

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
   \Magento\Framework\Component\ComponentRegistrar::THEME,
   'adminhtml/BelVG/AdminTheme',
   __DIR__
);

Step 5: create the folders for the necessary changes.

For instance, we created a new app/design/adminhtml/Belvg/newAdminTheme/web folder for media files.

At this point, we have already created the theme, but it is still not connected. To connect the admin theme, we create a specialized < VendorName>/< ModuleName > module in the app/code/ folder.

Step 1: create a registration.php file.

<?php
 
\Magento\Framework\Component\ComponentRegistrar::register(
   \Magento\Framework\Component\ComponentRegistrar::MODULE,
   'Belvg_AdminTheme',
   __DIR__
);

Step 2: create etc/ folders and the module.xml and di.xml files in it.

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="Belvg_AdminTheme" setup_version="1.0.0">
    <sequence>
        <module name="Magento_Theme"/>
    </sequence>
   </module>
</config>

 

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">Belvg/AdminTheme</item>
        </argument>
    </arguments>
   </type>
</config>


Step #3:
execute the following commands to register the module:

php bin/magento setup:upgrade

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

php bin/magento cache:flush

Wrapping it up

Hopefully, we’ve clarified all the details about the topic of Magento admin theme. We believe the information we provided is useful to both developers who are searching for a clear guide on how to create a custom Magento admin theme. Have any questions or comments? You are welcome to leave them down below!

Level up your website with ArrowHiTech – official partner of Magento

Our own Magento development support services is plus the option for monthly support packages. It is to make sure your online business always remains in top form. And of course, there are countless other developer websites that can be easily found and perused as well.

Capture

ArrowHiTech Development Agency

Our Magento 2 Products:

Capture

Magento 2 Theme collection on themeforest.net

Capture

Some extensions of Magento 2 extensions collection on magesolution.com

265 Total Views 1 Views Today