For this to work you will need to place the background image, logo and a stylesheet into a new directory in your child theme. Let’s create the folder /login and place the files there.

A note to the unwise: The functions.php file can be edited directly in the WordPress back-end. From the left Admin Panel select Appearances then Editor. The stylesheet is selected as default (styles.css) and you will see the other editable files listed on the right side, look for Theme Functions (functions.php).


So go ahead and move your background and logo images to the YOURSITE/login folder. The newly created CSS file should contain the code given below and be named as shown below, then place it with the images.

1. login-logo.png 80x80 pixels
2. bgnd-login.jpg 1600x1200 pixels
3. custom-login-styles.css

The CSS
/* CUSTOM LOGIN SCREEN */
/* background */
body.login {
	background-image: url('bgnd-login.jpg');
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center;
}

/* logo */
.login h1 a {
	background-image: url('login-logo.png');
}

/* input boxes */
.login label {
	font-size: 12px;
	color: #555555;
}

.login input[type="text"]{
	background-color: #ffffff;
	border-color:#dddddd;
	  -webkit-border-radius: 4px;
}

.login input[type="password"]{
	background-color: #ffffff;
	border-color:#dddddd;
	  -webkit-border-radius: 4px;
}

/* button */
.login .button-primary {
	width: 120px;
	float:right;
	background-color:#17a8e3 !important;
	background: -webkit-gradient(linear, left top, left bottom, from(#17a8e3), to(#17a8e3));
	background: -webkit-linear-gradient(top, #17a8e3, #17a8e3);
	background: -moz-linear-gradient(top, #17a8e3, #17a8e3);
	background: -ms-linear-gradient(top, #17a8e3, #17a8e3);
	background: -o-linear-gradient(top, #17a8e3, #17a8e3);
	background-image: -ms-linear-gradient(top, #17a8e3 0%, #17a8e3 100%);
	color: #ffffff;
	  -webkit-border-radius: 4px;
	border: 1px solid #0d9ed9;
}

.login .button-primary:hover {
	background-color:#17a8e3 !important;
	background: -webkit-gradient(linear, left top, left bottom, from(#17a8e3), to(#0d9ed9 ));
	background: -webkit-linear-gradient(top, #17a8e3, #0d9ed9 );
	background: -moz-linear-gradient(top, #17a8e3, #0d9ed9 );
	background: -ms-linear-gradient(top, #17a8e3, #0d9ed9 );
	background: -o-linear-gradient(top, #17a8e3, #0d9ed9 );
	background-image: -ms-linear-gradient(top, #0b436e 0%, #0d9ed9 100%);
	color: #fff;
	  -webkit-border-radius: 4px;
	border: 1px solid #0d9ed9;
}

.login .button-primary:active {
	background-color:#17a8e3 !important;
	background: -webkit-gradient(linear, left top, left bottom, from(#0d9ed9), to(#17a8e3));
	background: -webkit-linear-gradient(top, #0d9ed9, #17a8e3);
	background: -moz-linear-gradient(top, #0d9ed9, #17a8e3);
	background: -ms-linear-gradient(top, #0d9ed9, #17a8e3);
	background: -o-linear-gradient(top, #0d9ed9, #17a8e3);
	background-image: -ms-linear-gradient(top, #0d9ed9 0%, #17a8e3 100%);
	color: #fff;
	  -webkit-border-radius: 4px;
	border: 1px solid #0d9ed9;
}
/* END of custom login screen */
The PHP - (place in functions.php)
/* CUSTOM LOGIN SCREEN */
/* load custom login page styles */
function my_custom_login() {
echo '';
}
add_action('login_head', 'my_custom_login');

/* Redirect login logo link to front page */
function my_login_logo_url() {
return get_bloginfo( 'url' );
}
add_filter( 'login_headerurl', 'my_login_logo_url' );

function my_login_logo_url_title() {
return 'Web Papa';
}
add_filter( 'login_headertitle', 'my_login_logo_url_title' );
/* END of custom login screen */

What you have done with the CSS is style the form a little and with the PHP you have told WordPress where to find your login stylesheet and amended the logo link which by default took you to WordPress but now takes you to your site.

We created a new directory and stylesheet to keep things separate because WordPress does not load the theme stylesheet, the theme does. So a stylesheet is needed at the login screen before the theme is loaded.

Below are some additional features that you may want to incorporate. Simply append the CSS to your login stylesheet and any PHP in functions.php. Add them to the end of what we have done so far.

MORE TWEAKS

Remove the lost password link: Add to CSS.

p#nav {
    display: none;
}


Remove the Back To link: Add to CSS.

p#backtoblog {
    display: none;
}


Use just one error Message: The various username/password error messages are replaced with ‘Incorrect login details’. Add this PHP to functions.php.

/* replace error messages with one */
function login_error_override()
{
    return 'Incorrect login details.';
}
add_filter('login_errors', 'login_error_override');


Remove the Shake: When you enter the wrong credentials the login form rudely shakes. This will remove it. Add this PHP to functions.php.

function my_login_head() {
remove_action('login_head', 'wp_shake_js', 12);
}
add_action('login_head', 'my_login_head');


Tick the Rember Me box: The tick will always appear in the box. Add this PHP to functions.php.

function login_checked_remember_me() {
add_filter( 'login_footer', 'rememberme_checked' );
}
add_action( 'init', 'login_checked_remember_me' );

function rememberme_checked() {
echo "document.getElementById('rememberme').checked = true;";
}