In the first five parts of this series, I showed you how to customize the WordPress admin in a variety of ways, including customizing the login screen, dashboard and post editing screen.
In this tutorial you'll learn how to add some styling and branding to your admin screens. Specifically you'll learn how to:
customize the admin screen footer and style it
style admin menus
style links and buttons
I'm going to create a plugin to do this - if you've already created a plugin after following Parts 1 to 5 of this series you may prefer to add the code from this tutorial to that plugin, giving you one plugin with all of your admin customizations.
What You Will Need to Complete This Tutorial
To complete this tutorial you will need:
A WordPress installation
Access to your site's plugins folder to add your plugin
A text editor to create your plugin
Setting Up the Plugin
As I'll be including images and stylesheets with this plugin, I'm creating a folder for it rather than a single PHP file. Inside that folder I'll create a PHP file which will contain the core functions in my plugin.
This means that I have a folder called wptutsplus-customizing-admin6-styling, in which I have two folders - images and css, and one PHP file.
At the beginning of that file, I'm adding the following lines:
The Starting Dashboard
Because I've already made some modifications to the dashboard in the earlier parts of this series, it doesn't look the same as the default dashboard. The screenshot below shows what I'm starting with:
In this tutorial I'll add some styling to incorporate different colors, which could be used to reflect your own brand.
1. Setting Up the Stylesheet
Before I do anything else I'm going to set up the stylesheet properly. Instead of using the wp_enqueue_scripts hook as you would if adding a stylesheet for use in your website's front end, you use admin_enqueue_scripts instead.
So, in your plugin, add the following:
You'll also need to create a stylesheet in the /css directory in your plugin's folder, which is where you'll add styling later on in this tutorial.
2. Amending the Footer Text
The default footer text in WordPress reads 'Thank you for creating with WordPress'. If you're running a multisite installation or developing for clients, you may want to refer to your own brand here instead. Luckily this can be done using the admin_footer_text filter.
I'm going to change the text and add a logo as well, so I'll create an /images directory in my plugin's folder and add my logo to that.
In your plugin's main file add the following:
This adds the new image and footer text as shown in the screenshot:
However the image is a little large, even though I've uploaded a small one. It's also way too close to the text. To correct that, you add some styling to the stylesheet which you've already registered.
In the stylesheet you've created for your plugin, add the following:
Now the image is the correct size:
3. Styling the Admin Menu
In Part 3 of this series, I showed you how to customize the content of the admin menu - now I'll demonstrate how to customize the styling. I'm going to change the colors quite drastically - you may or may not like the result, but it shows how to do it!
In the stylesheet you've created, add the following:
This results in some very different colours for the admin menu:
the background is dark grey
submenus are white with grey text
links are white
the active page has a red background
The trickiest element to restyle is the arrow pointing to the current page or to a submenu - this is styled using the .wp-menu-arrow element and the .wp-menu-arrow div element inside it. The great thing is that WordPress uses pure CSS to achieve this arrow and not an image, so once you've identified the elements to target, you can change its color using CSS.
The dashboard now looks like this:
4. Styling Links
I want my links to reflect the brand colors I've used for the dashboard menu - in particular I want to change the shade of red used when links are hovered over or active.
In the stylesheet, add the following:
This tweaks the red of my links as shown in the screenshot:
5. Styling Buttons
The final styling change I want to make is to buttons. I'm going to change the color of buttons in the admin screens, both when they're active and inactive. This is to draw attention to them and also to tie in with the menu colors.
In the stylesheet, add the code below:
This changes the background and border colors for buttons both in their default state and when they're hovered over or active. The screenshot below shows the default state:
And this is the color when a button is hovered over or clicked:
And that's all of my styling - done!
Summary
In this series I've shown you six different techniques for customizing the WordPress admin.
I've covered:
Creating a custom login screen with your own logo and colors
Customizing the dashboard by adding and removing content
Creating custom admin menus to help your users
Adding help text to editing screens to help your users edit their site
Customizing the listings screens to display only what your users need
Styling the admin screens to reflect your brand and/or make color chnages for UI or to tie on with a site's front end
Hopefully, this has given you some inspiration to come up with ideas of your own.
WordPress is a truly great Content Management System, with some customization you can make it your own, and give your users and clients an experience which is adds extra help for them and also reflects your brand.