WordPress Login Page Customization by filters, actions & plugins

By default, every WordPress powered website’s login page url is – https://example.com/wp-login.php. Registration and Password Reset pages are found with an action query parameter with the login page url (wp-login.php). Reset page comes with a query attribute action=lostpassword (https://example.com/wp-login.php?action=lostpassword), and registration page action=register. Note: this is the default behavior or rules if you are not using any login or registration management plugin, buddypress or any theme with custom login page option

WordPress login page comes with a wordpress.org logo on it, the logo is linked to the wordpress.org site and link title attribute set to powered by wordpress. But i think most of the people want to change that and use some site attribution. Below, I tried to describe how to change login screen without affecting the core files

Table of Contents:

• Login Screen Customization
  • Change login page logo link
  • Change login page logo title
• Login page hooks
  • wp_login_url
  • login_redirect
• Plugins
  • Theme my login
  • Custom Login
  • My Brand Login

Note: All of the code down below should go to your theme’s functions.php file or an active plugin’s file.

Login Screen Customization

The wordpress.org logo file has 67px height and 326px width, so crop your image to this dimension first ( size actually doesn’t matter, for using bigger image, u need some css adjustment). First, grab the new image url to replace wordpress.org logo –

function w4dev_login_enqueue_scripts() {
    ?>
    <style type="text/css" media="screen">
    #login h1 a{ background-image:url(the_image_url_or_path );
    </style>
    <?php
}
add_action( 'login_enqueue_scripts', 'w4dev_login_enqueue_scripts' );

If the image url is perfect and everything is fine, you will see your new login page image.

Reference: The login_enqueue_scripts hook is called just before the login_head action on wp-login.php file line 82 on wordpress version 3.1.1, and calling our function with this action will place our CSS inside login header tag.
#login h1 a is used to identify the image anchor with CSS. Image Css Customization can be done with #login h1 a.

1. To change the login page logo link to your site home page url

function w4dev_login_headerurl() {
    return home_url( '/' );
}
add_filter( 'login_headerurl', 'w4dev_login_headerurl');

To use any other url replace home_url( '/' ) to the url.

2. To change the login page logo title attribute to your sitename

function w4_login_headertitle() {
	return get_bloginfo( 'title', 'display' );
}
add_filter( 'login_headertitle', 'w4_login_headertitle');

To use any other title replace get_bloginfo('title', 'display' ) to your title.

Get familiar with some functions and hooks for WordPress Login Page

1. wp_login_url

wp_login_url is a function to generate the login page url address. To change the url of the function we can simply hook to login_url and change that.
Example:

function w4dev_login_url( $force_reauth, $redirect ) {
    $login_url = 'yoursite_login_url';

    if ( ! empty( $redirect ) ) {
        $login_url = add_query_arg( 'redirect_to', urlencode( $redirect ), $login_url );
    }

    if ( $force_reauth ) {
        $login_url = add_query_arg( 'reauth', '1', $login_url ) ;
    }

    return $login_url ;
}
add_filter( 'login_url', 'w4dev_login_url', 10, 2 );

This will change the login url to your desire one when the wp_login_url function is called.

2. login_redirect

login_redirect is used to redirect the user after they have logged in successfully.
Example:

function w4dev_login_redirect() {
	return 'your_url';
}
add_action( 'login_redirect', 'w4dev_login_redirect' );

So, this will take your user to your defined url address. You can change it based on yours capability or choice.

WordPress Login plugins

There has been few plugins for posts or widgets, but there are only few for custom wordpress login. However, there are many plugin to display your login box on Sidebar. One of the most popular plugin for login template is Theme My Login

1. Theme My Login

The great feature of this plugin is that, it’s design blends well in any theme. Theme my login generate template and functionality, but styled with your CSS used on your theme.

How theme my login works:
This plugin use your page template for creating the login/registration/forgot password page. So you got the option for using sidebar widgets on these user pages ( if sidebar is included on your page template ). It changes the login/registration/forgot password url to its own. So users are redirected to their template page if a user click on any login or registration link rather than typing the wp-login default url manually. One disadvantage of theme my login plugin is when someone manually enter the default url, it doesn’t redirect.More about Theme My Login »

2. Custom Login

Customize WordPress login page with easy backend. Plugin has lot of option to manage the Login page css, image and layout. Secure and fast loading. HTML & CSS box for advanced customization.More about Custom login Plugin »

3. My Brand Login

Easily Customize Your Login, Registration, Lost Password and User/Admin Panel.

Plugin Features

Download My Brand Login »

• Add Image/Color Backgrounds.
• Add Login Form Background Image/Color.
• Change the Login Font Color.
• Replace the WordPress Logo on the Login + Admin/User Pannel
• Redirects the Login Logo to Your Websites URL
• Uses jQuery Fade Features (custom) For a Unique Touch.
• Much More!