Customizing the WordPress Dashboard by Creating a Simple Admin Theme Plugin

In this post, you’re going to learn how to create a simple Admin Theme for WordPress. An Admin Theme can be used to create your own color scheme for the WordPress Dashboard or make minor tweaks to the theme that is set in your profile.

While the overall default admin theme is slick, there might be few items that you would like to adjust. For example: the font size, link color, background colors, etc. Here are some items that you will be adjusting with your plugin:

• Remove box shadow on links and input fields.
• If you like your Dashboard Home to be clear of all screen options, there are still dashed borders showing where the screen options would go. We’re going to remove those.
• Fill in your adjustments: ______________________________

To make these adjustments, we’re going to follow the official guide that is already available in the WordPress Codex on how to create an Admin Theme.

To start off, create a new folder for your plugin and name it ‘simple-admin-theme’ or whatever name you choose. Open your favorite text editor and create a new file called ‘simple-admin-theme.php’. In this file, you’ll want to paste the following code:

<?php

/*
Plugin Name: Simple Admin Theme
Plugin URI: https://gist.github.com/precode/9ca75a69fe91671b6266
Description: A Simple Admin Theme for WordPress
Author: Precode
Version: 1.0.0
Author URI: http://precode.io
*/

function sat_enqueue_custom_admin_theme() {
    wp_enqueue_style( 'sat-enqueue-custom-admin-theme', plugins_url( 'wp-admin.css', __FILE__ ) );
}
add_action( 'admin_enqueue_scripts', 'sat_enqueue_custom_admin_theme' );

The function that you pasted into your file will properly enqueue your stylesheet that we will be using to add our custom styles for the Admin Theme. Save this file into your ‘simple-admin-theme’ folder.

While still in your editor, you’ll want to create a new file and save it as ‘wp-admin.css’ into the same folder as your PHP file.

Assuming you have WordPress installed, you can now add your admin theme plugin to your WordPress installation under ‘wp-content/plugins’. In your WordPress Dashboard, go to Plugins and you should now see your newly created plugin.

Now the fun part begins. Re-open your ‘wp-admin.css’ file in your text editor. We’re going to keep this stylesheet simple because you are only making minor tweaks to the default Admin theme.

The first item we will be adjusting are the links. We will still keep the same color, but we’re removing the box shadow when clicking a link in the WordPress Dashboard.

To do this, copy and paste the following and save:

a:focus {
    -webkit-box-shadow: none;
    box-shadow: none;
}

After adding the above styles, go back to your WordPress Dashboard and refresh the page. You’ll notice that the box shadow on focus for all links has now been removed. Back in your stylesheet, add the following:

input[type="text"]:focus,
input[type="password"]:focus,
input[type="color"]:focus,
input[type="date"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="email"]:focus,
input[type="month"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="text"]:focus,
input[type="time"]:focus,
input[type="url"]:focus,
input[type="week"]:focus,
input[type="checkbox"]:focus,
input[type="radio"]:focus,
select:focus,
textarea:focus {
    -webkit-box-shadow: none;
    box-shadow: none;
}

This will update all input fields on focus so no box shadow will appear. Next on our list is to remove all screen options on your Dashboard Homepage. Click the ‘Dashboard’ link in your WordPress admin. Click the Screen Options button at the top right of the page and uncheck all options. We are now going to add the following to your stylesheet to remove the dashed border that indicates where the screen options will appear:

.metabox-holder .postbox-container .empty-container {
    border: none;
}

Save your stylesheet and reload the WordPress Dashboard. You’ll see that the dashed borders have been removed.

From there, you can add your own adjustments by right clicking elements in your browser and click ‘Inspect Element’ to get the property name and styles to edit from your browsers’ web inspector.

You have now created your first Admin Theme; essentially, your first WordPress plugin if you have not developed one before! If you like, you can add your new plugin to your GitHub profile for others to build on and or submit it to the WordPress plugin repository. When adding any changes to the default WordPress Admin theme that you might think are actual issues, you can submit a ticket to WordPress Trac and provide a patch to fix the possible issue. If you do not know how to contribute to WordPress, we have a great post for you to read.

If you like this post, be sure to follow us on Twitter @webdevstudios for new tutorials and tips.