WordPress

Design a Stylized Custom WordPress Login Screen

Justyn Hornor
Share

The WordPress login screen is one of the most generic, we-have-all-seen-the-same-thing, parts of a WordPress site. And, oddly enough, it’s one of the more awkward things to modify as well. There’s no built-in features for adding your logo or changing the overall look and feel.

In this article, I’ll show you in a few short steps how to get started with modifying the login screen so that users experience a customized, branded look and feel. I went over the top with this design just to show how dramatically the login form can be stylized using a simple mod to the functions.php file and some CSS.

My finished product looks like this:

(Click to see the full version)

If you happen to want the background image that I used for this tutorial, you can download that here:

I broke this into sections, so you can change only those parts that you want. You may only want to change a few items up, change some fonts, tweak some backgrounds, and call it good. For those that want a thorough facelift, you can make a very dramatic change, as you can see from my example. So, hang on and in short order you’ll have a highly stylized WordPress login form.

Modify Functions.php

One of the most frustrating parts about changing the login screen is that you need to add a few lines of code to your functions.php file to tell WordPress that you want a different stylesheet for the login screen. The login is a unique page in WordPress, unfortunately, but for security and other reasons, that’s just how it is.

So, in your functions.php file, paste the following:

[sourcecode language=”php”]

function stylized_login() {

echo ‘<link rel="stylesheet" type="text/css" href="’ . get_bloginfo(‘stylesheet_directory’) . ‘/stylized-login.css" />’;

}

add_action(‘login_head’, ‘stylized_login’);

[/sourcecode]

What we’ve done here is “hooked” into login_head and told WordPress to use our stylized-login.css document that we’re about to build.

You need both the function and the add_action, so don’t skip either.

Add Your CSS Document

Now you need to add the stylized-login.css document into your theme’s folder. This should be the in the folder as your style.css. If you want to put your custom login files in a separate folder, just make sure you update the folder in Step 1 accordingly.

At this point you haven’t changed anything from the ordinary user’s point of view, but you have everything in place now.

Change the Logo

We’re all used to the WordPress logo above the login form, so let’s start by changing this up first. In your stylized-login.css, add the following:

[sourcecode language=”css”]

.login h1 a {
background-image: url(‘logo.png’);
}

[/sourcecode]

I named my image logo.png. It should be 247 x 63 if you want it to fit perfectly.

Change the Background Image for the Page

The background image is one of the easiest ways to give your login page a back face-lift:

[sourcecode language=”css”]

body.login {
background-image: url(‘bg.png’);
}

[/sourcecode]

You don’t have to make the background an image. You can just set the background-color and call it good.

Change the Form Background and Border

The form itself, with the white background, is another calling card that screams “vanilla WordPress,” so lets change this up:

[sourcecode language=”css”]

.login form {
background: rgba(0, 0, 0, .6);
}

#loginform {
border-color:#33d42a;
}

[/sourcecode]

Note that I used RGBA, which allows for an alpha (transpancy), so if you want to make the form more or less transparent, this is where you would change it. I’ve added transparency, which you can see in the image below.

Change the Username and Password Fonts

I’m sticking with some common system fonts, but you can always import a font of your choosing for a further stylized effect:

[sourcecode language=”css”]

.login label {
font-family:"Courier New", Courier, monospace;
font-size: 28px;
color: #33d42a;
}

[/sourcecode]

Change the Input Box Background and Border

In this example, I don’t even want the standard white background for my inputs, so here’s a quick way to give these inputs a whole new look:

[sourcecode language=”css”]

.login input[type="text"]{
font-family:"Courier New", Courier, monospace;
font-size:24px;
background-color:rgba(0,0,0,.6);
border-color:#33d42a;
}

.login input[type="password"]{
background-color:rgba(0,0,0,.6);
border-color:#33d42a;
}

[/sourcecode]

Once again, I’m using RGBA to get the transparency effect for those input boxes.

Change the Login Button

Now we have get that blue login button out of there. It’s ruining everything!

[sourcecode language=”css”]

.wp-core-ui .button-primary{
background-color:#000;
background-image:none;
border-color:#33d42a;
border-bottom-color:#13f278;
color:#33d42a;
}

.wp-core-ui .button-primary:hover {
background-color:#33d42a;
background-image:none;
border-color:#33d42a;
color:#000;
}

[/sourcecode]

This also takes care of our hover state. When hovered, the button goes bright green. Look below for clarity.

Change the Lost Password and “Back to…” Links

Almost done! Those little links at the bottom are now all that’s in the way of our completely stylized form.

[sourcecode language=”css”]

.login #nav a, .login #backtoblog a {
color: #33d42a !important;
text-shadow:none;
}

.login #nav a:hover, .login #backtoblog a:hover {
color: #33d42a !important;
text-shadow:0 1px 0 #33d42a;
}

[/sourcecode]

Change the Logo Link Button

Last, but not least, I couldn’t leave well enough alone and had to change the logo link to go to my own site — sorry WordPress.org, I don’t want that link any more.

To make this change, you’re going to have to go back to your functions.php file and add the following:

[sourcecode language=”php”]

function login_link( $url ) {

return get_bloginfo( ‘url’ );

}

add_filter( ‘login_headerurl’, ‘login_link’ );

[/sourcecode]

Final CSS

Here’s the CSS in one big block with comments for your copy and pasting pleasure:

[sourcecode language=”css”]

/* Logo above login form */
.login h1 a {
background-image: url(‘logo.png’);
}

/* Background image */
body.login {
background-image: url(‘bg.png’);
}

/* Background of form */
.login form {
background: rgba(0, 0, 0, .6);
}

/* Border for the form */
#loginform {
border-color:#33d42a;
}

/* Labels for the form */
.login label {
font-family:"Courier New", Courier, monospace;
font-size: 28px;
color: #33d42a;
}

/* Username text box */
.login input[type="text"]{
font-family:"Courier New", Courier, monospace;
font-size:24px;
background-color:rgba(0,0,0,.6);
border-color:#33d42a;
}

/* Password text box */
.login input[type="password"]{
background-color:rgba(0,0,0,.6);
border-color:#33d42a;
}

/* Login button */
.wp-core-ui .button-primary{
background-color:#000;
background-image:none;
border-color:#33d42a;
border-bottom-color:#13f278;
color:#33d42a;
}

/* Login button hover */
.wp-core-ui .button-primary:hover {
background-color:#33d42a;
background-image:none;
border-color:#33d42a;
color:#000;
}

/* Lost password and ‘Back to’ links */
.login #nav a, .login #backtoblog a {
color: #33d42a !important;
text-shadow:none;
}

/* Lost password and ‘Back to’ hover links */
.login #nav a:hover, .login #backtoblog a:hover {
color: #33d42a !important;
text-shadow:0 1px 0 #33d42a;
}

[/sourcecode]

That’s all. Enjoy tailoring WordPress to suit your (client’s) needs!