Justin S. Lewis

WordPress Theme Developer

Customizing your WordPress dashboard without plugins: Part 1

March 5th, 2011 · No Comments · CSS, Functions, Tutorials

Most WordPress users will probably never have a need to customize the WordPress dashboard other than with the built-in options WordPress already provides i.e. the Screen Options located at the top right of the dashboard and the Personal Options located on your Profile page. Those of us who use WordPress to build websites for clients often do have a need to customize the dashboard for our clients. When I first started out designing for clients I used the excellent Custom Admin Branding plugin. Recently, I’ve been trying to eliminate the need for as many plugins as possible. This post will deal with adding a custom logo to the header, custom header CSS, and a custom footer. The next post will demonstrate how to add or remove parts of the dashboard. All of these tricks require editing your theme’s functions.php. If your theme does not have this file you will need to create one.

First, create your custom logo. The image should be 32 by 32 pixels wide. Upload the image to your theme’s image folder. Add the following code to your theme’s functions.php.

//Dashboard Logo
add_action('admin_head', 'custom_dashboard_logo');

function custom_dashboard_logo() {
echo '<style>#header-logo {
 background-image: url(
 '.get_bloginfo ('template_directory').'/images/dashboard-logo.gif)
 !important; } </style>';
}

In my example, I named the image dashboard-logo.gif. You can name it whatever you want but make sure it matches the CSS.

How to customize your WordPress dashboard header CSS:

Open up your theme’s function.php and add the following code:

/* Change WordPress dashboard CSS */
function custom_colors() {
echo '<style>#wphead{background:#ffffcc;} #site-title{color:#000000;}</style>';
}
add_action('admin_head', 'custom_colors');

I used the #wphead and #site-title in my example but you can overwrite any of the header css with this function.
How to customize the footer text:

Add this to your theme’s functions.php.

//Dashboard Footer
function remove_footer_admin () {
    echo 'Powered by <a href="http://www.wordpress.org" target="_blank">WordPress</a> | Designed by <a href="http://www.yoursite.com" target="_blank">Your Name</a></p>';
    }

    add_filter('admin_footer_text', 'remove_footer_admin');

Tags: ·

No Comments so far ↓

There are no comments yet...Kick things off by filling out the form below.

Leave a Comment