A Guide To Customizing Your WordPress Login Screen

Custom Login Screen for WordPress
License Adobe Stock

Boring, boring, boring.

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

Don’t believe me?

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

WordPress Default Login Screen
WordPress Default Login Screen – Boring, but accessible.

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

Person Yawning
License: Adobe Stock

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 Login Screen?

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 simply no excuse anymore not to do it. It helps brand the login screen and makes you feel like doing a shaky dance at the same time having pleased 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 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.”

Facepalm
Facepalm – License – Adobe Stock

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

Pros For Custom 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: of course forum customers would like their members to login 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

Paid Memberships Pro available on WordPress.org
Paid Memberships Pro available on WordPress.org

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.

Paid Memberships Pro Login Screen
Paid Memberships Pro Login Screen

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.

BuddyBoss Login Screen
BuddyBoss Login Screen

LearnDash LMS Login Experience

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

Learndash Login Screen Experience
Learndash Login Screen Experience

Making the Case for a Default Login

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.

Peter's Login Redirect available on WordPress.org
Peter’s Login Redirect available on WordPress.org

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:

EWWW Image Optimizer Login Screen
EWWW Image Optimizer Login Screen

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

MediaRon Login Page
MediaRon Login Page

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 Login Screens 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.

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.

login screen,wordpress login screen,wordpress login screen logo,change wordpress login screen,wordpress style login screen,wordpress login screen change logo,wordpress login screen plugin

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

LayerWP Color Scheme
LayerWP Color Scheme

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

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.

I’ve accepted the challenge of #BestLoginScreen and here is my awesome login screen:

[A screenshot of your amazing WP login page]

@mediaronllc, @benswrite
Click to Tweet

Custom Login Page Customizer

Custom Login Page Customizer available on WordPress.org
Custom Login Page Customizer available on WordPress.org

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:

LayerWP Login Screen
Custom Login Page Customizer – LayerWP Login Concept

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

Custom Login available on WordPress.org
Custom Login available on WordPress.org

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.

Custom Login - Login Screen
Custom Login – Login Screen

Branda

Branda available on WordPress.org
Branda available on WordPress.org

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.

LayerWP Branda Login Customization
LayerWP Branda Login Customization

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

Custom Login Page Customizer available on WordPress.org
Custom Login Page Customizer available on WordPress.org

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:

LayerWP Custom Login by Colorlib
LayerWP Custom Login by Colorlib

Custom Login by Austin Passy

Custom Login available on WordPres.org
Custom Login available on WordPres.org

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.

Custom Login - LayerWP
Custom Login – LayerWP

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.

I’ve accepted the challenge of #BestLoginScreen and here is my awesome login screen:

[A screenshot of your amazing WP login page]

@mediaronllc, @benswrite
Click to Tweet
PaidMembershipsPro

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. 

Ronald Huereca

Written By Ronald Huereca

I’m a developer/engineer. I write books, sing karaoke, and love my cats. I’m a huge fan of WordPress. I’m witty, sarcastic, and snarky. I’m also a bit techy.

Also the owner of Mediaron LLC, specializing in WordPress plugin development and consulting.

3 thoughts on “A Guide to Customizing Your WordPress Login Screen”

Leave a Comment

14