How To Customize Login Page In WordPress

Login form is control access in admin screen and allow only registered users to login.

you can modified some basic things in login form of WordPress.

1) Add Custom Logo

Here we use login_head hook to Change logo in login screen. Now you need to put below code in functions.php,

function modify_login_logo() {
    $login_logo = '<style type="text/css">';
    $login_logo .= 'h1 a {background-image: url(' . get_template_directory_uri() . '/logo.png) ;}';
    $login_logo .= '</style>';
    echo $login_logo;
}
add_action('login_head', 'modify_login_logo');

If you want to create seperate css and js file for login page you need to enqueue file as given below

function modify_login_css() {
    wp_enqueue_style( 'login-form-css', get_template_directory_uri() . '/custom_login.css');
    wp_enqueue_script( 'login-form-js', get_template_directory_uri() . '/custom_login.js');
}
add_action( 'login_enqueue_scripts', 'modify_login_css');

2) Add Custom Background
add below css for change background in custom_login.css.

Body.login{
  background-image:url("../image/background-login-page.jpg");
  background-repeat:no-repeat;
  background-attachment:fixed;
  background-position:center;
}

3) Change the Login Logo URL
Here login_headerurl filter use to change WordPress login URL.

function modify_login_url() {
    return 'Your_custom_url';
}
add_filter('login_headerurl', 'modify_login_url');

4) Change the Login Logo title
Here login_headertitle filter use to change WordPress login URL.

function custom_login_logo_url_title() {
  return 'Default Site Title';
}
add_filter( 'login_headertitle', 'custom_login_logo_url_title' );

5) Hide the Login Error Message
Error message will display after if user enter wrong username or password. If You want to change error message you can use below code,

function custom_login_error_message(){
  return 'Please enter valid login credentials.';
}
add_filter('login_errors', 'custom_login_error_message');

6) Add extra code or url under login form 
Here Login_footer hook is use for add extra code.

function custom_link() { 
?><p style="text-align: center; margin-top: 1em;">
        <a style="text-decoration: none;" href="your_url">visit site</a>
    </p><?php 
}
add_action('login_footer','custom_link');

7)You can redirect after successful login to the homepage instead of dashboard as follows.

 

function login_custom_redirect_code( $redirect_to, $request, $user )
{
  global $user;
  if( isset( $user->roles ) && is_array( $user->roles ) ) {
    if( in_array( "administrator", $user->roles ) ) {
      return $redirect_to;
    } else {
      return home_url();
    }
  } else {
    return $redirect_to;
  }
}
add_filter("login_redirect", "login_custom_redirect_code", 10, 3);