WordPress is for sure a fantastic and lovely tool, but when it comes to its login page design, things are not that great anymore. The good new for us is that it gives us the possibility to change it as we want.

There are many plugins out there, free or paid ones, that can help in redesign the login page, but as I like to have my hands dirt with code, we are editing it using a little bit of PHP and CSS.

Nothing hard or fancy. Just few lines of code to help us having a great experience with the login page.

What we are going to achieve

Let me show you visually what we are going to achieve in this short and simple tutorial. Let’s start with the basic.

This is the WordPress default login page you can usually see when you try to access WordPress back-end via “/wp-admin” or “wp-login” url (until you won’t change it for security reasons).

And this is an example of what we can create with few lines of code added to our custom theme or to any child themes we want to use for our projects.

What files we need for our login page

First thing first is to prepare 3 different images for what we want to achive: a logo, a background image and a ticker.svg file.

For the logo I like to use a SVG file, but you can also use a PNG one or a WEBP with transparency on background.

The background image is not mandatory and you can also choose to set a background color and avoid it. I think a background image with a dark or white overlay is more beautiful to have, but anyone has his/her own preferences.

Finally the ticker.svg to change the blue one of the default login page that you can see when you click on “Remember me” checkbox. I’m a good guy and this is the code you need to get a ticker.svg easily. Just open your code editor, mine is VSCode, create a new file and call it “ticker.svg”, then copy this code and you’re ready to go.

<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M14.83 4.89l1.34.94-5.81 8.38H9.02L5.78 9.67l1.34-1.25 2.57 2.4z' fill='#4D9CD5'/></svg>

Later you only need to change the color hex code in the “fill” property with your accent or brand color.

Where to store our images and svg files

You can add the code you need for editing the WordPress login page both in a plugin, in “mu-plugins” folder or in your functions.php.

In this case we are going to use this last.

Both if you’re using a custom theme or a child theme, let’s create an “assets” folder and inside it an “img” folder where to store all those files. Now what we need to do is just to copy our logo, background and ticker image inside it.

Easy!

Add the code you need for your changes

Finally is time to add a little bit of code to our “functions.php” file. I will give you the code in 3 different steps.

The first step is really straightforward. We just store our logo, background and ticker files path in 3 different constant variables. We can call them: LOGO, BACKGROUND and TICKER. We also store our logo width and height is two different constants. You need to change them based on your logo dimension and aspect ratio. Play with dimensions a bit and change as needed.

/**
 * Store our logo, background image and ticker in three different variables
 */
define('LOGO', get_stylesheet_directory_uri() . '/assets/img/logo.svg');
define('BACKGROUND', get_stylesheet_directory_uri() . '/assets/img/background.jpg');
define('TICKER', get_stylesheet_directory_uri() . '/assets/img/ticker.svg');
define('LOGOWIDTH', '214px');
define('LOGOHEIGHT', '128px');

The second step is to use the WordPress action hook called “login_enqueue_scripts” to enqueue our style inside the login page. We use a custom function called “mb_login_style” (you can name it as you like) to print our styles when the login page url is opened.

/**
 * Edit styles as needed starting with accent or brand colors
 */
