Easy WordPress Login Screen Customizations

The WordPress login screen is nothing special; it does the job well, and that’s it.

I’m not a big fan of a custom WordPress login screen. I think this is a core territory, so I usually leave it as default with some subtle changes. Although I don’t like to change it, I see why a custom one, like in WooCommerce, is needed and makes a better user experience.

If I develop a custom theme for a client, usually, I modify it just a little bit. I only change the logo, the logo’s URL, and the redirection based on the needs.

Let’s see how you can get more out of the login screen but still don’t modify too much.

Give your project a solid foundation.

Change The Logo Image

It is a nice thing to change the default WP logo to the client’s logo. A small touch that tells the user they are at home. We can do this easily; all we have to do is to load our custom CSS (using the login_enqueue_scripts filter) at the login screen and override the default image.

// Load our custom CSS on the login screen.
function pine_login_stylesheet() {
    wp_enqueue_style( 'custom-login-style', get_template_directory_uri() . '/assets/css/login-styles.css' );
}
add_action( 'login_enqueue_scripts', 'pine_login_stylesheet' );

In the stylesheet, we can do all the needed modification to this screen. I just modify the logo image, but you can do more. For more information, you can visit the official guide about the styling.

/* Change the logo image to our own. */
.login #login h1 a {
    background: url(../img/logo-black.svg) no-repeat center center;
    background-size: 110px 30px;
    width: 110px;
    height: 30px;
}

Change the Logo URL

By default, the logo image – the original WP logo – has a link that points to the localized wordpress.org URL. In my opinion, it is weird behavior, why do I want to navigate the user to the organization’s site at this point?

We can modify the URL with the login_headerurl filter like so:

// Redirect the user to the home URL on logo click.
function pine_auth_url( $url ) {
    return get_home_url();
}
add_filter( 'login_headerurl', 'pine_auth_url' );

Redirect the User After the Authentication

Another useful modification could be the redirection after the authentication. The endpoint depends on the project; there can be cases where you don’t want to point to the dashboard.

We can use the login_redirect hook to set up a new URL. Note that you can make more with this filter like if you want to separate the redirection based on user role, you can do so.

function pine_login_redirection() {
    $current_user = wp_get_current_user();
    if (user_can( $current_user, 'administrator' )) {
        return get_dashboard_url();
    } else {
        return get_home_url();
    }
}
add_filter('login_redirect', 'pine_login_redirection');

At this point, another redirection can be useful, but after the logout. By default, WordPress redirects the user to the login page after a logout. We can modify this with the wp_logout action.

function sarvar_redirect_after_logout(){
    wp_redirect( get_home_url() );
    exit();
}
add_action('wp_logout', 'sarvar_redirect_after_logout');