Customizing the WordPress log-in screen

By /

wordpress-logon-screenWhile customizing a WordPress site for a client nobody (atleast me) likes to have the default logo at login page of WordPress. If this is the case with you, you can use a plugin, or simply take advantage of this simple hack.

The only thing you have to do is to copy any of the following code, and paste it in your WordPress theme’s functions.php file:

function custom_login_logo() {
    echo '<style type="text/css">
        h1 a {background-image:url('.get_bloginfo('template_directory').'/images/custom-logo.gif) !important;}
    </style>';
}
add_action('login_head', 'custom_login_logo');

or, if you need to put ‘hard coded’ url, you can do that by using the code below instead.

function custom_login_logo() {
    echo '<style type="text/css">
	h1 a {background-image:url(http://www.xxxx.com/wp-content/themes/xxxx/images/custom_logo.png) !important; margin:0 auto;}
	</style>';
}
add_action('login_head', 'custom_login_logo');

Also, you can add some style to blend the log-in box in your sites design. Below is the code I use here.

function custom_login_logo() {
    echo '<style type="text/css">
	h1 a {background-image:url(http://www.xxxx.com/wp-content/themes/xxxx/images/custom_logo.png) !important; margin:0 auto;}
	#login{background:#ffffff; padding:25px;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;}
	.login #login p#nav a {!important}
	</style>';
}
add_action('login_head', 'custom_login_logo');

NOTE: Remember that your logo will replace the original WordPress logo, so your logo image must be: 333×85 pixel in size.

Hope it can help some of you. Please  let me know if you know any other optimized way to do that.

Related Posts