How to customize login page and add some feature

The WordPress login page is just like any other page on your WordPress site: It is one of the most used pages in the WordPress admin. Though simple and clean, it is heavily branded WordPress. However, most new users and clients do not need to know about the underlying software your site runs on. How…

The WordPress login page is just like any other page on your WordPress site:

It is one of the most used pages in the WordPress admin. Though simple and clean, it is heavily branded WordPress.

However, most new users and clients do not need to know about the underlying software your site runs on.

How to Create a Custom Login Page in WordPress

You can customize a WordPress login page in two ways: with or without plugins. If you want to do it manually, you’ll need some knowledge of CSS and PHP, or a little bravery. If you want to avoid coding, you can use a plugin such as Branda.

The default WordPress login page is located at site_url/wp-login.php and looks like this:

To customize this page, you can install the LoginPress plugin first

LoginPress Plugin would give you and your users a feeling that it is a custom login page and a part of the site layout. You must check out the Demo video of how you can customize the WordPress login page.

After installation goes to WordPress Customizer by going to LoginPress → Customizer.

In the Customizer settings, choose the LoginPress option. This is the normal WordPress Customizer interface (where you customize most themes, including Astra), with the only difference being that you’ll see a preview of your login page instead of your regular WordPress theme.

You can use the many options in the Customizer to adjust your login form. As you make changes, you’ll instantly see those changes reflected on the live preview of your login form:

LoginPress Features in Detail:

  1. Customize login error messages. You can change every error message whether it is on login form, forgot password form, register form or reset password form.
  2. Customize login logo image.
  3. Customize login logo image width.
  4. Customize login logo image height.
  5. Customize login logo image hover title.
  6. Customize login logo image hover link.
  7. Customize login logo padding bottom.
  8. Customize login page background image.
  9. Customize login page background color.
  10. Background Gallery with a selected set of HD Backgrounds for Login Screen.
  11. Customize login page background image size.
  12. Customize login page without background image. You can keep it simple with different login form style.
  13. Customize login form width.
  14. Customize login form height.
  15. Customize login form border style.
  16. Customize login form input styling.
  17. Customize login form label styling.
  18. Customize login form field text color.
  19. Customize login form background color.
  20. Customize login page “lost your password?” text.
  21. Customize login forgot password form background color and image.
  22. Customize login form button styling.
  23. Customize login form notice messages.
  24. Add copyright notice message at the bottom of login page.
  25. Customize “Back to” text at login page. You can hide or show or change the color or even the text size as well.
  26. Customize login page footer. We call login page footer area under the login form fields.
  27. LoginPress has a Custom CSS area which can customize login page in more advanced way. Recommended for advanced users.
  28. Customize your login page in more advanced way using our Custom JS area. Add your JS there and make your login page more advanced.
  29. Customize login page with unlimited features available in LoginPress.

If you know about PHP coding well, you can change the login page with custom coding

You have to make your own stylesheet for the custom login page. Before that, you need to create a new folder in your theme folder called Login. However, here we’ll make a new .txt file and save it as a custom-login-style.css file.

Once you have a CSS for the login page, you are required to tell WordPress to load it explicitly. For that, add the following code in the function.php file.

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

Change the Login Logo URL

The Logo URL links to WordPress.org by default. You can redirect it to some other URL however you like. However, if you ever forget your WordPress Login URL there are ways to find that as well. Coming back to the logo URL you can do that as follows.

function custom_login_logo_url() {
    return get_bloginfo( 'url' );
}
add_filter( 'login_headerurl', 'custom_login_logo_url' );

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

Change the Redirect URL

If you log into WordPress, it redirects you to the dashboard directly. You can redirect all to the homepage except the administrator as follows.

function custom_login_redirect( $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', 'custom_login_redirect', 10, 3 );

So, this is how you can customize a login page with code. You can try out all the modifications to simple CSS code.