function mb_login_style() { ?>
  <style type="text/css">
    /* Admin CSS Variables */
    :root {
      --mb-login-clr-primary: #4D9CD5;
      --mb-login-clr-primary-clearer: #66B6D2;
    }

    /* Background styles */
    .login {
      min-height: 100%;
      background: linear-gradient(90deg, rgba(8, 16, 21, .85), rgba(8, 16, 21, .85)), url("<?php echo BACKGROUND; ?>");
      background-size: cover;
    }

    /* Logo styles: change logo width and height as needed */
    #login h1 a,
    .login h1 a {
      background-image: url("<?php echo LOGO; ?>");
      width: 214px;
      height: 128px;
      background-size: 214px 128px;
      background-repeat: no-repeat;
    }

    /* A tag focus */
    .login a:focus {
      box-shadow: 0 0 0 1px var(--mb-login-clr-primary), 0 0 2px 1px var(--mb-login-clr-primary-clearer) !important;
    }

    /* Button and Button Primary focus */
    .login .button-primary:focus,
    .login .button:focus {
      box-shadow: 0 0 0 1px #fff, 0 0 0 3px var(--mb-login-clr-primary) !important;
    }

    /* Inputs styles: username, password and remember-me inputs */
    .login input[type=text]:focus,
    .login input[type=password]:focus,
    .login input[type=checkbox]:focus {
      border-color: var(--mb-login-clr-primary);
      box-shadow: 0 0 0 1px var(--mb-login-clr-primary);
      outline: 2px solid transparent;
    }

    /* Icon inside password input styles */
    .login .dashicons-visibility,
    .login .dashicons-hidden {
      color: var(--mb-login-clr-primary);
    }

    /* Focus styles for hide password button */
    .login .button.wp-hide-pw:focus {
      border-color: var(--mb-login-clr-primary) !important;
      box-shadow: 0 0 0 1px var(--mb-login-clr-primary) !important;
      outline: 2px solid transparent;
    }

    /* Ticker styles for remember-me checkbox when checked */
    .login .forgetmenot input[type=checkbox]:checked::before {
      content: url("<?php echo TICKER; ?>");
    }

    /* #nav and #backtoblog link styles */
    .login #nav a,
    .login #nav a,
    .login #backtoblog a,
    .login #backtoblog a {
      color: #f6f7f7 !important;
      transition: all 350ms ease !important;
    }
    
    .login #nav a:hover,
    .login #nav a:focus,
    .login #backtoblog a:hover,
    .login #backtoblog a:focus {
      color: var(--mb-login-clr-primary) !important;
      box-shadow: 0 0 0 1px var(--mb-login-clr-primary), 0 0 2px 1px var(--mb-login-clr-primary-clearer) !important;
    }

    /* Submit button styles */
    .login .button-primary {
      background: var(--mb-login-clr-primary) !important;
      border-color: var(--mb-login-clr-primary) !important;
    }

    /* Privacy Policy link styles */
    .login .privacy-policy-link {
      color: var(--mb-login-clr-primary);
    }

    /* Language switcher styles: on focus */
    .login .language-switcher select:focus {
      border-color: var(--mb-login-clr-primary);
      color: var(--mb-login-clr-primary);
      box-shadow: 0 0 0 1px var(--mb-login-clr-primary);
    }

    /* Language switcher styles: on hover */
    .login .language-switcher select:hover {
      color: var(--mb-login-clr-primary);
    }

    /* Language switcher styles: on focus */
    .login .language-switcher select:focus {
      border-color: var(--mb-login-clr-primary) !important;
      color: var(--mb-login-clr-primary) !important;
      box-shadow: 0 0 0 1px var(--mb-login-clr-primary) !important;
    }

    /* Reset Firefox inner outline that appears on :focus. */
    /* This ruleset overrides the color change on :focus thus needs to be after select:focus. */
    .login .language-switcher select:-moz-focusring {
      text-shadow: 0 0 0 var(--mb-login-clr-primary) !important;
    }

    /* Remove background focus style from IE11 while keeping focus style available on option elements. */
    .login .language-switcher select:hover::-ms-value {
      color: var(--mb-login-clr-primary) !important;
    }

    .login .language-switcher select:focus::-ms-value {
      color: var(--mb-login-clr-primary) !important;
    }

    /* Language switcher styles: submit button */
    .login .language-switcher input[type=submit] {
      color: var(--mb-login-clr-primary);
      border-color: var(--mb-login-clr-primary);
      background: #f6f7f7;
      vertical-align: top;
    }

    /* Loged out message styles */
    .login .message {
      border-left: 4px solid var(--mb-login-clr-primary) !important;
    }
  </style>
<?php }

add_action('login_enqueue_scripts', 'mb_login_style');

I’ve added almost any style you can edit inside login page. You can remove what you do not need or add what you want. It’s simple CSS and if you like to play with it, you can create almost what you want inside your custom login page.

Don’t forget to open the “ticker.svg” file we created before and change the fill color with your accent or brand color. So also the ticker will be great.

The last step is to use the WordPress filter hook called “login_headerurl” to redirect the user to our Home page if he/she clicks on the logo. This is an optional step, but I find it to be useful. Just add the code below to your “functions.php”.

/**
 * Login logo URL: redirect to home page
 */
function mb_login_logo_url() {
  return home_url();
}

add_filter('login_headerurl', 'mb_login_logo_url');

We finally have our custom login page design. After years working with clients I can tell you that they will fall in love with it. It’s something that really makes any project unique in no time.

I really hope this tutorial will help you out.

Code Long and Prosper!