You can customize just about everything in WordPress, but quite often we forget about the dashboard. As an admin we spend more time in the dashboard than anywhere else so why not make it look pretty and function the way we need it to. This can be useful for client work as well, the more you can make the overall experience enjoyable the better. Clients love to see their logos and colours used on the login page and dashboard, and if you are running a community site where your users register, there is a world of possibilities in terms of offering them a more unique back-end experience.

As a designer/developer I dug into the core early on (ver 2.0), wanting to get a better understanding of how WordPress works and how I can customize the overall experience for my clients. I’ve designed custom login pages and dashboards for almost every WordPress project I’ve worked on since.

If you have even a basic understanding of CSS and are familiar with how the basics of PHP works in WordPress you can do more than you think quite easily.

How to get started
There are essentially 3 ways we can customize the dashboard.

1. plugins (don’t always meet every need)
2. core files (can change with every new version of WP)
3. functions.php (flexible and simple)

After reading quite a few posts over at wprecipes and wpbeginner, I recommend/prefer using the functions.php file, it’s cleaner, and more flexible when it comes to versioning.

First, let’s take a look at the basic architecture of the dashboard or for the sake of this discussion the admin area. Everything you need to get started is located in the wp-admin directory.

wp-admin (what we need)

• login.css
• dashboard.css
• wp-admin.css
• admin.php
• admin-header.php
• admin-footer.php
• menu.php

These files will allow you to make basic changes to the overall look and feel.

Login Page
Here are 2 great examples

source http://www.wpbeginner.com/showcase/best-of-best-wordpress-custom-login-page-designs/

source http://www.wpbeginner.com/showcase/best-of-best-wordpress-custom-login-page-designs/

Open login.css and you can modify the colours, images, and the form. There are also a handful of plugins available, here are 2 you should check out Custom Admin Branding and BM Custom Login . You should also read “Best of Best WordPress Custom Login Page Designs” by wpbeginner.

You can also add a few lines of code to your functions.php file and achieve the same outcome without having to install a plugin or a lot of coding.

Open up your functions.php file or create one if the theme you’re working on does not have one and add the following code to add a custom logo on the login page.

function my_custom_login_logo() {
echo '<style type="text/css">
h1 a { background-image:url('.get_bloginfo('template_directory').'/images/login_logo.png) !important; }
</style>';
}

The above code modifies the default h1 class by changing the background image to a custom logo file stored in your themes images directory.

Admin Header
If you wanted to change the dashboard logo (top left corner) you could modify admin-header.php. You can also change the visit link and welcome message.

<img src="../wp-includes/images/blank.gif" alt="" width="32" height="32" /> <h1 id="site-heading" <?php echo $title_class ?>><a href="<?php echo trailingslashit( get_bloginfo('url') ); ?>" title="<?php _e('Visit Site') ?>"><span><?php echo $blog_name ?></span> <em id="site-visit-button"><?php _e('Visit Site') ?></em></a></h1>

To change the logo we need to edit line 104 (depending on your editor) or look for img id=”header-logo

All you need to do is change the img src to point to your logo file. One other thing I like to modify is the visit link. Why does it open in the same window? I’m not sure about you? but when I’m working I rather have it open in a new window, so I add target=”_blank” in the href tag.

One more thing you may want to change is the welcome message in the top right corner, “Howdy, webmaster”.

Go to line 108 or search for howdy

<p><?php printf(__('Howdy, <a href="%1$s" title="Edit your profile">%2$s</a>'), 'profile.php', $user_identity) ?>

Change Howdy to whatever you want, simple!

Now, here’s how to do it using functions.php:

add_action('admin_head', 'my_custom_logo');
function my_custom_logo() {
echo '<style type="text/css">
#header-logo { background-image: url('.get_bloginfo('template_directory').'/images/dash_logo.png) !important; }</style>';
}

Admin Footer
Open admin-footer.php and go to line 23 or search for admin_footer_text

echo apply_filters( 'admin_footer_text', '<span id="footer-thankyou">' . __('Thank you for creating with <a href="http://wordpress.org/">WordPress</a>.').'</span> | '.__('<a href="http://codex.wordpress.org/">Documentation</a>').' | '.__('<a href="http://wordpress.org/support/forum/4">Feedback</a>') ); ?></p>

Now add your own text, links, and images.

Now, here’s how to do it using functions.php:

function remove_footer_admin () {
echo "Your own text";
}
add_filter('admin_footer_text', 'remove_footer_admin');

Widgets
Creating custom widgets are very useful and a lot of fun. Let’s add a simple ads window that will be viewable to all users logged in. I’m only going to show you how to do this in functions.php, it’s a lot easier. However, if you are feeling adventuress you can do this in the core.

To modify the core open dashboard.php located in wp-admin/includes/. You will notice all the main dashboard widgets are at the top of the file ending around line 50 in my editor. You can also play around with the current widgets, for example you can change the default WordPress dev feeds to any feed you want. I usually load feeds from my other blogs or resource sites.

…ok, so let’s add a widget using functions.php.

Add the following code to you functions.php file:

add_action('wp_dashboard_setup', 'my_custom_dashboard_widgets');

function my_custom_dashboard_widgets() {

global $wp_meta_boxes;

wp_add_dashboard_widget('custom_ad_widget', 'Ads', 'custom_dashboard_ad');

}

function custom_dashboard_ad() {

echo '<p>Check out some other cool stuff</p><br /><img src="http://www.dropthedigibomb.com/dropit.jpg" />';

}

A few things to note: The second last line is where you define the name of the widget that displays in the dashboard ‘Ads’, so you can name this anything you want. The echo, this is where you can add any basic html to output text and images. If you have a more advanced knowledge of PHP, then you can go ahead and add CSS or jQuery, pretty much anything.

Now go and have fun!

Resources:

http://wpengineer.com

http://www.wprecipes.com

http://www.wpbeginner.com

http://buildinternet.com/2010/01/create-custom-option-panels-with-wordpress-2-9