How to Create a Stunning Custom WordPress Login Page

Let’s face it, the default WordPress login page is boring and bland.

Over the years the login page hasn’t changed much. Since the change to darker colours in WordPress 3.8, it’s surprising the it wasn’t similarly styled to match the new backend aesthetics.

Most theme designers don’t bother styling the login page because it’s not all that necessary, especially when it’s not part of the WordPress theme setup. But when you’re creating a site for a client, neglecting to style – and more importantly, brand – the login page is a lost opportunity that breaks the user’s experience when you have a custom theme in place.

Creating a custom theme isn’t all that difficult with a bit of CSS and PHP. In this tutorial I’ll walk you through how to style your login page with a WPMU DEV inspired theme.

Here’s what we’ll be making in this tutorial:

Final login page
A beautiful, customized WordPress login page.

Customizing the WordPress Login Page

Directory
Create a /login folder to store your login page files.

This tutorial will cover several modifications to theme files that will allow you to create your own personalized login page:

  • 1. Add a Custom Background
  • 2. Replace the WordPress Logo With a Custom Logo
  • 3. Customize the Look of the Login Form
  • 4. Change the Login Logo URL
  • 5. Remove the Lost Password Link
  • 6. Hide the Login Error Message
  • 7. Remove the Login Page Shake
  • 8. Change the Redirect URL
  • 9. Set “Remember Me” To Be Checked

As mentioned above, the login page isn’t part of the WordPress theme setup. If you’ve ever tried to customize the login page, you would have discovered WordPress doesn’t load your theme’s stylesheet that page.

But that’s okay because in this tutorial we’re going to create our own. Open a next .txt file and name it login-styles.css.

For consistency, we’ll save any changes we make in our current theme’s folder. I suggest keeping any files in a new /login directory, which will help keep everything in one place.

Upload your new style sheet to the /login directory.

We’ll need to tell WordPress to load this CSS file so open up your theme’s functions.php file and add the following code:

1
2
3
4
function custom_login_css() {
echo '<link rel="stylesheet" type="text/css" href="'.get_stylesheet_directory_uri().'/login/login-styles.css" />';
}
add_action('login_head', 'custom_login_css');

Now let’s get stuck in.

Add a Custom Background

We want to emulate the WPMU DEV site’s dark blue background, which we can achieve with a little CSS. By default, WordPress adds a .login class to the body of the login page, so you can use this class to add your own background.

Add the following CSS to the login-style.css file:

body.login {
background: #021a2b;
}

The login page now looks like this:

Login background color
The login page, now with a background color similar to the WPMU DEV site.

It’s easy enough to add an image instead of a solid color. Just remember to choose an image that will look good on large screens. It’s also a good idea to save the image to the /login directory and link to it there.

Replace the WordPress Logo With a Custom Logo

We’ll use the default .login h1 a class to add our own custom logo. Upload your own logo to the /login directory and take note of its height and width.

Then add this code to the style sheet:

.login h1 a {
background-image: url('../login/logo.png');
background-size: 300px 72px;
width: 300px;
height: 72px;
}

Replace the background-size, width and height with the dimensions of your own logo and don’t forget to replace “logo.png” with your logo’s file name.

Our login page now looks like this:

Login custom logo
Personalise your WordPress login page wiht a custom logo.

You may want to adjust the padding depending on the height of your logo:

#login {
padding: 30px 0 0;
}

Customize the Look of the Login Form

WPMU DEV login
The WPMU DEV mini form.

Now we’re going to play with the look of the login form so it better matches the WPMU DEV mini form.

It’s easy to style the form using CSS. The CSS below will transform our form so it resembles the WPMU DEV form, but you can change the CS however you like to match the look and feel of your own site.

First, we’ll add the style for the form. Add this CSS to your login-styles.css file:

.login form {
margin-left:auto;
margin-right:auto;
padding:30px;
border: 1px solid rgba(0,0,0,.2);
background-clip: padding-box;
background: rgba(255, 255, 255, 0.9);
box-shadow: 0 0 13px 3px rgba(0,0,0,.5);
overflow: hidden;
}

