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.

Featured Plugin - WordPress Ecommerce Shopping Cart Plugin

Out of all the WordPress ecommerce plugins available, MarketPress has got to be the winner - easy to configure, powerful functionality, multiple gateways and more. A simply brilliant plugin!
Find out more

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.

Featured Plugin - WordPress Newsletter Plugin

Now there's no need to pay for a third party service to sign up, manage and send beautiful email newsletters to your subscriber base - this plugin has got the lot.
Find out more

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;
}

Featured Plugin - WordPress Google Maps Plugin

Simply insert google maps into posts, sidebars and pages - show directions, streetview, provide image overlays and do it all from a simple button and comprehensive widget.
Find out more

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.

Featured Plugin - WordPress Facebook Plugin

Would you like to add Facebook comments, registration, 'Like' buttons and autoposting to your WP site? Well, The Ultimate Facebook plugin has got that all covered!
Find out more

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');

Featured Plugin - WordPress Pop-Up Chat Plugin

No javascript required, no third part chat engine, just fully featured chat right in your own database on your own WP sites - couldn't be easier.
Find out more

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 (49)

  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.

  6. I’m using the pro sites plug in and in that plug in there is a tab for log in page branding. Could this code be placed in the boxes in that plug in rather than in the files as described above?
    Thanks,
    Catrina

  7. This is a great tutorial. Can this be applied to a buddypress site as well? Are there some changes that need to be made so that it works with buddypress? For example, the child theme folder doesn’t have a functions.php file in it. I tried adding one with the code you show in the tutorial and I got the white screen of death. What do I need to do differently?

  8. I have a lot of users in my project and they often forget both username and password (I’ve got tired they always send me letters that they forgot everything) so I would like to customize Lost Password /wp-login.php?action=lostpassword and Reset Password pages and make them more friendly for my users.

    What should I change in this tutorial, I would like just to change background, logo and logo-link?

    • I found out that’s nothing to change in your tutorial. It works like a charm for all screens “/wp-login.php?***” Finally my users will be capable to do everything by themself and not get scared by strange huge “W” on the screen of resetting the password.

      Thank you very much!!!

  9. This is a great tutorial, but could anyone help me replace the ‘forgot password’ text with some custom text and link??

    Bit of a coding novice.

    Thanks

  10. Great tutorial. I had been struggling to modify the look of my login page. This answered all of my questions, plus you provided additional improvements I hadn’t considered.

    BTW, I created a personal plug-in to avoid losing my custom code when updated the theme.

    Thanks!

  11. Hi #Raelene

    I have installed buddypress for registration and login. Now I installed plugin for log out redirect because earlier after logging out user redirected to WP login default form which is solved by plugin. Now new issue is when I entered wrong password in BP login form, It redirects me to default WP login form.

    Can you help to solve it ? I want to redirect on BP login form if someone enter wrong password too.

    Thanks in advance. :)

  12. Hello.

    Great tip it was working for me for long time until i installed “hide my wp” then it stopped working because of url rewriting and exactly because of “New theme path = visual” when i change it back to “themes” it work but when i put it back “visual” it stop working

    any idea where i can edit the hack to make it work ?

    Thank you

  13. Great idea but I still can’t get the correct syntax for the stylelsheet link. I have read the previous solutions but they are not clear to me. Am not sure exactly how the code should be altered to make it work.

    I keep getting:Parse error: syntax error, unexpected ‘<' in …

    I am trying: echo ‘';

    Would somebody please post the correct version so I can try that?
    Thanks

Participate