Customize Your WordPress Admin with the Material WP Plugin

With each update, the features and functionality behind WordPress continue to improve. But when it comes to the WordPress admin interface, it's pretty much looked the same for years, even when WordPress 3.8 tried to bring us a fresher design. This has opened the door for WordPress plugin developers to create WordPress admin themes that allow for unique, custom-branded interfaces. One such offering is a premium plugin called Material WP, from the people at 732.
Share on facebook
Share on twitter
Share on email
Share on facebook
Share on twitter
Share on email

With each update, the features and functionality behind WordPress continue to improve. But when it comes to the WordPress admin interface, it’s pretty much looked the same for years, even when WordPress 3.8 tried to bring us a fresher design.

This stagnancy in the WordPress admin opened the door for WordPress plugin developers to create WordPress admin themes that allow for unique, custom-branded interfaces.

One such offering is a premium plugin that’s available from CodeCanyon called Material WP, from the people at 732.
material-wp-intro

732 is the company behind several premium WordPress plugins, and Material WP brings elements from Google’s Material Design language to help freshen up and completely redesign the WordPress admin.

For example, Material WP includes a Parallax Block, often used to create a parallax effect for a sense of depth and movement when the WordPress admin page is scrolled or resized.

With impressive design and support, the Material WP plugin has some very good things going for it. It offers a variety of features that help you change the look and feel, as well as the functionality of the WordPress admin and login page, whether you’re wanting to freshen up your own user experience, or are looking to brand the WordPress interface for your clients.

Material WP Features

Material WP comes with many features to help customize your WordPress user experience, including:

• The ability to change admin interface colors, menus, and the size of the admin menu and Parallax Block. This gives you control over the real estate of your admin screen.

• When choosing colors for admin buttons and toolbars, Material WP uses luminosity tests to automatically find the best text color to be shown over these elements.

• Material WP can set random colors for the WordPress admin menu icons, or you can set your own color.

• Material WP allows you to change the height of the WordPress admin bar and its subitems.

• With Material WP, you can set your own custom menu label. If you wish, you can also place the admin menu on the right side of the screen.

• Through a drag-and-drop interface, each user can reorder the admin menu items however they wish. You can also customize which menus different users can access on the WordPress admin Dashboard.

• For the Parallax Block feature, you can select a preset background, use a color background, or create a custom image background. The Parallax Block also comes with an opacity transition effect that you can turn on or off.

• Material WP allows you to customize and brand your WordPress login page, including custom backgrounds, colors, and logos.

• Users with knowledge of Cascading Style Sheets can further customize the WordPress Admin and login page through a custom CSS field.

These dynamic CSS styles are cached by the plugin for reduced load time and enhanced performance. Material WP also supports SCSS syntax for faster writing and maintenance of your stylesheets.

• Material WP supports WordPress Multisite installs so that you can easily make global changes to the WordPress admin across each site in your network.

• Import and export features allow you to easily save and retrieve your Material WP settings for other sites. This can be helpful if you do work for many clients and want to avoid having to set up each client area from scratch.

• Material WP has Right-to-Left (RTL) language support and is translatable to other languages.

• Material WP is mobile compatible and responsive.

Setting Up Material WP

If you’ve never used a WordPress admin theme like Material WP, you should know that they come as plugins, not as a “theme” in the usual nomenclature of WordPress. Like a typical WordPress theme, Material WP does change the appearance of WordPress, but in this case the change is in the backend.

You install Material WP like any other plugin by going to your WordPress admin’s Plugins menu and selecting Add New. From there, click on the Upload Plugin button and choose the Material WP file you downloaded from CodeCanyon. For uploading through WordPress, the plugin file needs to be in a .zip format.
material-wp-icon

After you activate the plugin, you’ll see the Material WP link under the Main Menu sidebar in the WordPress admin (see above). Just click on the Material WP link to get to the settings page for the plugin.

How to Use Material WP

After you install Material WP, one of the first things you’ll notice are the five tabs that are the gateway to its options. These tabs are:

Styling Settings
Functionality
Custom CSS
Import/Export
Activate Material WP
material-wp-styling-settings

Styling Settings

The first tab in Material WP is Styling Settings. From this tab, you can set options for color, size, and images within your WordPress admin.
material-wp-primary-color

The very first option is for the Primary Color. The color you set here will be the background color for the WordPress admin bar at the top of the screen (see above). This color also sets the text link color throughout your WordPress admin.

The Accent Color option below it sets the color for any buttons that are displayed throughout the WordPress admin.

Material WP also gives you the ability to set the color of the icons that are shown in the WordPress admin menu.
material-wp-menu-icon-color1

By default, Material WP sets the menu icons to Random Colors, which are bright and colorful as shown above. By turning off the Random Colors option, the menu icons revert back to the default admin colors for WordPress. You can also set your menu icons to any Custom Color you want.
material-wp-admin-menu

Within the Styling Settings, you cause also change the width and height of different items within your WordPress admin, such as the admin menu width as shown above.

Parallax Block

The Parallax Block is a primary feature of the Material WP plugin. As a background element, it provides a visual effect of depth along with an optional opacity effect whenever scrolling or changing the window size.

Within the Styling Settings tab, you have the option of selecting from several preset images, choosing a custom color, or creating your own image for the background (see below).
preset-parallax-block-bgs

parallax-block-bg2

parallax-block-settings3

parallax-block-bg3

Custom Logo

Finally, within the Styling Settings tab is the ability to display your own custom logo within the WordPress admin.

As shown below, after choosing the logo, it will appear in both the admin bar and your WordPress login page. Of course, your custom logo can be whatever you wish, including text.

