Categories
How To

Customizing Login Pages

Not everyone wants to flip you off with an error, but you could if you wanted.

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.

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.

Top ↑

Change the URL (and Alt Text) 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.

Top ↑

Bonus! Change the Errors Bonus! Change the Errors

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

Diane from the Good Fight flipping people off.

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;
}

Example of a Login Error with Diane

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.

2 replies on “Customizing Login Pages”

I like the login error gif addition. It makes a nice easter egg, but probably not appropriate for a client’s website! šŸ™‚

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

Are there more login errors other than these:
’empty_password’, ’empty_email’, ‘invalid_email’, ‘invalidcombo’, ’empty_username’, ‘invalid_username’, ‘incorrect_password’?

Here’s another login page easter egg, this one for the “Remember Me” checkbox, shared by Weston Ruter: Remember Me Easter Egg

I don’t think there are more than that, but it’s not well documented and I was a little lazy.

I wouldn’t use Diane flipping people off on a client site, but you could go extra wild and check if the email existed, use that to generate a QR code they could scan in and unlock passwords. Just at a far-out-speculation of ideas.

Comments are closed.