How to Completely Customize the WordPress Admin Interface
If you run a Multisite Network or any WordPress site that allows users to login and view the dashboard screens, you may be a bit frustrated with the WordPress admin screens.
Update: 02/19/2019 Ultimate Branding got a superhero upgrade. Welcome Branda 3.0 with refactored code, an all new UI/UX, new style templates, and bulk module controls.
When your users log in, they’ll see a set of dashboard widgets which might confuse them, they could have access to screens you don’t want them to see, and they’re stuck with the default color scheme.
But it doesn’t have to be this way. With our Ultimate Branding plugin you can customize the admin screens, removing things you don’t want, adding new items such as help text and admin bar items, and changing the color scheme and login logo so it reflects your brand.
In this post I’ll work through a project to rebrand the admin screens of a WordPress installation, something you can easily do in less than an hour. Follow along and your admin screens will be better looking and more relevant for your users.
Installing the Ultimate Branding Plugin
Start by installing the plugin. From the WPMU DEV Plugins screen in your site admin, search for Ultimate Branding:
Select the plugin and click on the Install link to install and activate it:
You’ll notice that a new admin menu item appears, called Branding. This is where you’ll make all the customizations you need.
Enabling Components of the Plugin
The first thing to do is enable those components of the Ultimate Branding plugin that you want to use. You do this on the Branding screen, by clicking on the Enable or Disable link next to each component. I’m going to enable the following components as they offer easy ways to rebrand the admin screens:
- Admin Bar
- Admin Help Content
- Admin Panel Tips
- Color Schemes
- Dashboard Footer Content
- Dashboard Text Widgets
- Dashboard Welcome
- Login Screen
- Rebranded Meta Widget
- Remove WP Dashboard Widgets
Some of the other options are more complicated to use or will make changes to the frontend of the sites in your network if you have Multisite enabled, so I’m not activating them for this project.
To find out about all of the options in Ultimate Branding, see the usage guide.
Here’s my Branding screen with the relevant components enabled:
So now let’s start using those components to brand our admin screens.
The first thing is to add a new image that people will see instead of the WordPress logo when they log in. I’m going to use a logo.
Go to Branding > Login screen. Go to the Logo image item and click the Browse button to find an image from your media library or upload one in the usual way. Make sure your image is an appropriate size (mine is 200px square), or that you select an image size that will work in the login screen. Click Use this image. Click the Save Changes button and your logo will appear in the admin screen:
Now try logging out so that you can see your image on the login screen:
Now your users will know that it’s your site they’re logging into, and not just any old WordPress site!
Removing Dashboard Widgets
Next let’s remove some of the dashboard widgets from the main dashboard screen.
Here’s the dashboard before removing any widgets:
Now go to Branding > Widgets and scroll down to the Remove WordPress Dashboard Widgets section. Select those widgets you want to remove. I’m going to select the following:
- Quick Draft Drafts
- WordPress Events and News
My site users don’t need to see this content and I want to make the dashboard as uncluttered as possible for them, so I’ll just leave the At a Glance and Activity dashboard widgets in place.
If you want to add your own welcome widget, type the text in the Dashboard Welcome metabox at the top of the screen. You can see that I’ve done this in the screenshot:
Now click the Save Changes button.
Return to the main Dashboard screen and you’ll see it looks quite different:
Let’s make some more improvements. I’m going to drag the Activity widget up to the space on the right to balance things up a bit. I’m also going to add headings to the welcome widget by adding some HTML to that widget.
Go back to Branding > Widgets, click on the Text tab in the Custom Dashboard Message metabox, and edit your text. I’ve added this code:
<h3>Welcome!</h3> Welcome to this website! Use the admin screens to add content to the site and edit existing posts, pages and media.
Click the Save Changes button again and go back to your dashboard screen:
You could use this welcome widget to add anything you wanted, such as links to external sites, lists of content types in the site, and tips on managing a site. Note that whatever you do add, you’ll have to code with HTML using the Text tab in the Custom Dashboard Message metabox.
Now let’s move on to editing the help content.
Creating Custom Help Content
By default, WordPress provides help content via the Help tab you can see ta the top of every admin screen. But Ultimate Branding lets you take this further buy adding your own bespoke help content. This is useful if you’ve customized the site or the admin screens and you want to provide your users with tips on how everything works. For example if you’ve added some custom post types, you might want to tell suers how these work and what sort of content they’re designed to display.
Go to Branding > Help Content to view the Custom Help Content screen. There are three panes provided to let you add custom help content:
- Help Content – this is the main help tab, where you add your main help content.
- Add New Help Item – this lets you add extra pages to the Help tab
- Help Sidebar – this is the area to the right of the Help tab, which will display whichever help item users are looking at.
Editing the Main Help Item
To edit the main help item, change the text in the Help Content metabox and click the Save Changes button. You can see the new help text I’ve added in the screenshot:
Adding Extra Help Items
Now add some extra help items as needed. To do this, scroll down to the Add New Help Item metabox and add your title and text.
To save your item, click the Add button at the bottom of the meta box and then click Save Changes. You’ll see your extra help item when you open the Help tab:
You’ll notice that your extra help item is now added as a metabox under Existing Help Items and the Add New Help Item metabox becomes empty. You can then repeat the process above as many times as you need to add extra help items. I’d advise against adding too many though, as you’ll confuse your users.
Adding Help Sidebar Text
You can also add text which will show up in the sidebar of the Help tab, no matter which help item users have open. This is only really useful if you’ve added multiple help items, but can be a good place to put brief information that you want users to be able to see all the time, for example tips on which help items to use for what.
Scroll down to the Help Sidebar metabox and add your text:
Click the Save Changes button and you’ll see your help text in the sidebar:
So that’s some help text added. You can also add your own text to the footer of the admin screens.
Creating Custom Footer Content
Now let’s add some custom content to the admin footer. To do this, go to Branding > Footer Content.
You can edit the footer content for two footer areas:
- Global footer content displays in the front end of the sites in your network if you have WordPress Multisite enabled. Here you can add some information about your network and a link to the page for creating a new site, perhaps. I don’t have this enabled so it doesn’t show up on my admin screen but if you do, this is where you’ll find it.
- Dashboard footer content is added to the footer in the admin screens for all the sites in your network, or just for your site if you don’t have Multisite enabled.
These two options need to be enabled separately in the main Branding screen.
We’re focusing on the admin screens here so let’s just edit the dashboard footer content.
In the Custom Footer Content screen, add your text in the Dashboard Footer Content metabox. As you can see in the screenshot I’ve added a link to mine:
Click the Save Changes button and you’ll see your footer content on every admin screen:
Creating a Color Scheme
In my view, one of Ultimate Branding’s most powerful features is the ability to customize your admin color scheme. This means that when users log into your site, they’ll see a dashboard that looks less WordPress, more you. I have some brand colors that co-ordinate with my logo so I’ll create a color scheme with those.
Go to Branding > Color Schemes and scroll down to the Color Scheme Name section. If you scroll down you’ll see that there are plenty of colors you can change. Take some time editing these so that they reflect your brand colors. I’d advise against going overboard: I’m using just four brand colors plus black and gray. You might also want to rename the color scheme from Ultimate to something more personal to your brand.
I’ve spent some time developing a color scheme for my brand which you can see in the Color Schemes admin screen:
Now scroll back up to the Global Options section and select the Force Admin Color Scheme dropdown list. Select your color scheme. Repeat this for the Default Admin Color Scheme dropdown list.
Finally click the Save Changes button to save your changes. You’ll see that your admin colors change instantly.
You might find that once you’ve done this you want to go back and make some tweaks based on how the admin colors are looking: keep saving your changes until you get it just right.
Adding an Admin Message
The admin message option lets you add an alert to the top of your admin screens: useful if you want to let your users know something important. I’d stick with using this as a temporary option, as if you leave the message there permanently, it may get ignored. You could use it to alert your users to any problems, let them know about new features, or point them to some useful new content.
To add an admin message, go to Branding > Tips. Click the Add New button and the screen for adding your tip will appear. Add it in the same way as you’d add a normal post, then elect where you want it to appear in the admin screens form the checklist on the right.
I’\m selecting Everywhere as this is an important message. But you could use it in specific places such as on page editing screens to tell people how to edit pages.
Here’s my message:
Once you’ve created yours, click the Publish button to see your message at the top of every admin screen:
Once the useful time period of your message has expired, simply delete the text (leaving the Message field blank) or disable the admin message feature in the Branding screen.
Customizing the Admin Bar
Being able to customize the admin bar will let you edit the menu items in the admin bar and add your own too. This is a good way to help your users find the right thing quickly, as they won’t be distracted by admin bar items they don’t need.
Removing Items from the Admin Bar
To customize the admin bar, go to Branding > Admin Bar, to view the Custom Admin Bar screen.
Check the menu items you want to hide and select which user roles this will be affected by. This means that if you deselect Administrator for example, you as the site administrator will still see all the menu bar items.
Here’s my admin bar with some items removed:
Adding Items to the Admin Bar
You can also add extra items to the admin bar, for example a link to your main site if you’re running a network of sites, or a direct link to the screen for adding a specific content type.
Scroll down and click the Add New Parent menu button. This will display a meta box that you can sue to add a new link to the admin bar. I’m going to add a link to the WPMU DEV blog.
Type in the name of your item, which is the text users will see, and details of where it leads to. In my case I’m selecting an external URL. Select Open in new window if you want the link to do that, and the user roles this link will be shown to:
You can also add an icon:
Finally, click Save changes and your new item will appear in the admin bar:
Customizing your site or network’s admin screens gives your site a more professional image and helps to distinguish it from an off-the-shelf WordPress installation. If you’re running a network or allowing users to log in to your site, it enhances your brand and will make it stand out.
The Ultimate Branding plugin makes it easy for you to brand your admin screens and make them more user-friendly with no code. By following the steps in this post you’ll have a more polished, individual admin area for your site.