A Guide to Customizing Your WordPress Login Page

WordPress login pages. Boring, boring, boring.

Let’s face it: the default WordPress login page is insanely boring, unbranded, and ugly.

Don’t believe me?

Just take a look at the screengrab below so we can all collectively yawn together.

This Post Is Brought to You By

Start Your Membership Site Now to Get Paid with WordPress + PMPro

Seriously. Now I need to grab a cup of coffee and down a few energy drinks. Boring!

I’d also like to take time out of this introduction to point out that this site still has the boring ol’ login screen.

Why Customize the WordPress Login Page?

Whenever I’m creating a client site, customizing the login screen is one of the first steps I take so the client has a branded experience from the beginning.

Why? From my experience, the default WordPress login screen confuses clients. They’ll go to the login screen and send me an angry email: “What the heck is this logo, and why is it on my login screen?”

With so many ways to customize the login screen, there is no excuse not to do it anymore. It helps brand the login screen and makes you feel like you are doing a shaky dance while pleasing the client.

However, the default login screen is not used everywhere, and I see more and more sites that use custom login pages instead of the default.

Custom WordPress Login Pages – A Rant

I had a recent dose of the WordPress product support world when I briefly worked as a technical support engineer. Occasionally, we’d need the customer’s login details.

The details would be sent, and then I’d go to the site and try to log in. It seemed like every other site had a custom login URL (i.e., not the WordPress default). This was frustrating from a support perspective.

I would go back to the customer and ask them, “Where is your login page?”

“Oh, it’s at this address… and don’t forget to add an xyz query variable at the end so we know it’s an admin trying to login.”

All I have to say in that scenario is: “UGH!”

Pros For Custom WordPress Login Pages

I’m not saying custom login URLs are bad. In many cases, they are quite necessary. I’d like to go over some examples with you, and we’ll go into why clients like custom login pages.

• Membership websites: provide a unified login experience for the site and not take users away from the front-end flow.
• E-commerce: allow users to login via an account page and be taken straight to their past purchases and front-end profile.
• Social Media sites: social media solutions like BuddyPress and BuddyBoss try hard to curate an experience that allows users to login seamlessly.
• Forums: forum customers would like their members to log in without being taken away from the forum experience.

Cons for Custom Login Pages

• Some forget to redirect the default WordPress login pages or the login URL isn’t easy to navigate to.
• A lot of custom login pages require extra styling.
• Since most of these are custom login features, it can be complex to match all use-cases.

Custom Login Page Examples

Paid Memberships Pro Login Experience

To create a seamless login experience, Paid Memberships Pro (free plugin) supports a custom login page and I know they worked very hard on it for their unified login experience.

Internally for them, it was a big PITA as there are so many use cases surrounding the login and profile areas, but the developer team knocked it out of the park after some iterations.

BuddyBoss Login Screen

BuddyBoss (Premium plugin) uses the default WordPress login screen but spruces it up a bit to match their platform.

LearnDash LMS Login Experience

LearnDash (premium plugin) uses a popup to help with the login and registration experience.

Making the Case for a Default Login

For most cases, I honestly do not see the point in customizing the login URL. If you already have pretty permalinks enabled, the client can just type in: sitename.com/admin.

Yes, wp-login.php is ugly, and clients can rarely remember the wp-admin shortcut. A URL with /login/ is so much easier to remember. Right?

A better approach to login pages is to have a shortcut and redirect to the default login page instead of reinventing the wheel.

In regards to custom login pages, you can always use the redirect_to query parameter and/or install a plugin that disables the Dashboard for the subscriber role and possibly use a plugin to redirect users away from the dashboard, such as Peter’s Login Redirect, linked below.

The default WordPress login page is secure, well-vetted, and is accessible. But it’s ugly.

Login pages (e.g., /login/) are necessary in certain cases, but they often require further styling to make the form blend into your site. If you do want to make client’s lives easier, create an endpoint and redirect to the default WordPress login landing page instead.

Custom Login Screen Examples

In an attempt to nail the point home, here are two examples of customizing the default WordPress admin screen from two major plugins in the WordPress community.

I’ll be picking on Easy Digital Downloads and EWWW Optimizer.

This first one is for Easy Digital Downloads.

And here is the login screen for EWWW Optimizer:

And for good measure, here’s the one at my business site:

Not horrible, right?

But What About Login Security?

I understand security is a concern, which is one reason to hide the default login screen. But why?

Let’s take a quick lesson in security by obscurity. It began with comment spam.

Site owners understandably do not want to be spammed with comments, so the trick was to rename the file in WordPress so it made it harder for robots to spam your site.

But guess what? It didn’t work (surprise, surprise).

The bots were just reprogrammed to look for variants, and would eventually find your comment form anyway.

The same exists for login screens. If you have a login screen on your site, the bots WILL find it. If you are using a custom login page for security, it’s a waste of time. Your best bet is to use a security tool like WordFence, which can block most malicious attempts at accessing your site.

Jetpack (if you use it) has built-in Brute Protect, which will also protect you from malicious brute-force attempts on your login page.

Custom WordPress Login Pages via Plugins

If you’ve made it this far, you are likely sold that customizing the login screen may be a worthwhile investment for your site or even your client sites.

