Reno, NV practitioner of web design, search engine optimization, and PPC advertising

Two Quick Ways to Customize Word Press Login and Dashboard

These are two quick tricks to customize Word Press just a little bit. I implement both of these tricks on all of my client sites that utilize Word Press.

1. Replace the Word Press logo in the Administration Area

By default Word Press has a small Word Press icon in the upper left hand corner when you are logged in to the administration area. You can easily replace this icon with one of your own. All you need to do is add the following code to your functions.php file inside your theme directory.
<?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').'/path/yourlogo.png) !important; }
</style>
';
}
?>

One thing to keep in mind is that your image should be 32 × 32 pixels. Upload your logo to a location in your theme directory and change the path in the code above and you are good to go!

2. Customize Your Word Press Login Page

There is a very easy way to customize your Word Press login screen without hacking your Word Press installation files. By following these steps you can have a custom login screen and maintain your ability to upgrade your Word Press installation.

Step 1. Add the code below to your functions.php file. This code sets up your login page to use a custom stylesheet you specify. I call mine login.css.
<?php
function custom_login() {
echo '<link rel="stylesheet" type="text/css" href="' . get_bloginfo('template_directory') . '/login.css" />';
}
add_action('login_head', 'custom_login');
}
?>

Step 2. Create your custom stylesheet in your theme directory. The code below outlines the declarations you will need to include in this stylesheet. I’ve added comments to help you understand what each one does.

html {background:#F3F6FD url(img/body-bg.png) top center no-repeat;} /* Change the color or include an image for the background of the page. */
h1 a { /* This is the Word Press logo. Remember to update the height and width your image's dimensions. */
background:url(img/login-logo.png) 0 0 no-repeat; width:300px; height:73px;}
body.login {border-top-color:#fff;} /* This is the background color of the bar at the top of the page. */
.login p#backtoblog a:link, .login p#backtoblog a:visited {color:#3572b8;} /* Link styling for the text link in the bar at the top of the page */
.login p#backtoblog a:hover, .login p#backtoblog a:active {color:#484848;text-decoration:underline;} /* Rollover link effects in top bar */

That’s it! By implementing these two quick tips you can remove almost all of the Word Press branding inside the administration area and on your login page.

2 Responses to “Two Quick Ways to Customize Word Press Login and Dashboard”

1. El Cuevero says:

   March 27, 2010 at 5:00 am

   Great post, bookmarked your site, will be back later.
2. Susanne Tapper says:

   May 17, 2010 at 7:32 pm

   I really like following your blog as the articles are so simple to read and follow. Excellent. Please keep up the good work. Thanks.