material-wp-custom-logo2

material-wp-custom-logo3

Functionality

The Functionality tab for Material WP controls different functions for the WordPress admin menu, frontend admin bar, login page, and the WordPress Help and Screen Options links.
material-wp-functionality-admin-menu

One of my favorite features of Material WP is the ability to reorder the menu items in the admin. The Menu Reordering option is enabled by default, so all you need to do is click the Edit Menu link at the bottom of the menu (see above). From there, you reorder menu items by simply dragging-and-dropping them into whatever order you want.

You can also customize the menu label that appears at the top of the admin menu, and if you wish, place the menu on the right-side of the admin screen, as seen below.
material-wp-menu-right

Material WP comes with other options in the Functionality tab, including:

• The ability to disable the plugin’s custom styles in order to have the default styles for the frontend of the WordPress admin bar.

• The option to change your logo’s link on your WordPress login page. The default link destination goes to your site’s homepage when you click on the logo.

• The option to hide the “Back to Blog” link on the login page.

• The option to hide the Help and Screen Options links for the WordPress admin.

Custom CSS

If you’re familiar with Cascading Style Sheets, Material WP gives you the ability to design and change the WordPress dashboard to your heart’s content.

The Custom CSS tab provides a place to enter any CSS you wish, and even supports SCSS syntax for easier writing and care of your stylesheets.
material-wp-custom-css

In this simple example shown above, I was able to apply basic CSS code to quickly change attributes of the WordPress admin menu label.

Import/Export

The Import/Export tab allows you to save your Material WP settings and bring them into other WordPress installations.

This feature saves all of the customizations you make to your WordPress admin, including any changes made through the Custom CSS tab.
material-wp-import-export

Activate Material WP

The Activate Material WP tab is straightforward and simple. Its main purpose is for entering your purchase code and receiving automatic updates for the plugin.

Material WP Support & Documentation

Support

I think we’d all agree that a product with poor support is essentially worthless. But thankfully, in regards to Material WP, customer support by the developer looks to be excellent.

After looking into customer reviews, enquiries (including my own), and response times, I can say the support by 732 for Material WP is fast, friendly, and responsive to feedback, questions and suggestions. I also found that it was not uncommon for customer feature requests to be incorporated into future releases of the plugin.

While the official support time for the plugin is listed as 24 hours, the support at 732 has been known to occasionally reply within five minutes of an inquiry.

According to CodeCanyon, item support includes:

• Availability of the author to answer questions
• Assistance with reported bugs and issues
• Help with included 3rd party assets

According to CodeCanyon, item support does not include:

• Customizations
• Installations

Documentation

As far as documentation, Material WP is a plugin that is pretty self-explanatory in its usage. After having used the plugin for a few minutes, I found it easy to grasp the different features and options without any extra documentation.

That being said, the plugin ships with a PDF document that gives a good idea of the mechanics of Material WP, and how to change its settings. However, at the time of this publication, the head-developer of Material WP stated that updated documentation for the plugin would be part of a new release of Material WP in the near future.

Material WP is designed with Google’s admin page guidelines in mind and works smoothly with the vast majority of third-party WordPress plugins. There may be rare incompatibilities with other plugins when third-party plugin developers fail to follow the WordPress guidelines on implementing their plugin’s admin page. In such instances, 732 has stepped up to the plate and fixed such incompatibility issues for their users.

Pricing for Material WP

The price for Material WP is $15 for a regular license through CodeCanyon.

According to CodeCanyon, an extended license is required if your end user must pay to use the end product. In this case, an extended license for Material WP is $75.

The price includes all future updates of the plugin, along with 6 months of support from 732. For just $4.50, you can extend support to 12 months.

Conclusions & Recommendations

The Material WP plugin for WordPress—inspired by Google’s Material Design language—gives users the opportunity to ditch the look of the WordPress admin and login page, and take it to another level with new style and functionality.

The developers behind this plugin do it in a way that includes beautiful design, impressive customer support, and a strong adherence to the WordPress admin guidelines.

And because Material WP also uses very little JavaScript and uses CSS for its styling, it offers users a plugin with clean code that’s highly compatible with other plugins.

But like anything, it’s not perfect. For instance, I thought it would be nice to see live previews for some of the features under the Styling Settings tab, such as when changing the width of an element with the slider.

And I found the unresponsiveness of the top-level admin menu links to be a bit of an inconvenience. For example, when you click on “Plugins” in the WordPress admin menu, instead of going to your plugins, it reveals the submenu. From there, in order to get to your plugins, you need to click on “Installed Plugins” from the submenu. In other words, two clicks required instead of one. Not a deal breaker to be sure, but not what you’re used to when working within the default WordPress admin menu.

That being said, with Material WP, there are a number of things that you won’t be “used to” when it comes to the WordPress admin. Such as, you won’t be used to the abundance of new features and functions you now have at your disposal for making the admin look and behave the way you want.

And 732, the company behind Material WP, appear to be dedicated to improving and growing the features of the plugin. For instance, at the time of this writing, the people behind Material WP were considering adding the ability to apply custom font styles to different elements within the WordPress admin.

Wrapping up, if you’re a WordPress user who’d like to dress up or customize the WordPress admin, or you’re an agency or freelancer that wants to rebrand or simplify the backend of WordPress to give your clients a better user experience, you should give Material WP a hard look.

If you’re interested in Material WP, you can check out a demo version of the plugin at CodeCanyon.

Table of Contents
Our Sponsors
Our sponsors

Leave a Reply

Your email address will not be published. Required fields are marked *

Stay up-to-date with the Mayor
Sign up to receive one weekly email about our latest reviews, tutorials, giveaways and more.