Brand Your WordPress Login Without A Plugin
Posted by Nile | Posted in Tutorials | Posted on 06-26-2010 | 4 Comments
Tags: custom login page
There is a Custom Admin Branding plugin for that, but why bother when you can insert a few lines into your theme’s functions.php file?
However, if you like to change up your site’s theme sometimes, you probably want to change the log in page too. A lot of people have been really hooked into branding their WordPress log in page, especially since guest blogging has become popular.
Here is the code I put together for WPAddict. This is all merely adding CSS and an action to your theme’s functions.php file.

Adding the action for your custom login:
add_action('login_head', 'my_custom_login_logo');
Replace the WordPress logo:
function my_custom_login_logo() {
echo '<style type="text/css">
h1 a { background-image:url('.get_bloginfo('template_directory').'/images/custom-login-logo.png) !important;height:160px;width:322px;margin-bottom:5px;margin-top:-70px; }
Remove the border at the top of the login page:
body { border-top-style:none; }
Adding your own background to the login page:
html {background:#fff url('.get_bloginfo('template_directory').'/images/bgr_html2.png) repeat-x;}
Removing the Back to blog link:
#backtoblog { display:none; }
</style>';
}
Full code:
function my_custom_login_logo() {
echo '<style type="text/css">
h1 a { background-image:url('.get_bloginfo('template_directory').'/images/custom-login-logo.png) !important;height:160px;width:322px;margin-bottom:5px;margin-top:-70px; }
body { border-top-style:none; }
html {background:#fff url('.get_bloginfo('template_directory').'/images/bgr_html2.png) repeat-x;}
#backtoblog { display:none; }
</style>';
}
add_action('login_head', 'my_custom_login_logo');
You can customize more of the page too, so just view the source of your login page and you can put other CSS attributes into the code above.
Related posts:









[...] This post was mentioned on Twitter by Nile Flores and John Sullivan, Daniel Voyles. Daniel Voyles said: RT @wpaddict Brand Your WordPress Login Without A Plugin | WP Addict http://bit.ly/bKEZ4A [...]
Very clever and easy to do for simple branding of a login page. I chose to just use a plug-in but had I found this post first I may have just customized my login page like this.
Wouldn't happen to know of a hook to replace the link right above the login? Would love to have my logo pointing to my website instead of stripping it out. Could do this with jQuery, but there must be another method.
I will have to try it out. I believe taking a closer look at the wp-login page and applying a filter might do, much like the filter you can apply to replace the ellipse.