Home » Resources » 5 Easy Steps to Completely Customize Your WordPress Login Screen

5 Easy Steps to Completely Customize Your WordPress Login Screen

In a previous post, we went over 3 Easy Steps to Add Your Own Logo to the WordPress Login Screen, now lets take it a bit further. In this post you’ll learn 6 Easy Steps to Customize Your WordPress Login Screen.

Lets face it WordPress’ login screen is sooooo boring. So let’s spice it up a bit! In this post you’ll learn 5 Easy Steps to completely customize Your WordPress login screen.

  • How to add a background image to WordPress login screen
  • How to add your logo to the WordPress login screen
  • Adding your own styles to the WordPress login screen
  • How to override WordPress’ login screen styles
  • Removing unwanted elements from your WordPress login screen

Before We Begin

Back Top ⩓


Before we begin you should alread know how to do the following:

  • How to Inspect elements or view source code
  • CSS, HTML and a bit of PHP
  • How to create folders in your WordPress theme
  • How to locate and edit your functions.php and CSS files

Add your Assets to a New Folder

Back Top ⩓


Before we get started you’ll create a new folder named my-login in the root directory of your theme. In this folder you will place your background image, logo and new stylesheet named my-login-styles.css.

Now let’s take a look at your WordPress’ own login code to see what were working with. If you take a look at the source code of your WordPress login screen the body of the HTML code should look like this:

WordPress login screen code
  
    <body class="login login-action-login wp-core-ui  locale-en-us">
        <div id="login">
    		<h1><a href="https://wordpress.org/" title="Powered by WordPress" tabindex="-1">Powered by WordPress</a></h1>
    	    <p class="message">	You are now logged out.<br />
            </p>

            <form name="loginform" id="loginform" action="http://jameelevans.com/wp-login.php" method="post">
                <p>
                    <label for="user_login">Username or Email Address<br />
                    <input type="text" name="log" id="user_login" aria-describedby="login_error" class="input" value="" size="20" /></label>
                </p>
                <p>
                    <label for="user_pass">Password<br />
                    <input type="password" name="pwd" id="user_pass" aria-describedby="login_error" class="input" value="" size="20" /></label>
                </p>
                    <p class="forgetmenot"><label for="rememberme"><input name="rememberme" type="checkbox" id="rememberme" value="forever"  /> Remember Me</label></p>
                <p class="submit">
                    <input type="submit" name="wp-submit" id="wp-submit" class="button button-primary button-large" value="Log In" />
                    <input type="hidden" name="redirect_to" value="http://jameelevans.com/wp-admin/" />
                    <input type="hidden" name="testcookie" value="1" />
                </p>
            </form>

            <p id="nav">
                <a href="http://jameelevans.com/wp-login.php?action=lostpassword">Lost your password?</a>
            </p>

            <p id="backtoblog"><a href="http://jameelevans.com/">← Back to Jameel Evans</a></p>
    		
    	</div>

    	<div class="clear"></div>
    </body>
  
  

In The Code

Notice WordPress uses a number a ID’s and classes to style their form. We can take what we know about the HTML and use the id’s and classes to add our own images and styles. You’ll notice if we try to simply just add CSS styles and refresh that nothing happens. That’s because first you have to tell WordPress to use our own stylesheet.


1 Tell WordPress to Use Your Own styles

Back Top ⩓


Let’s navigate over to your functions.php file and add the following code:

WordPress login screen function
  
    function custom_wordpress_login() {
    echo '<link rel="stylesheet" type="text/css" href="' . get_bloginfo('stylesheet_directory') . '/my-login/my-login-styles.css" />';
    }
    add_action('login_head', 'custom_wordpress_login');
  
  

In The Code

The code above is using the login_head hook with allows us to insert anything to the section of our login screen, even stylesheets, Learn More Here. We are simply linking the style sheet we just created in the function above.


2 Style Your Form

Back Top ⩓


Now the real fun begins! Lets add our own styles to the login form. Navigate over to the new stylesheet you created and add these styles I created for you here:

WordPress login form styles
  
    /*Input text*/
    .login label {
        color: #000000;
        font-size: 16px;
        font-weight: 100;
    }

    /*Input fields*/
    .login form .input, .login form input[type=checkbox], .login input[type=text] {
        background: none;
        border: 1px solid #ced4da;
        border-radius: 5px;
    	-webkit-border-radius: 5px;
    }

    /*Button styles*/
    .login .button-primary {
      width: 120px;
      float:right;
      background-color:#f44336 !important;
      color: #ffffff;
      -webkit-border-radius: 5px;
    	border-color: #aa2e25;
        box-shadow: 0 1px 0 #aa2e25;
    }

    .login .button-primary:hover {
      background-color:#aa2e25 !important;
      color: #ffffff;
      -webkit-border-radius: 5px;
    border-color: #f44336;
        box-shadow: 0 1px 0 #f44336;
    }

    .login .button-primary:active {
      background-color:#f44336 !important;
      color: #ffffff;
      -webkit-border-radius: 5px;
     border-color: #aa2e25;
        box-shadow: 0 1px 0 #aa2e25;
    }

    .wp-core-ui .button-primary {
        background: ##f44336;
        border-color: #aa2e25; 
        box-shadow: 0 1px 0 #aa2e25; 
        color: #ffffff;
        text-decoration: none;
        text-shadow: none;
    }
  
  

In The Code

You can enjoy my styles or go and create your own. You can even individually style your form elements if you like. Go ahead and go nuts with your styling and get as crazy as you want.


3 Add Your Own Logo

Back Top ⩓


To add your own logo add the following styles to your css:

WordPress login custom logo
  
    .login h1 a {
      background-image: url('my-great-custom-logo.png');
    }
  
  

In The Code

Since WordPress’ logo is wrapped in h1 and a tags we used these to add our own logo. Remember to add your logo file name instead of mine.


4 Add Your Background Image

Back Top ⩓


Lets navigate over to the new stylesheet you created in step one and add the following code:

WordPress login background image css
  
    body.login {
      background-image: url('wordpress-login-background.jpg');
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-position: center;
    }
  
  

In The Code

In the bit of code above we are adding our image to the body login class; vertically and horizontally centering it.

Tip

Make sure you choose and appropriately sized image! Remember if your form is 400 px wide and 400px tall, then that’s the amount of space that would be hidden behind your form. Be sure to as creative as you want with it. Try it with video snippets too.


5 Removing Unwanted Elements

Back Top ⩓


Now your design is coming along but you want those pesky ‘lost password’ and ‘back to ‘ links gone. To completely remove them from your WordPress login form all you have to do is following:

WordPress login removing unwanted elements css
  
    .login #nav {
      display: none!important;
    }

    p#backtoblog {
      display: none!important;
    }
  
  

In The Code

The code above simply sets the display of the links to none.


Wrapping Things Up

Back Top ⩓


Now that you have a customized WordPress login screen for your website, you can add them for all your clients!

In a previous post, we went over 3 Easy Steps to Add Your Own Logo to the WordPress Login Screen, now we’ve taken it a bit further. Now that you know how to add your logo to your login screen, you can go read 3 Easy Steps to Add a Dynamic Logo to Your WordPress Theme. If you have anything to add please comment below. If you liked my post please share it with your developer friends.