This post is dedicated to WordPress Login Page Customization.

As you have learned to customize WordPress using the 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 hooks the new stylesheet where we will add custom style for WordPress login page.

Now the default Logo section links to WordPress website with the title. To change the logo URL and its title, simply 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 recommended but not required.
When we input username and password and if the username is wrong the WordPress will alert 'Invalid username' and same for the password. So, this makes a bit easy to guess the password or username for the hackers. So, we will change the login error messagefrom 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. 

#WordPress