How to customize your WordPress login page

Last month, I customised my login page. I was feeling “blah” about blogging, as usual this time of the year. I’d intended to do it earlier this year, but hadn’t taken the time to do it…and also wanted to wait around for a new theme. A custom login page really makes a difference as far as the attitude goes. I mean, why login via a plain screen when you can do so in style?

Back-end access required

In order to customise your login page, you need back-end access in the form of cPanel or FTP. If you don’t know what either of those things are, the chances of you having such access is slim. If you’re on a managed WordPress hosting package, your blog is probably on a WordPress Multi-site installation (thus, no back-end access).

If you don’t feel comfortable with editing theme files, or are not knowledgeable in PHP, you shouldn’t mess with it. As always, save a backup of your files before altering them. I mean, you should save backups of everything, anyway.

Editing the functions.php file

There are three functions I’m bringing up, because I used three in particular for mine. Any snippets you wish to add are to go in your functions.php file.

Change link URL of logo to your blog’s URL

I guess it points to https://wordpress.org for convenience to newbies, but it served zero purpose to me. Even though I’m the only person who will see it, I wanted it to point to https://hej.gay.

function my_login_logo_url() {
	return get_bloginfo( 'url' );
}
add_filter( 'login_headerurl', 'my_login_logo_url' );

Logo hover title change

If all you want is to change the title text when hovering the logo on the login page, add the following to your functions.php file, and change Janepedia accordingly.

function my_login_logo_url_title() {
	return 'Janepedia';
}
add_filter( 'login_headertitle', 'my_login_logo_url_title' );

To change the logo image, you will need to customise the CSS.

Custom CSS

If you’re only interested in changing the CSS, this one gets the job done.

function my_login_css() {
	wp_enqueue_style( 'custom-login', get_stylesheet_directory_uri() . '/custom-login.css' );
}
add_action( 'login_enqueue_scripts', 'my_login_css' )

All three

If you want all three, I made it super-easy for you to copy-pasta:

	// custom login begin
// CSS
function my_login_css() {
	wp_enqueue_style( 'custom-login', get_stylesheet_directory_uri() . '/custom-login.css' );
}
add_action( 'login_enqueue_scripts', 'my_login_css' );
// URL
function my_login_logo_url() {
	return get_bloginfo( 'url' );
}
add_filter( 'login_headerurl', 'my_login_logo_url' );
// TITLE
function my_login_logo_url_title() {
	return 'Janepedia';
}
add_filter( 'login_headertitle', 'my_login_logo_url_title' );
	// custom login end

Customising the CSS

Create custom-login.css. This will be going into your current theme’s directory.

The WordPress Codex lists specific CSS selectors to help you create a login page customised to your heart’s desire. You can play around with them until you reach something you’re pleased with. Here they are for your convenience:

body.login {}
body.login div#login {}
body.login div#login h1 {}
body.login div#login h1 a {}
body.login div#login form#loginform {}
body.login div#login form#loginform p {}
body.login div#login form#loginform p label {}
body.login div#login form#loginform input {}
body.login div#login form#loginform input#user_login {}
body.login div#login form#loginform input#user_pass {}
body.login div#login form#loginform p.forgetmenot {}
body.login div#login form#loginform p.forgetmenot input#rememberme {}
body.login div#login form#loginform p.submit {}
body.login div#login form#loginform p.submit input#wp-submit {}
body.login div#login p#nav {}
body.login div#login p#nav a {}
body.login div#login p#backtoblog {}
body.login div#login p#backtoblog a {}

Hiding the links beneath the form

Hiding the links doesn’t deem them inaccessible. I hid the p#backtoblog link, because I linked the logo to my blog’s homepage, making it redundant. I left the password link (p#nav) so I’d not have to search high and low for the direct link in the event that I was away from my usual devices and forgot/lost my password.

If you want to hide either, add display:none to the parent selector. Editing the link selector selector is deemed redundant and may be removed.

I faded my p#nav link by adding opacity:.8. Depending on your color scheme, the same may not work for you.

Changing the logo image

To change the WordPress logo to your own logo, add a background image to body.login div#login h1 a {}.

Further reading and resources

The Codex has login hooks you can use to further customise your login page. I bothered with none of them. I wanted something simple, though, that would match my blog theme.

---

If you found this helpful, I would love a shout-out on social media. ? Otherwise, please let me know if it was hard to follow so I can fix this post and improve in the future. ❤