Customizing Login Pages

Most of the time, the default WordPress login page is fine. The vast majority of the time it’s fine. Once in a while, you want it to look a little more custom. So let’s talk about what you can do.

Change the Login Logo

This involves three things:

1. Making a logo of the appropriate size
2. Uploading it
3. Pointing your code to it

The default size of the logo is 80×80, which I’m using below. You can make it as wide as 312px, and as tall as you want, but I recommend not going too tall. I like mine to match my Site Icon, personally.

The path to the file is going to depend on where you put it, obviously. Remember it should be the URL, so you can’t use relative paths here.

add_action( 'login_enqueue_scripts', 'helf_my_login_logos' );

function helf_my_login_logos() {
	$logo_image = 'http://my-domain.com/path/to/my/image.png';
	?>
	<style type="text/css">
		#login h1 a, .login h1 a { background-image: url(<?php echo $logo_image; ?>);
			height:80px;
			width:80px;
			background-size: 80px 80px;
		}
	</style>
	<?php
}

Don’t want to code? Try using the Login Logo plugin.

Change the URL (and Alt Text)

Now that we’ve changed changed the logo, we should change the link and the alt text. After all, if the logo is your site, why should the URL be to WordPress?

add_filter( 'login_headerurl', 'helf_my_login_headerurl' );
add_filter( 'login_headertitle', 'helf_my_login_headertitle' );

function helf_my_login_headerurl() {
	return home_url();
}

function helf_my_login_headertitle() {
	return get_bloginfo( 'name' );
}

You can change the URL and text however you want, but I find it easier to just link to the site itself.

Bonus! Change the Errors

Okay this is rarely going to matter to anyone. But Tracy has a new favorite GIF:

And me, I wanted a nice, sneaky place to have it show up appropriately. So I decided to have it pop up when someone put in the wrong credentials while logging in. And I did that like so:

add_filter( 'login_errors', 'helf_my_login_errors' );

function helf_my_login_errors( $error ) {
	$diane = '<br /><img src="' . content_url( 'uploads/diane.gif' ) . '" alt="Access DENIED" />';
	$error = $error . $diane;
	return $error;
}

Now this doesn’t actually do anything other than be amusing. Let’s have a more practical example of wanting to change the invalid username/password messages to not tell people what they got wrong and not offer a password reset.

That would look like this:

function helf_my_login_errors( $error ) {
	global $errors;
	$error_codes = $errors->get_error_codes();

	if ( in_array( 'invalid_username', $error_codes ) || in_array( 'incorrect_password', $error_codes ) ) {
		$error = '<strong>ERROR</strong>: Incorrect login credentials.';
	}

	return $error;
}

There is not a good list of all the errors you may want to filter, I’m afraid.