We’re going to be using plugins from the WordPress Plugin Directory. I’ll pick on some popular and lesser-known plugins that will help me customize the login screen.

My criteria for a decent custom login screen plugin will be:

• Ease of use
• Customization
• Not too salesy

That’s it. I want an easy-to-use plugin and be able to customize my login screen without a lot of pro nags.

So, we’ll have to pick on someone and create a login page for their site. Since LayerWP doesn’t have a custom login, I thought I’d use Ben’s current assets from his site to set the mood and color scheme.

We have a logo and (as far I’m concerned) an idea of a color scheme based on the existing website.

And here’s the color scheme I gathered from different parts of the theme (forgive me, I’m not a designer).

Together with the logo and scheme, we can move forward with attempting to select a login plugin to customize our login screen.

I’ll try to cover some popular ones and less popular ones to make this evaluation fair. I’ll go over each briefly with my initial thoughts, and decide which one is, essentially, the best for this site. I won’t go into depth as far as posting plugin screenshots. I’m only after the end result: a custom login screen that looks halfway decent.

Let’s have a challenge for the reader (4th wall: yes, that’s you).

With some of the tools mentioned below or even your own implementation, using the same assets, let’s help create a kick-ass login screen.

If you’re not sure what to tweet or post, there’s a template below.

The challenge will be posting a screenshot of your current WP login. It will be fun and exciting to see different ideas and implementations.

Let’s begin with the most popular login customizer out there.

Custom Login Page Customizer

My first observation upon installing the plugin is, “No, please not another top-level menu item plugin 🥺.” And from there, I concluded why they needed a top-level item. Add-ons and upsells. A LOT of upsells. It almost makes GoDaddy’s upsells look tame.

But alas, I’m not here to judge the plugin too much. I just want my login screen. But seriously, a top-level menu for a login screen?! Ahem, sorry.

The plugin has an awesome live preview mode in the WordPress customizer, but you’ll run into paywall after paywall if you dive into the secondary options. But from the free version, I think we can do enough.

The plugin does have a ton of options that are hard to sift through, but since it’s in the customizer, it’s only a matter of tweaking this or that and having a live preview.

Here’s the end result using the plugin:

It mostly gets the job done. With the free version, I couldn’t place the logo where I wanted or mess with the text size of the field labels (although I could change their color). I’m pretty happy with the end result aside from the logo and text size, however, but I’ll let y’all be the judge.

Custom Login

This one is authored by one of my Twitter friends, so I should be gentle. That being said, once activated, I had no idea where to go to customize my login. I recommend a settings link on the plugin screen. Props for not having a top-level menu item though.

I wasn’t able to do much without having to resort to a ton of custom CSS, which may be what the plugin is going for.

Branda

Our next victim, ahem, login plugin, is Branda. I feel like I’m getting rick-rolled with another top-level nav item. I’m sure they have their reasons. This plugin has a low-install count, so let’s begin figuring out if correlation equals causation.

Since this plugin is a utility plugin, the custom login functionality is a module you must activate.

Like the Custom Login plugin mentioned above, there is no real-time preview. However, after several rounds of figuring out what modifies what and an endless amount of refreshing I came up with a passable result.

Despite the modularity of the login screen, I actually like this login screen compared to the other two.

The plugin is overkill for just a login screen; it’s a plugin that helps rebrand the admin. So if you’d like to give that a go as well, then this plugin is for you.

Custom Login Page Customizer by Colorlib

Our second-to-last victim is Custom Login Page by Colorlib.

Again, it has a top-level menu item (ugh!), which is just a shortcut to the customizer. Having everything in the customizer with no upsells that I can see is a nice option, however.

There are several templates to choose from (and free), but I’ll go with just customizing the default screen.

After a few minutes of fiddling around with the base template, here is the result:

Custom Login by Austin Passy

I’ve tried Custom Login by Austin Passy in the past, and I’m curious how this plugin stacks up to the ones already reviewed.

The plugin does have some upsells, but they are out of the way, and props on not having a top-level nav item. There is no customizer preview, so it’s going to be some trial-and-error again on creating a brandable admin screen.

The plugin does also offer a wealth of options such as modifying the admin details (like removing the login shake, removing lost password prompt, and more).

Here’s the end result, which is not horrible.

The Verdict

Since I was only after the end-result (a custom login screen), I went with that as my main metric. Love or hate the design (I’m not a designer, obviously), I reviewed five custom login plugins.

The best of the bunch, in my non-humble opinion, is Custom Login Page Customizer by Colorlib. It has a customizer view (for real-time updates), and not really any upsell notices from what I can tell.

Check out the plugin (and winner) below:

A close second, or honorable mention, is Custom Login by Austin Passy. If it had a customizer option, it would be number one, but the wealth of options makes it a solid number two.

Share Your Own WP Login Screens

Again, you’re welcome to join us on social to post your own login screen so we can all take away some inspiration.

Cheers.

Post Sponsor:

Need more than a custom login page? Paid Memberships Pro is the most complete WordPress membership plugin. Charge recurring subscriptions for restricted content and set up custom registration, user login, and frontend profiles to manage members and grow your community. 

Start Your Membership Site Now to Get Paid with WordPress + PMPro