How to Create Magento Custom Admin Theme

Mar 3, 2020

72 Diana Zevan

How to Create Magento Custom Admin Theme

What is a Magento admin theme? Why do you need admin themes? How can you create a proper theme in the Magento back office and improve the admin experience? Read on to find out – we spill all the secrets here.

What is Magento admin theme?
Why create a custom admin theme?
How to create Magento custom admin theme
How to change admin theme in Magento
Three best Magento admin theme extensions

Online store admins spend almost all their work time in the back office, so it is important for the sake of their job performance and overall productivity that the admin panel has a clear layout and all the necessary tabs and tools at hand. Magento back office is just like that – large workspace on the right and a compact sidebar on the left, providing immediate access to any place of the online store which a developer manages. However, Magento offers more than that – it is also possible to apply an admin theme to your Magento store, designing your back office the way you want.

In this article, we are going to discuss what Magento admin themes are and look through their benefits for ecommerce. Also, we will outline the process of creating the Magento admin theme and review the top 3 Magento admin theme extensions.

What is Magento admin theme?

A Magento 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 themes – one for a storefront which defines the style and look of the whole online store, and another one 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 panel theme and storefront theme can be downloaded for free or for a certain fee from the official or third-party Magento marketplaces. Another way out here is to create a custom theme, and this is what this article is dedicated to.

Andrey_Dubina

Partner With Us

Let's discuss how to grow your business. Get a Free Quote.
Talk to Andrey

Why create a custom admin theme?

A custom 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.

magento webdesign

Magento Web Design

Build bright ecommerce future with BelVG web designers

VISIT THE PAGE

How to create Magento custom admin theme

If you are not satisfied with the Magento 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 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:


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


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.

how to create admin theme in magento

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.


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

module.xml


di.xml


how to set magento admin theme

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

BelVG magento admin theme

create an admin theme in magento by belvg

How to change admin theme in Magento

If you wish to override a template file for admin theme, the best way to do this is to copy this file from vendor/magento/module_name folder into app/design/adminhtml/< ThemeName >/Module_name.

For instance, we copy the vendor/magento/module-contact/view/frontend/email/submitted_form.html file into app/design/adminhtml/Belvg/newAdminTheme/Magento_Contact/email/submitted_form.html.

If you need to create another admin theme and inherit it from the recently created one, then you can follow the guide we outlined above, and include the recently created theme into the theme.xml file of the parent tag.

What are the best Magento admin theme extensions?

In case you feel the lack of expertise or need time to create a custom Magento admin theme yourself, it is no problem – there is a wide selection of admin themes for Magento available at the marketplaces. We selected the top 3 Magento admin theme extensions and can help you make the right choice.

Magento 2 Development

Magento 2 Development

Take your online store to the next level with BelVG Magento 2 Development

VISIT THE PAGE

Magento 2 Admin Theme

This Magento admin responsive theme is a great tool to simplify and enhance the store admin work. The theme is Retina Ready and user-friendly, supports RTL and has attractive icons for front admin. Magento 2 admin theme also supports automatic translation to the various languages and is frequently updated by the developers, which means constant improvement and new features.

Compatibility: Magento 2.0.0 – Magento 2.1.x
Cost: free.

Magento 1 & 2 Responsive Admin Template

This Magento admin theme has a modern, stylish design of more than 100 pages, easy to install and intuitive to use. Due to its clean and high-quality code, it is simple to customize it further. The theme implements a search tool that allows you to find anything in the admin panel within seconds. Also, a peculiar icon font will make your admin panel look more attractive and peculiar.

Compatibility: Magento 1.9.0 – Magento 2.3.0
Cost: $85.38.

Wunderadmin – Magento admin theme

Change the way your admin panel looks and feels with Wunderadmin theme for back office. The theme allows you to customize the color scheme of the admin interface and upload your company logo, promoting the corporate spirit among the company employees. The theme requires no programming skills and is simple to set up and configure.

Compatibility: Magento 1.7 – 1.9
Cost: $37.

Haven’t found the theme that suits your needs and requirements? Turn to BelVG for Magento custom development and we will create the theme you need from scratch.

Wrapping it up

Hopefully, we’ve clarified all the details about the topic of Magento admin themes. 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 and store admins or owners who are interested in the top-rated Magento admin theme extension. All in all, if you are looking for a reliable Magento development partner to bring your ecommerce vision to life, BelVG is ready to help!

Have any questions or comments? You are welcome to leave them down below!

Andrey Dubina

Partner With Us

Looking for a partner to grow your business? We are the right company to bring your webstore to success. Talk to Andrey

Post a new comment

BelVG Newsletter
Subscribe to our mailing list and get interesting stuff and updates to your email inbox.
Email *