Creating a WordPress Plug-in to customize the Dashboard

I’ve used many different plug-ins to accomplish the simple goal of modifying the dashboard to match the look and feel with the rest of the site. Some worked, some didn’t. And some were needlessly complicated. I thought “I bet this would be much easier if I just wrote my own custom CSS.”

But I didn’t want to mess with any core files, so I figured “Hey, if these plug-ins were loading additional CSS, I can too.” So I spent a bit time looking into how you write a plug-in and found it was really easy to load a CSS file.

This walk-through will go through the simple steps of creating your own WordPress plug-in that loads your own CSS file to the dashboard.

The first step we need to do is to create the folder for your plug-in and the default file. I created my plug-in for The Recipe Folder, so my folder is called “recipe-folder-admin-theme” and the default file is called, you guessed it, “recipe-folder-admin-theme.php”.

The contents of this file is similar to creating your own theme. In a php code tag add something like this:

/*Plugin Name: The Recipe Folder Admin Theme
Plugin URI: http://www.therecipefolder.com
Description: Custom Recipe Folder Admin Theme
Author: Daniel Gray
Version: 1.0
Author URI: http://demo.therecipefolder.com*/

Adjust to match your details. This adds the necessary information for WordPress to identify your new plug-in. To make the Dashboard load your custom CSS file, add the following lines (extra line breaks added to keep the post within the column of this post):

function my_wp_admin_css() {
echo 'css"
type="text/css" />';
}
add_action('admin_head','my_wp_admin_css');

As you can imagine, the CSS file can live pretty much wherever you want. You could host it remotely if you want to distribute changes automatically, though if you release it as a plug-in to people, they may not be fond of loading content from another source.

The add_action with the flag “admin_head” tells the plug-in where the function should be executed. In this case, the my_wp_admin_css function simply echos a link to a CSS file in the header of the admin page, which is the dashboard.

After that, it’s creating your CSS file and adjusting style to your heart’s content. Power up Firebug and start going to town.

A customized dashboard

Any questions or comments, be sure to leave them here!

Leave a Reply

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