How I styled the Admin Dashboard

I wanted to style my WordPress dashboard, purely to see if I could. It wasn't too difficult, and this is how I did it.

In my theme, I found the functions.php file (creating it if it did not exist) and added an 'action' which would come into play when the admin-head() hook was called. In WordPress, there are 'hooks' at various points in the code. These are places which can be used to insert special functions. One such hook is admin-head() which is called in the header section of an admin page.

The file functions.php is where the user can put their php functions. It is wise to be sure you can edit the file (or in extremis delete) theme files without relying on the WordPress interface, as you can cause an error in editing these files which deny you access. If you can use ssh or ftp to see these files, you should be fine. Before you do anything, make a backup. You do this at your own risk, etc. etc.

Into functions.php, between <?php and ?> I inserted a piece of code which would insert into admin pages a link to a stylesheet:

// custom admin theme
function childtheme_admin() {
    echo '<link rel="stylesheet" type="text/css" href="' . get_bloginfo('stylesheet_directory') . '/adminstyling.css" />';
}

Be careful about the single and double quotes in there!

The next step is to create a file called 'adminstyling.css'. This should be in the theme directory.

My admin stylesheet is very simple - and I would love to see some more complex examples.

/* Styling the Admin pages */

#wpwrap {background-image: url(images/backgroundimage.png); position: top left; background-repeat: no-repeat; background-color: #fff; background-attachment: fixed;}

You will also need to place a background image in a subdirectory of your theme, called images.

The final step is to go back to functions.php and tie the function just created to the 'hook' which tells the function when to operate. At the bottom of functions.php add the following:

add_action('admin_head', 'childtheme_admin');

This should go before the final ?> and after the function you just added (usually the add_action statements are the last thing in the file).

If all is well, saving the files and refreshing the admin screen will do several things:

  1. Call your function which....
  2. Inserts a reference to the stylesheet (if needed, check by viewing source of HTML in your browser), which....
  3. Loads the stylesheet (if needed, check the reference is correct by copying the reference from the HTML into the browser bar and seeing that you do indeed load the right file), which ....
  4. Styles your dashboard pages

This is my dashboard following the above modifications

If you try this, I'd be pleased to see a screenshot along with any nice bits of css you used. Do refer me to the appropriate post on your website!