WordPress Login Page Customization by filters, actions & plugins

Updated:

/

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 on the login page url (wp-login.php). The reset page comes with a query attribute action=lostpassword (https://example.com/wp-login.php?action=lostpassword), and the registration page with action=register. Note: this is the default behavior if you are not using any login or registration management plugin, buddypress or any theme with a custom login page option.

The WordPress login page comes with a WordPress logo on it, the logo is linked to the wordpress.org site. Most people want to change that and use their own site branding instead. Below, I describe how to change the login screen without touching the core files.

Table of Contents:

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 default logo area is 84px square in current WordPress versions, so crop your image to a square first ( size actually doesn’t matter much, for a bigger image you need some css adjustment). First, grab the new image url to replace the WordPress 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 correct and everything is fine, you will see your new login page image.

Reference: The login_enqueue_scripts hook fires in the login page head on wp-login.php, so calling our function with this action places our CSS inside the login page head tag.
#login h1 a is used to target the logo anchor with CSS. Further image customization can be done with #login h1 a too, for example background-size for a larger logo.

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( '/' ) with the url.

2. To change the login page logo text to your site name

function w4dev_login_headertext() {
	return get_bloginfo( 'name', 'display' );
}
add_filter( 'login_headertext', 'w4dev_login_headertext' );

To use any other text replace get_bloginfo( 'name', 'display' ) with your text. Note: the old login_headertitle filter was deprecated in WordPress 5.2, login_headertext is the one to use now.

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 this function returns, we can simply hook into login_url.
Example:

function w4dev_login_url( $login_url, $redirect, $force_reauth ) {
    $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, 3 );

This will change the login url to your desired one whenever 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( $redirect_to, $requested_redirect_to, $user ) {
	return 'your_url';
}
add_filter( 'login_redirect', 'w4dev_login_redirect', 10, 3 );

So, this will take your user to your defined url address after login. You can change it based on the user’s capability or role, the $user object is available in the callback for that.

WordPress Login plugins

If you prefer a plugin over code, there are a few solid ones for customizing the login experience. One of the most popular plugins for a themed login page is Theme My Login.

1. Theme My Login

The great feature of this plugin is that its design blends well into any theme. Theme My Login generates the templates and functionality, but everything is styled with the CSS used by your theme.

How Theme My Login works:
This plugin uses your page template for creating the login/registration/forgot password pages. So you get the option of using sidebar widgets on these user pages ( if a sidebar is included in your page template ). It changes the login/registration/forgot password urls to its own. So users are taken to the themed pages when they click any login or registration link. More about Theme My Login »

2. Custom Login

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