You know the drill. A visitor on your site devours all your free content and wants access to the premium stuff, so they become a member. From then on, they can read as they please and check out the latest your site has to offer at any time. The only catch is not much of a catch: they just need to log in first.
You want to roll out the red carpet for these folks to assure them your site is not like other WordPress site they’ve seen before. It’s a tall order, and WordPress’s default login page may not be up to it. Sure, it has all the right functionalities and is clearly labelled, but look at it.
That’s a lot of white space and Arial font, and your brand is all about color, sleek typography, and eye candy. This default page isn’t setting the right tone for your users.
You know your mission: giving your members a unique experience even before they log in. No worries if you don’t have a ton of time and resources to devote to giving this page a face lift.
How to Customize Your WordPress Login Page
Essentially, you can customize a WordPress login page in two ways: with or without plugins. If you want to do it manually, you’ll need some knowledge of CSS and PHP, or a little bravery. If you want to avoid coding, you can use a plugin such as Branda.
Why create a custom login page?
We’ve mentioned why creating a custom login page is important for your brand, but it’s also important for your members. You want to provide them with the most seamless experience on your site, right? Well, picture this.
A visitor falls in love with your brand and becomes a member. They are then redirected to the default WordPress login screen, which happens to look nothing like your website. That’s a little suspicious. Maybe the new member just refreshes their page, shrugs, and types in their login info. Not a big deal but also not the frictionless experience you want to deliver to your members.
So how can you deliver the most value to your members even before they login?
Customizing your WordPress login page to reflect the look and feel of your business has never been easier. Why? One word. Rhymes with slugins.
There are plenty of free and premium tools to help you create a custom login page that will attract and delight your visitors from their very first touchpoint on your site. Let’s look at a few that meet a variety of needs and budgets.
Free plugins are perfect for smaller budgets and projects. Here are the 6 best free plugins for the job:
The Login Page Customizer was developed to help beginners and experts alike build custom login pages and forms in a matter of seconds. Maybe you want to change the input field color so that when visitors enter their usernames, it shows up as your brand color. Maybe you want to make the background image a video. With this plugin, you are free to experiment as you please and preview changes instantly. Watch this video to look over one user’s shoulder.
This plugin allows you to customize your login page with ease. How? It allows you to use the WordPress Customizer tool to make changes to the login page. By using this live front end editor, you can forget about the whole routine of saving your work every two minutes, switching browser tabs, and refreshing pages to see how your page will look. Instead, you can preview your changes as you make them.
You can give your login page a complete makeover with the Erident Custom Login and Dashboard. Add your company logo, replace the background image, and even change the colors of your links and set the opacity of your login form. You name it, this plugin can probably do it.
With the Custom Login Page Styler, you can change your logo’s width, height, and link; customize your form’s position and label font size, color, and style; and upload a new background image with a few clicks of your mouse. But this plugin is about more than appearances. By allowing you to add Google reCaptcha security to your login, admin login, and registration pages and limit login attempts, it helps you protect your site from unwanted visitors.
Login Designer is a recent addition to the WordPress plugin ecosystem. It specifically caters to non-developers who want to customize their website’s login page. It provides a unique live-editing experience by allowing users to click on any element from their login page to fine tune it while hiding other settings so that there’s no time lost navigating the customization sections and panels.
Want to quickly customize the look of your login form without touching any code? Branda is your girl. Literally. With Branda, you can stick with simple customizations or completely overhaul your WordPress login page. That means some people can start with a pre-built theme, add their own logo, and call it a day, while others can start from scratch. For the latter group, Branda provides the opportunity to insert a custom background image, replace the username and password input fields, adjust opacity, and even configure drop shadows, colors, and default settings.
How to Customize Your WordPress Login Page Using Branda
If you have three minutes, watch the tutorial below to see how easy this tool is to use.
Click Branda from the WordPress menu.
Scroll down to the box labeled "Front-end."
Click the pencil icon next to "Customize Login Screen."
Click "Choose a Template" to get started.
Choose a template that meets your needs from one of their pre-designed login pages.
From there, you'll have the ability to replace the template's elements with your own. The Customize Login Screen section of the Branda plugin allows you to specify the following (and more):
There’s a lot to love about Elementor’s WordPress Login Widget, but we’ll focus on two major benefits. The first is that you can easily add login forms to any page by embedding them in sidebars throughout your site. The second is that you can fully customize every part of the form, from the button to the layout and much more in between. For those who don’t want to design from the ground up, you can start with one of their three pre-designed templates, including the one below.
This plugin will help you make your login page pretty and secure. Want to allow your visitors to login with their Facebook, Twitter, or Google Plus account? Use this plugin. Or maybe you want to give them the option to register an account or reset their password? Use this plugin. You can also restrict the access of users that aren’t logged in by blocking specific pages, posts, post types, or all content.
Hard to say what this plugin doesn’t give you the control to do. Want to change the logo and color scheme? Reposition the form on the page? Change the colors of every label, field, and border? Or maybe you want to completely replace the default login form with your own using HTML and CSS? White Label Branding can do it.
Now that we've reviewed a few helpful plugins to create rich experiences for all your visitors from the moment they log in, try experimenting with a few. You can always sample the free ones and then work your way up to a premium plugin as your site scales.
Editor's note: This post was originally published in September 2019 and has been updated for comprehensiveness.
Originally published Aug 11, 2020 10:35:00 AM, updated August 12 2020