Customizing the WP Login Screen

I’ve fought this battle a couple of times in the past and decided it wasn’t worth the effort… But if we’re gonna have to look at the WordPress login screen multiple times every day, it might as well look decent, right?

And, it’s another touchpoint for your customers to see your brand, and that can’t hurt.

Here’s what the default looks like:

And here’s what it looks like with the tweaks I made:

It’s a subtle difference, but in my opinion, a massive improvement.

Rather than uploading yet another plugin to handle this, I decided to just make a nice little PHP snippet that would take care of everything.

You can either drop this into your child theme’s functions.php file, or create a code snippet with the code below.

I’ve made comments throughout the code so you know what each selector is and pointed out things you can change to match your brand.

function wpb_login_logo() { ?>
    <style type="text/css">
		
		/* CHANGE THESE COLORS TO MATCH YOUR BRAND */ 
		:root {
			--brand-color: #000e26;
			--brand-color-hover: #ec4911;
			--background-color: #f8fafc;
		}
		/* Body */ 
		body.login{
			background: var(--background-color);
			display: flex;
		}		

		/* Logo */ 
        #login h1 a, .login h1 a {
			background-image: url(https://ogalweb.com/wp-content/uploads/2021/07/OGAL-HERO-LOGO.svg); /* Replace with your logo URL */ 
			height:80px; /* Adjust height if needed */ 
			width: 100%;
			max-width:263px; /* Adjust height if needed */ 
			background-size: contain;
			background-repeat: no-repeat;
		}

		/* Login wrapper */ 
		body.login div#login {
			padding: clamp(2rem, 0.714rem + 1.429vw, 3rem);
			margin-block: auto;
			margin-inline: auto;
			border-radius: 1.5em;
			box-shadow:
				0px 2.8px 2.2px rgba(0, 0, 0, 0.006),
				0px 6.7px 5.3px rgba(0, 0, 0, 0.008),
				0px 12.5px 10px rgba(0, 0, 0, 0.01),
				0px 22.3px 17.9px rgba(0, 0, 0, 0.012),
				0px 41.8px 33.4px rgba(0, 0, 0, 0.014),
				0px 100px 80px rgba(0, 0, 0, 0.02);
			background-color: white;
		}

		/* Login form */ 
		body.login div#login form {
			border: none;
			box-shadow: none;
			padding: 1rem 1rem 2rem;
		}
		
	
		/* Form inputs focus color */ 
		body.login input:focus{
			outline: 2px solid var(--brand-color);
			border: 0px ;
		}

		/* Submit button */ 
		body.login div#login #wp-submit {
			background-color: var(--brand-color); 
			border: 0px;
		}

		/* Submit button on hover */ 
		body.login div#login #wp-submit:hover {
			background-color: var(--brand-color-hover);
		}

		
		/* "Lost your passworld" link hover color */ 
		body.login div#login p#nav a:hover, body.login div#login p#backtoblog a:hover{
			color: var(--brand-color-hover);
		}

		/* "Lost your password" positioning */ 		
		body.login div#login p#nav, body.login div#login p#backtoblog{
			display: flex;
			justify-content: center;
			margin-top: .5rem;
		}
		
		body.login .message{
			border-left: 4px solid var(--brand-color-hover);
		}
		

    </style>

<?php }
add_action( 'login_enqueue_scripts', 'wpb_login_logo' );
function wpb_login_logo_url() {
    return 'https://ogalweb.com'; /* Change to URL for when you click on logo */ 
}
add_filter( 'login_headerurl', 'wpb_login_logo_url' );