August 31st, 2010 by

Customizing WordPress login page is a pretty easy issue. We just have to hook our code into login_head function.
Here is how to do it:
The first create custom-login.css:

/*body.login { background: #8EA9A9 url(images/bg.jpg) no-repeat center top; }*/
html {background: #8EA9A9 url(images/bg-login.jpg) 0 0 repeat-x;}	/* Page background. Can't use the body tag for this! */
h1 a { position: relative; display: block; width: 468px; height: 59px; margin: 0 0 0 -230px; background: url(images/login-head.png) no-repeat; }
#loginform,
#lostpasswordform { background: none; border: none; -moz-box-shadow: none; }
#loginform p label,
#lostpasswordform p label { display: block; width: 100%; text-align: right; color: #a10c10; }
.submit { -moz-border-radius: 0px; }
#loginform #wp-submit,
#lostpasswordform #wp-submit { background: url(images/entrer.png) repeat-x; border: none; -moz-border-radius: 0px;  }
#nav a { color: #383838; text-shadow: none;  }

Then place this code into the functions.php file.

function custom_login() {
wp_enqueue_style('custom_login_css', get_bloginfo('template_directory'). '/custom-login.css');
wp_print_styles();
}
add_action('login_head', 'custom_login');

When you hover over the WordPress logo of the login page, you’ll see that it links to official WordPress page. You can change the URL of the logo to the URL of your site, you can do so by adding these lines:

function custom_login_url() {
    echo bloginfo('url');
}
add_filter('login_headerurl', 'custom_login_url');

Leave a Reply