Customize the WordPress login screen with a bit of CSS

Why customize the WordPress login screen at all

If you spent the time to build an amazing, beautiful, immersive site, why leave this one screen as dull as it ships? In just a few steps you can make the login page something you and your clients will actually like to visit. The default is fine, but fine is not the bar you set for the rest of the site.

The bigger reason I like to customize it is branding. Not only for the organization the website is for, but also for you or the agency that built the site. A logged-out client who sees your mark on the login page is reminded, every single time, who put the site together. And you can do all of it yourself. There is no reason to install a plugin for something this small when you can achieve the same result without the added overhead.

Set up a stylesheet and tell WordPress to load it

Three quick steps get the plumbing in place before any styling happens:

1. Create a folder named login in your theme directory. If your theme does not pick it up there, put it in the site root instead.
2. Add a CSS file inside that folder called custom-login-style.css. This is where every rule below lives.
3. Load it by adding a small function to your theme's functions.php file.

/*----------------------------------
 * Custom Login Screen
 *---------------------------------*/
function my_custom_login() {
    echo '<link rel="stylesheet" type="text/css" href="LINK TO YOUR STYLESHEET" />';
}
add_action( 'login_head', 'my_custom_login' );

Replace the logo and add a full-screen background

With the stylesheet loading, the styling is pure CSS. Start with the two changes that make the biggest visual difference: swapping the WordPress logo for your own and giving the whole screen a background image.

/* 1. Replace the WordPress logo */
.login h1 a {
    background-image: url('path/to/your-logo.png');
    background-size: 200px !important;
    height: 200px;
    width: 200px !important;
}

/* 2. Full-screen background image */
body.login {
    background-color: #14B8E5;
    background-image: url('path/to/your-background.jpg');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
}

Point the logo's background-image at your own file in the media library and adjust the height, width, and background-size to fit it. For the background, use an image at least 1920 x 1080 so it stays sharp when it scales up to cover the screen. The background-color is a fallback that shows while the image loads.

Style the form and polish the details

The login form itself is a single element you can dress up. Rounding its corners and adding a soft shadow gives it a contemporary, floating look against the new background:

/* 3. Style the form container */
#loginform {
    border-radius: 10px;
    box-shadow: 0 0 12px #767676;
}

From here the details are yours to tune. You can recolor the "Lost your password?" and "Back to Blog" links, restyle the login button to match your brand, and change the background of the text fields. The trick for finding the right selector is your browser's developer tools: right-click any element on the login page, choose Inspect, and CSS shows you exactly what to target.

A login screen worth logging into

That is the whole trick: one stylesheet, one function to load it, and a few CSS rules for the logo, background, and form. It is a small amount of code for a surface your clients see every time they sign in, and it costs nothing but a few minutes.

Once the basics are in, experiment. Recolor the links, restyle the button, tweak the fields, and make the page unmistakably yours. I would be excited to see what you come up with.