This post is dedicated to WordPress Login Page Customization.

As you have learnt to customize WordPress using child theme, you may be interested to customize the default WordPress Login page too.

There are many free plugins available for WordPress login customization. But we will be doing it without any WordPress plugins.

Let's start.

Goto the 'wp-content/themes/yourchildtheme' and create a directory - login. create a new login.css file in the 'login' directory. Later we will be adding style in that file.

Now open functions.php and add the following function

function wp-custom-login() {
echo '<link rel="stylesheet" type="text/css" href="' . get_bloginfo('stylesheet_directory') . '/login/login.css" />';
}
add_action('login_head', 'wp-custom-login');

The above function simply hook the new stylesheet where we will add custom style for WordPress login page.

Now the default Logo section links to WordPress website with title. To change the logo URL and its title, simpy add the following function

//Change logo url
function admin_logo_url() {
return get_bloginfo( 'url' );
}
add_filter( 'login_headerurl', 'admin_logo_url' );

//Change logo title
function admin_logo_url_title() {
return 'My Awesome Blog';
}
add_filter( 'login_headertitle', 'admin_logo_url_title' );

This step is recomended but not required.
When we input username and password and if username is wrong the WordPress will alert 'Invalid username' and same for password. So, this make a bit easy to guess the password or username for the hackers. So, we will change the login error message from default to - 'Wrong Credentials! Try Again.'

function custom_error_alert()
{
return 'Wrong Credentials! Try Again.';
}
add_filter('login_errors', 'custom_error_alert');

Now let's write some style for the admin. Open login.css from login directory. Add the code below and save.

/*
------------------
css for login form
------------------
*/

body.login {
background-image: url('admin-bg.png');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size:cover;
}
.login h1{
background:#fff
}
.login h1 a {
background-image: url('logo.png'); /* this will replace default WordPress log with your's*/
width: 260px; /*customize the width for logo to fit*/
display: block;
background-size: 265px;
background-position: center;
outline:none;
}
.login h1 a:focus {
-webkit-box-shadow: none;
-moz-box-shadow: none;
-o-box-shadow: none;
box-shadow: none;
}
.login form{
background:rgba(255, 255, 255, 0.15);
border:1px solid #B7B7B7;
}
.login label {
font-size: 12px;
color: #fff;
}
.login input[type="text"], .login input[type="password"]{
background-color: rgba(18, 17, 16, 0.37);
border-color:#3150A0;
-webkit-border-radius: 4px;
color:#fff;
}

Now visit the admin login page and enjoy. That is all.