How To Customize the WordPress Login Page (Easy & Advanced Methods) 2

How To Customize the WordPress Login Page (Easy & Advanced Methods)

WordPress has changed the face of web design completely, and yet the default login page over at wp-admin is still bland and uninspiring.

When designing a website, if you’re anything like me then you want to provide as much value as you can for your client. You spend hours tweaking margins and headers, making sure there’s enough white space blended in with the amazing color scheme, and you can’t wait to show it off to them.

That is, until they try to log in to the site and get greeted by an off-white box with a couple of blank fields and buttons in the middle.

Having a custom login page for your WordPress site might not seem like a big deal, but when your clients are used to seeing the same thing over and over again, adding something in like that can make a big difference to their first impression of your work.

How To Customize the WordPress Login Page (Easy & Advanced Methods) 3

In this article you’ll learn how to build a custom WordPress login page in two different ways, depending on how hands-on you want to get:

  1. Using a plugin
  2. Manually editing CSS and adding stylesheets

A Step-by-Step Guide on Creating a Custom WordPress login page

We’ve made this guide as simple and easy to follow as possible, and if you don’t like the look of one method don’t hesitate to try something else.

Customizing the WordPress login page with a plugin

If you’re a web developer then you’ll probably want more control over exactly how this is implemented, so you’ll likely want to skip right ahead to method #2. But, for those of you who want to save time, experiment, and get up and running right away, then using a plugin is the best option.

There are a lot of plugins out there, but we went with the top search result: “Custom Login Page Customizer” by LoginPress.

How To Customize the WordPress Login Page (Easy & Advanced Methods) 4

Step 1: Install and activate the plugin

As with any other plugin on WordPress, go ahead and search for it or click this link to go directly to the download page, press install, and then activate the plugin.

Once it’s activated, hover over the LoginPress tab on the left hand side of your dashboard and click on customize.

Note: You’ll be prompted to share your data and email with the company, but if you look closely you’ll see a small “skip this step” link underneath.

How To Customize the WordPress Login Page (Easy & Advanced Methods) 5

Once you get used to the layout, changing particular aspects of the login page become simple. You can customize the background, logo, colors, text, and a lot more. I’d recommend spending some time playing around with it and seeing what you can come up with.

I’m not much of a designer myself, but after around 15 minutes of tweaking I ended up with something like this:

How To Customize the WordPress Login Page (Easy & Advanced Methods) 6

Most of this can be done through the default menus. However, if you want to change the position of the form like I’ve done you’ll need to add some additional CSS. Alternatively, you can invest in the pro version and get access to their premium templates – but where’s the fun in that.

Step 3: Adding your own CSS to the plugin

If you’re already familiar with CSS/JS then you won’t need too much explanation of what to do. Simply head over to the “Custom CSS/JS” tab on the plugin and get to work.

How To Customize the WordPress Login Page (Easy & Advanced Methods) 7

Here are some handy CSS selectors for the wp-login page:

body.login
body.login div#login
body.login div#login h1
body.login div#login h1 a
body.login div#login form#loginform
body.login div#login form#loginform p
body.login div#login form#loginform p label
body.login div#login form#loginform input
body.login div#login form#loginform input#user_login
body.login div#login form#loginform input#user_pass
body.login div#login form#loginform p.forgetmenot
body.login div#login form#loginform p.forgetmenot input#rememberme
body.login div#login form#loginform p.submit
body.login div#login form#loginform p.submit input#wp-submit
body.login div#login p#nav
body.login div#login p#nav a
body.login div#login p#backtoblog
body.login div#login p#backtoblog a

These selectors allow you to customize everything from the whole form using body.login div#login (which is what I did on my page), to the submission button, forgot password link, and colors of each element.

However, if you’re not too familiar with CSS – don’t worry. If you just want to change the placement of the entire form, simply copy and paste the following code into the “Custom CSS” box shown in the picture below:

body.login div#login {
  margin-top: 10%;
  margin-bottom: 50%;
  margin-right: 20%;
  margin-left: 60%;
}

All this does is create a margin – basically blank space – between each edge of the form and the corresponding side of the screen. Change these numbers around to your heart’s content until it ends up exactly where you want it to be.

Similarly, if there’s a specific thing you want to change just replace “body.login div#login” with a difference selector from above, and then add your own CSS to it. I highly recommend using W3Schools if you ever need more information or want to learn CSS.

Just remember that it won’t update the visual editor automatically. You’ll need to visit your live wp-login page or publish and refresh to see any changes.

Step 4: Don’t forget to publish your work

This goes without saying but it’s easy to forget. Once you’re finished, make sure you publish your beautiful new WordPress login page so you don’t lose it forever.

Customizing Your WordPress Login Page Using CSS and Custom Stylesheets

This is certainly the most complex method on the list, but if you’re familiar with CSS, PHP, and editing theme functions in WordPress it shouldn’t be much of a problem.

If you only need to make one or two changes, you can simply add a few lines into your functions.php file in the WP theme editor.

How To Customize the WordPress Login Page (Easy & Advanced Methods) 8
//This will remove the lost password text
function my_login_page_remove_password_text() { ?>
    <style type="text/css">
        body.login div#login p#nav a {
          display: none;
        }
    </style>
<?php }
//This loads the function above on the login page
add_action( 'login_enqueue_scripts', 'my_login_page_remove_password_text' );

Copy these into the functions.php file at the top:

How To Customize the WordPress Login Page (Easy & Advanced Methods) 9

And as we can see the text has been removed from the WordPress login page:

How To Customize the WordPress Login Page (Easy & Advanced Methods) 10

You can customize this however you want using different selectors that we mentioned above, but it can get messy fast.

If you need to make a lot of changes to your login page then it’s not ideal to keep creating new functions one at a time. This is where stylesheets come in handy.

Using login_enqueue_scripts to load a custom stylesheet

The best way to edit your WordPress login page is to build your own CSS/JS stylesheet and add a function to your theme to load it in.

Firstly, you need to add a function into your theme. To do that, copy and paste the following code into functions.php:

function my_login_stylesheet() {
    wp_enqueue_style( 'custom-login', get_stylesheet_directory_uri() . '/style-login.css' );
    wp_enqueue_script( 'custom-login', get_stylesheet_directory_uri() . '/style-login.js' );
}
add_action( 'login_enqueue_scripts', 'my_login_stylesheet' );

This will then allow you to make changes to a stylesheet and have them take effect on the WordPress login page.

How To Customize the WordPress Login Page (Easy & Advanced Methods) 11

If you won’t be adding any JS into the page then you can remove the 3rd line from this block of code.

Once that’s done, the next thing you need to do is write up a CSS stylesheet to use for the login page named “style-login.css”, or whatever you choose to use in the function above.

Now, we’re not going to fill this whole article with the complete guide to CSS. If you’re reading this section then we assume you’re already familiar with how to write it. If you’re not, there are plenty of resources online to help you learn, or you can utilize one of the plugins available to customize the login page.

Note: The style-login.css file should be placed in the theme’s directory alongside the functions.php file with the theme’s style.css (in order for it to be picked up when enqueued).

Summary – Customize Your Login Pages To Suit Your Brand

Hopefully, after reading this guide, you’ve learnt how to customize your WordPress login page and create something worthy of your skills as a developer.

Whether you’re manually coding it with CSS and JS or using a simple plugin, you can guarantee your clients will appreciate your attention to detail as opposed to seeing the the WordPress brand which they may be unfamiliar with.

If you’re looking for ways to take your web development to the next level and eliminate almost all of the day-to-day stress of working with a client, take a look at Atarim – our agency management platform, and start delivering projects 8x faster.

Leave a Comment

Your email address will not be published. Required fields are marked *