on 10th Nov 2022
Every WordPress website comes with a set of default pages. One such page is the user login page. By default, it looks the same on all WordPress websites. Still, most website owners never make any changes to their login page. Yet, there are quite a few benefits to having a custom WordPress Login Page.
And, what's critical is that creating one is easier than you think! But, before we get to the “how”, let’s take a quick look at the “why”.
Table of Contents:
1. Why You Should Create a Custom WordPress Login Page
Increased Website Security
Extra Branding Capabilities
Better User Experience
A shot of motivation!
2. What Should A Custom WordPress Login Page Have?
3. How to Create a Custom WordPress Login Page?
Customizing WordPress Login Page with Code
Using Plugins to Customize Your WordPress Login Page
4. Start Creating Your Custom WordPress Login Page
1. Why You Should Create a Custom WordPress Login Page
The first benefit to having a custom login page is that it simply looks different. This alone makes your website stand out (of course, as long as you’re not the only person using it).
But, that’s not the only benefit of customizing your WordPress login page.
Increased Website Security
By default, every WordPress login page can be found at https://yourdomain.tld/wp-login.php/. But if I (and everyone else) know where to look for your login form, so do the people who’ll try to hack your site.
A custom WordPress login page allows you to change the URL, and hide the page. Of course, this alone doesn’t give you 100% protection.
Still, it reduces the risk of most automated security attacks.
Additionally, when customizing your login page, you can add extra security features. The most popular ones include a Two-Factor Authentication (2FA) or Captcha. These further help increase the security of your site.
Extra Branding Capabilities
When creating your custom login page, you can customize all its elements - from logo to colors or login form. This enables you to put your brand elements on the page, reminding users of what website they’re on.
Lastly, a branded login page helps build trust and adds credibility to your brand.
Better User Experience
If you use your custom WordPress login page as part of a client portal, it can make you look more professional. This look helps create a good first impression.
Additionally, a login page is a page that everyone sees whenever they visit your website. That's assuming you require them to log in each time they do.
This enables you to use the page to share important notifications or news with your site’s users.
A shot of motivation!
The last reason may not seem serious… but it really works! If you’re the sole person working on the website, you can create a custom login page with a theme that motivates you to keep pushing.
This works great if you want the site to turn into a business and need a reminder of why you’re putting in all the hard work.
2. What Should A Custom WordPress Login Page Have?
Every generic WordPress page has the following elements:
- A WordPress logo
- A login form with two fields: username and password.
- A “remember me” check, for saving the user's password.
- A Login button
- A password reset link
- And a link back to one’s website.
It's a no-brainer that if a generic login page has all these elements, your custom page needs them too. After all, every custom page requires a way for visitors to log in. But, that’s where the similarities end.
For example, you don't have to rely just on a username or password to allow people to log in. Instead, you can let users use third-party tools (such as social media or their Google account).
You may also want to add extra security features, such as a CAPTCHA or a Two-Factor Authentication (2FA).
Of course, don’t forget to customize the looks of your page. Ideally, you want to change:
- The logo
- The background
- The colors and typography
Naturally, there may be some custom features that you want to add that are not listed here. When it comes to customizations - the sky's the limit (as long as it doesn’t affect customer user experience).
3. How to Create a Custom WordPress Login Page
There are two ways in which you can change the looks of the login page:
- Edit WordPress files (requires a little bit of coding knowledge - enough to edit existing code).
- Use one of the WordPress plugins. The good news is, you don’t necessarily need a separate plugin to edit the page. Some WordPress page builders allow you to edit the login page too.
First, let’s see how to build a custom login page with a little bit of coding.
Customizing WordPress Login Page with Code
The code for customizing login pages can be found over at WordPress codex. Let’s look at two key elements - the logo and the login form.
Editing WordPress Login Page Logo
By default, the WordPress logo gets added to the site in the following snippet:
To change the logo, add the following to your theme’s function.php file. Note that it’s recommended to use a WordPress child theme when editing the files.
To ensure the logo links to your homepage (and not WordPress’), add the following snippet:
function custom_login_page_logo_link() {
return home_url();
}
add_filter( 'logo_headerurl', ‘custom_login_page_logo_link' );
Creating a Custom Login Page Template
First, create a .php file that’ll serve as the new page template. Name the file in a way that makes it clear what the file is about - for example, “custom_wp_login_page.php”.
Next, edit the file and put the following code inside the page:
admin_url(),
'form_id' => 'custom_wp_log_in_form',
'label_username' => __( 'Username:' ),
'label_password' => __( 'Password:' ),
'label_remember' => __( 'Remember Me' ),
'label_log_in' => __( 'Custom Log In Text'),
'remember' => true
);
wp_login_form( $args );
}
?>
The above code is enough to generate a login form on the page.
Once you’re done editing, save changes and put the page in your child theme (recommended) or parent theme folder.
Of course, you still need to edit the page and style it to suit your branding.
To do that, you can either use the standard WordPress editor, your theme’s page builder, or code the changes directly in the file. To do the latter, follow the instructions you can find in WordPress codex.
Editing WordPress Login Page URL
By default, you can access the login page by typing in https://yourdomain.tld/wp-login.php. If you’re logged out, you can also do that by entering https://yourdomain.tld/wp-admin/ (which will redirect you). To change that link, add the following to the functions.php file.
Note: The below code assumes that your new login URL is /custom-login/. To change it to a custom link, edit it in all the below snippets:
function redirect_custom_login_page() {
$login_page = home_url('/custom-login/');
$page_viewed = basename($_SERVER['REQUEST_URI']);
if($page_viewed == "wp-login.php" && $_SERVER['REQUEST_METHOD'] == 'GET') {
wp_redirect($login_page);
exit;
}
}
add_action('init','redirect_custom_login_page');
Naturally, you also need to decide what to do whenever your login fails or any of the fields are empty. Here’s the code to help you redirect users back to the login page whenever your login fails:
function custom_login_failed() {
$login_page = home_url('/custom-login/');
wp_redirect($login_page . '?login=failed');
exit;
}
add_action('wp_login_failed', 'custom_login_failed');
And here’s the code to redirect back to the login page whenever one of the fields is empty:
function verify_user_credentials($user, $username, $password) {
$login_page = home_url('/custom-login/');
if($username == "" || $password == "") {
wp_redirect($login_page . "?login=empty");
exit;
}
}
add_filter('authenticate', 'verify_user_credentials', 1, 3);
Lastly, a snippet to redirect people to the right page whenever they log out:
function redirect_after_logout() {
$login_page = home_url('/custom-login/');
wp_redirect($login_page . "?login=false");
exit;
}
add_action('wp_logout','redirect_after_logout');
Of course, before you create those redirects, you need to have the new WordPress login page ready.
Note: If you’d like to learn more about WordPress hooks, check out this article.
Using Plugins to Customize Your WordPress Login Page
If you don’t want to do any coding, there are several plugins you can use to create a custom login page. The benefit of using a plugin is that you can edit the page much faster. Moreover, it gives you visual control over the looks of your Custom WordPress Login Page.
And, if you own several websites, you can install and activate the plugin on all of them in a single click. All you need is a WordPress management app such as WPBlazer with its plugin and theme management feature.
LoginPress
LoginPress is probably the most straightforward login page editor on the list. To edit the login page, simply use an enhanced version of WordPress customizer.
Then, head over to plugin settings to edit things like login page slug or security. To secure your page, the plugin allows you to hide the login page, as well as limit the number of login attempts. You can also enable reCAPTCHA or set the session to expire.
The plugin offers several free and pro add-ons, including social login or autologin.
Custom Login Page Customizer
Custom Login Page Customizer is a plugin dedicated to editing WordPress login pages. The plugin allows you to change the entire design of your login page with no coding skills. Interestingly, its customization possibilities include even website error messages.
Of course, you can still edit every element of the page. These include the logo, background, login form, buttons, and even password reset and welcome messages.
Admin Custom Login
Another great login page editor is the Admin Custom Login plugin. Similarly to the aforementioned plugins, it allows you to edit every element of the login page.
These include login form colors, buttons, as well as redirects, and Google reCaptcha. You can also export and import all plugin settings and connect social media to your login form.
The plugin PRO version comes with additional security and design settings. These include social media login, restriction by user roles, or IP address restrictions.
Formidable Forms
Formidable Forms is named the most powerful WordPress form builder plugin. It lets you build custom registration forms, and manage user profiles and permissions. You can then add those forms anywhere on your website.
Its biggest advantages are the number of different forms and integrations available. The only drawback is that to access the User Registration feature, you need their business plan. This comes at $199.50/year for the first year and $399/year for each consecutive year.
While it may seem expensive, you get access to a huge list of features most other forms builders don’t offer. These include a Zapier integration, Twilio SMS, and Email Marketing.
Ninja Forms
The next plugin, Ninja Forms, is a drag-and-drop contact form builder for WordPress. Its biggest advantage is its simplicity - you don’t need coding skills to create even complex forms. And, if you need any help, their dedicated support team is ready to help you.
The beauty of it is that you can adjust layouts, set conditions, and even create multi-page forms in just a few clicks of a mouse button.
But, if you want to create a user registration form, you’ll need their User Management add-on. The add-on costs $49 for a single-site license (and the plugin itself costs another $49/year).
The addon comes with customizable form templates for registration and user login forms. This allows you to create a fully unique user registration experience with ease.
SeedProd
Unlike the aforementioned plugins, SeedProd is the first theme and landing page builder in the list. The plugin allows you to create coming soon, maintenance, sales, and squeeze pages.
You can also use it to design a stunning custom WordPress login page. The way to do this? You do it the same way you'd create any other WordPress page!
The only drawback is, you need the PRO version to access SeedProd’s custom login page customizer.
Beaver Builder
Just like SeedProd, Beaver Builder isn’t just a login page builder. Rather, it’s a complete WordPress page builder which you can use to create a custom WordPress login page.
However, to be able to create a login page using the plugin, you’ll need its pro version ($99/year, then renews at a 40% discount). You then need to install both the plugin and a PowerPack addon. The add-on lets you add WordPress forms, as well as set the page you create as a WordPress login page.
Elementor
Lastly, there’s Elementor - one of the most powerful website builders. Similarly to other page builders, it allows you to create a custom WordPress login page the same you’d create any other page. And, just like with other plugins, you can't build a login page with its free version.
To do it, you need a PRO version together with the Ultimate Addons for Elementor extension. The add-on itself costs between $57 - $249 per month (paid annually) or ($237 - 937) for a lifetime license.
To then create the page, simply go to Pages > Add New. Once you're in the editor, click the Edit with Elementor button and start customizing the page.
4. Start Creating Your Custom WordPress Login Page
WordPress login page doesn’t have to be boring. With the right plugin (or a little bit of code), you can easily create a stunning login page. One that'll be secure, help your brand, and impress your clients.
But, if you own or manage multiple websites, a plugin can save you plenty of time. Especially if you use WP Blazer’s plugin and theme management feature to install it on all your sites.
It allows you to add and activate plugins on multiple websites with a few clicks of a button.
You can try it out now (and many of its other great features) for 14 days for free. Start your free WPBlazer trial now!