Next we’ll make the text a little darker:

.login label {
color: #333;
line-height: 26px;
}

Lastly, we’ll change the look of the button:

.login .button-primary {
width: 120px;
float:right;
background-color:#083353 !important;
background: -webkit-gradient(linear, left top, left bottom, from(#0b436e), to(#083353));
background: -webkit-linear-gradient(top, #0b436e, #083353);
background: -moz-linear-gradient(top, #0b436e, #083353);
background: -ms-linear-gradient(top, #0b436e, #083353);
background: -o-linear-gradient(top, #0b436e, #083353);
background-image: -ms-linear-gradient(top, #0b436e 0%, #083353 100%);
text-shadow: #333333 0 1px 0;
color: #849db0;
}
.login .button-primary:hover {
background-color:#083353 !important;
background: -webkit-gradient(linear, left top, left bottom, from(#0b436e), to(#083353));
background: -webkit-linear-gradient(top, #0b436e, #083353);
background: -moz-linear-gradient(top, #0b436e, #083353);
background: -ms-linear-gradient(top, #0b436e, #083353);
background: -o-linear-gradient(top, #0b436e, #083353);
background-image: -ms-linear-gradient(top, #0b436e 0%, #083353 100%);
text-shadow: #333333 0 -1px 0;
color: #fff;
}

.login .button-primary:active {
background-color:#083353 !important;
background: -webkit-gradient(linear, left top, left bottom, from(#0b436e), to(#083353));
background: -webkit-linear-gradient(top, #0b436e, #083353);
background: -moz-linear-gradient(top, #0b436e, #083353);
background: -ms-linear-gradient(top, #0b436e, #083353);
background: -o-linear-gradient(top, #0b436e, #083353);
background-image: -ms-linear-gradient(top, #0b436e 0%, #083353 100%);
text-shadow: #333333 0 -1px 0;
color: #fff;
}

While the changes are subtle, they better match the WPMU DEV site:

Login custom form
The login form after some CSS styling.

Change the Login Logo URL

By default, the logo will link to wordpress.org. You can change this and point it to your own site by adding this code to your functions.php file:

1
2
3
4
5
6
7
8
9
function my_login_logo_url() {
return get_bloginfo( 'url' );
}
add_filter( 'login_headerurl', 'my_login_logo_url' );

function my_login_logo_url_title() {
return 'Your Site Name and Info';
}
add_filter( 'login_headertitle', 'my_login_logo_url_title' );

You can change the title of the link to anything you want.

Remove the Lost Password Link

The “Lost Your Password?” link is helpful if you’ve lost your password, but if someone has hacked your email they will be gable to get hold of your WordPress password and take over your site.

To move the lost password link, add this snippet to your functions.php file:

1
2
3
4
5
function remove_lostpassword_text ( $text ) {
if ($text == 'Lost your password?'){$text = '';}
return $text;
}
add_filter( 'gettext', 'remove_lostpassword_text' );

Hide the Login Error Message

When you enter an incorrect username or password, the login page returns an error message that says either your username or password was incorrect.

If password cracking software correctly guesses either your username or password, the error message will let it know which piece of the puzzle it got right.

We can use a login page hook to remove the error message, just add this code to your functions.php file.

1
add_filter('login_errors',create_function('$a', "return null;"));

Remove the Login Page Shake

When you enter an incorrect username or password, the login form shakes to alert the user.

Shake
Shake, shake, shake!

I don’t really mind this feature, but some people find it annoying. To remove the shake, add this snippet to your functions.php file.

1
2
3
4
function my_login_head() {
remove_action('login_head', 'wp_shake_js', 12);
}
add_action('login_head', 'my_login_head');

Change the Redirect URL

When you login to the WordPress backend, you’re immediately taken to the dashboard. You can easily change this to redirect users to your homepage instead.

Add the following code to your functions.php file so that all users other than admin are redirected:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function admin_login_redirect( $redirect_to, $request, $user )
{
global $user;
if( isset( $user->roles ) && is_array( $user->roles ) ) {
if( in_array( "administrator", $user->roles ) ) {
return $redirect_to;
} else {
return home_url();
}
}
else
{
return $redirect_to;
}
}
add_filter("login_redirect", "admin_login_redirect", 10, 3);

Set “Remember Me” To Checked

The “Remember Me” is unchecked by default. I like to check this when I login, but sometimes I forget, only to realise my mistake after I’ve already logged in. Doh!

To leave this box always checked, add this snippet to functions.php:

1
2
3
4
5
6
7
8
function login_checked_remember_me() {
add_filter( 'login_footer', 'rememberme_checked' );
}
add_action( 'init', 'login_checked_remember_me' );

function rememberme_checked() {
echo "<script>document.getElementById('rememberme').checked = true;</script>";
}

Summing Up

So there you go. With a few simple modifications you can easily personalize you login page to match the look and feel of your site.

If you have users regularly logging into your site, customizing your login page is worth the time and effort. it’s another opportunity to brand your site and service and also leaves an impression on your users.

A big thanks to Paul Underwood and his awesome snippets blog, which I’ve borrowed from.

Have you customized your login page? Show us what you’ve done in the comments below.

Comments (24)

  1. For the login_head function shouldn’t you use:

    wp_enqueue_style( ‘login’, get_stylesheet_directory_uri().’/login/login-styles.css’ );

    Instead of just echoing out a link tag?

  2. Wouldn’t you want to make any changes to functions.php in a child theme, instead of the main theme? Otherwise if there’s an update your work is lost.

    But in a multiuser site that implies making a child of every theme you make available, and forcing users into those instead of the parent themes.

    Unless I’m missing something.

    • Ya, a child theme is advisable to ensure you don’t lose the code on updates.

      Or you could look at compiling in a mini plugin of your own. :)

      Probably not the best solution for multisite for the reasons you mentioned. :)

      Maybe a network activated version would be better for multisite.

  3. nothing is working al all for me.

    getting the following error :

    function custom_login_css() {
    echo ”;
    }
    add_action(‘login_head’, ‘custom_login_css’);

    Warning: Cannot modify header information – headers already sent by (output started at /home2/rcamacho/public_html/wp-content/themes/twentyfourteen/functions.php:2) in /home2/rcamacho/public_html/wp-includes/pluggable.php on line 896

    will these methods conflict with the “ultimate branding” plugin ?
    i deselected the “login image” for that plugin and still no dice.

    kind regards,
    RC.

    • i get different errors if i add the initial code to the functions.php file at the beginning of the file and at the end. exactly where is the code suppose to be entered ?
      any kind assistance would be greatly appreciated
      Rc.

  4. Thanks for a great write up on this Raelene, my login page looks a whole load more branded!

    As I wasn’t using colours so close to the defaults I’ve updated a couple of things and thought I’d share, this might help others too:

    1. Your button states could be set as joined sets unless you want distinction on each “state”:

    .login .button-primary,
    .login .button-primary.active,
    .login .button-primary:active,
    .login .button-primary.focus,
    .login .button-primary:focus {}

    .login .button-primary.hover,
    .login .button-primary:hover {}

    2. As you see from above there’s another state you hadn’t modified:

    “FOCUS”

    3. The default colour scheme is as follows but this should help modify the after click state:

    .login .button-primary.focus,
    .login .button-primary:focus {
    border-color: #0e3950;
    -webkit-box-shadow: inset 0 1px 0 rgba(120,200,230,0.6), 1px 1px 2px rgba(0,0,0,0.4);
    box-shadow: inset 0 1px 0 rgba(120,200,230,0.6), 1px 1px 2px rgba(0,0,0,0.4);
    }

    Once more thank you for sharing this with us!

    Jon

  5. Hi, Raelene, thanks for you nice tutorial on WordPress admin login page customization. I have an ask, could you give me answer please?

    Is there any way to remove the link “backtoblog”? If yes, please let me know how can I do the work. Thanks again.

Participate