Categories: WordPress Tutorials

Create a Custom Login, Registration, & Password Page in WordPress

WordPress comes standard with various types of forms including login, registration, password protection, and contact forms, etc. However, these are simple boxes for the users with options to fill in emails or passwords only, and of course, you want something more dynamic!

Also, running community-powered websites, like WordPress membership site or a premium online store, requires you to show users a login and password page frequently. Since the default login, registration, or password protection form isn’t really welcoming, you should personalize all elements in the forms to create a better user experience.

In this article, we’ll discuss common reasons for creating custom WordPress login, registration, and password pages, and then provide solutions to customize them. Whether you are a seasoned WordPress user or just want to dip your toes in the WordPress world, our detailed guide will streamline your custom form building experience.

Why You Should Style Login, Registration, and Password Pages

There are numerous reasons to why you should customize your WordPress forms.

Maintain Brand Consistency

WordPress login and registration pages show WordPress branding and logo which links to WordPress.org by default. This is fine if you’re the only one with admin access.

But if you have a lot of members logging in to your site every day, why don’t you replace WordPress’s logo with yours to give your brand more exposure? Also, with your logo on the login page, it gives your business a more professional look and creates consistency in your company branding.

Improved User Experience

The default WordPress login page looks generic and boring. And so when we say style your forms, it doesn’t just mean making changes to the design only but giving users a better UX after they’ve logged in. Once they login, make sure they land on a page that looks good and has all the info they require to make their experience better.

Even something as little as giving your users the option to show or hide the password as they type it on the password form can improve your user experience, so make sure whatever form you’re designing, you’ve thought it through.

Secure Your WordPress Site

Customizing the default form also increases your site’s security. Since WordPress uses the default login URL https://yourdomain.com/wp-admin for all websites, hackers can search for your login page with ease and attempt to login thought brute force attacks.

That’s where a custom login URL comes in handy. You can change the /wp-admin slug to a more complex address so that automatic scripts and hackers can’t find it. You can even apply captchas and other security measures in the login and password page to reduce spam.

Enhance Navigation

Inserting elements such as navigation links or social icons brings additional value to your visitors and a way to promote and boost your social channels.

So all in all, creating a custom login or password form has more value than you initially may have thought.

Create a Custom Login Page with WPForms Plugin

Now let’s learn to create a custom login page with the WPForms plugin. But before we do that, let’s take a look at some inspiring examples to give us an idea of the ways we can play this custom login game.

Examples of inspiring WordPress login pages

While some websites tailor their login forms to match the site theme, others impress visitors with a cool background image. Here are some examples of outstanding custom WordPress login pages.

WPForms Login Page

WPForms custom login page uses a different layout from the WordPress default login form. While the left column on the page shows the brand logo and an area to fill in the email address and password, the right one introduces and promotes its community. They’ve even added different Call-to-Actions such as introducing the WPForms VIP Circle Group on Facebook and a button to “Learn More and Join” the community.

MITSLoan Management Review

Unlike WPForms login form which includes a lot of promotional information and a custom inspiring background, MITSLoan Management Review takes a more minimal approach to their login form. There are no extra CTAs or colorful images, and instead, it only displays the brand name, email and password field, the forgot password link, and the homepage redirect link.

Diprella

If you look at the WordPress default login page and then come across Diprella’s, we’re sure you’ll say “WOW”. This custom login page that combines both the sign-up and sign-in pages in a GIF format is both eye-catching and different than what you normally come across, so it really stands out.

We’ve gone through 3 examples of popular and inspiring custom WordPress login pages. Are you excited to create one for your own now?

Let’s now explore how WPForms Plugin can help.

Creating a Custom WordPress Login Page Using WPForms Plugin

Considered as the most popular form builder plugin on WordPress repository, WPForms comes in at a solid 2 million users. The plugin lets you create not only contact forms but also custom login and registration forms.

Step 1: Install WPforms plugin

First, you have to install the plugin. Go to Plugin → Add New from your WordPress navigation menu. Then search for “WPForms” in the Keyword box. Just install and activate the plugin from here.

Once activated, WPforms will appear in your WordPress sidebar. You can click on the WPforms icon to go to the Settings page and enter the license key shown under your account on the WPForms website.

Step 2: Install User Registration Forms addon

Since WPForms primarily helps create contact forms, you need to insert the User Registration Forms addon in order to build custom user registration and login form in WordPress.

Head to Addons under WPForms in the navigation menu first. Next, look for the User Registration Forms addon and hit the Install Addon button. You are now ready to create your own custom login forms.

Step 3: Create a Custom Login Form with WPForms Plugin

The following guide shows you how to create and customize your login pages with ease:

  1. Go to WPForms → Add New and look for the User Login Form template.
  2. Hover on the template and click on the Create a User Login Form button.
  3. Select extra fields you want to add to the form along with the required fields.

Step 4: Insert the custom login form to a WordPress Page

You need to embed the form to your login page before customizing it. To do that, simply add the WPForms block to your page from the editing screen and choose the form you just created.

Unless you use a page builder to create a custom page layout, WPForms will use your theme’s page template and style by default. With a page builder, you can add a background image, the logo, and columns to display the text.

Customize Login Logo

To display the brand logo and change the login page URL, follow these 5 steps:

Head to Editor under Appearance in your WordPress dashboard

Select your Theme Functions (functions.php) file under the Stylesheet

Place this code in the functions.php file

function wpb_login_logo() { ?>
<style type="text/css">
#login h1 a, .login h1 a {
background-image: url(http://path/to/your/custom-logo.png);
height:100px;
width:300px;
background-size: 300px 100px;
background-repeat: no-repeat;
padding-bottom: 10px;
}
</style>
<?php }
add_action( 'login_enqueue_scripts', 'wpb_login_logo' );

Replace the background-image URL with your desired image URL

Add the code below to your functions.php file. Although you use the above code to modify the logo, it still links to WordPress website. The following code helps replace the WordPress website URL with your site URL

function wpb_login_logo_url() {
return home_url();
}
add_filter( 'login_headerurl', 'wpb_login_logo_url' );

function wpb_login_logo_url_title() {
return 'Your Site Name and Info';
}
add_filter( 'login_headertitle', 'wpb_login_logo_url_title' );

Change “Your Site Name and Info” to your site brand name.

Style User Registration Pages in WordPress

Registration pages are used to save user information in your database for future access. You can collect useful information about your target audiences such as their interests or social media profiles.

The built-in registration page provided by WordPress doesn’t have attractive features so it’s necessary to upgrade this page.

How to customize WordPress registration pages with Ultimate Member plugin

Ultimate Member offers a great solution to create a front-end user registration page using a simple drag-and-drop builder. This feature enables you to control how your page will look and the elements presented on the page.

Upon installation and activation, the plugin will be embedded directly into your WordPress admin sidebar. Click on Ultimate Member icon → Forms to start using the plugin.

Besides essential fields such as Username, Email Address, and Password, the Default Registration form in Ultimate Member also offers numerous other fields. Simply click on the plus at the bottom of the form and you will see a Fields Manager where you can select other fields.

The pencil icon next to each option allows you to adjust the names. It’s possible for you to make changes on your form with the plugin’s drag-and-drop builder as well and you can even add a background image or insert a text box.

Remember to hit the Update button to save your changes and take the form live.

Customize WordPress Password Protected Pages

As mentioned earlier, customizing the design of the password protected pages improves the user experience too. All you need is just a few lines of code to do that.

If you’re using the Password Protect WordPress Pro plugin to lock your content, here is how the default password form of a protected page or post looks:

It’s clear that the password form isn’t an eye catcher. Hence, it’s time to take action and maximize the benefits of the password from by customizing it. There are 2 main steps you must take to customize the form:

Step 1: Go to your (child) theme folder and open the functions.php file.

Step 2: Add the following code snippet to the bottom of the file content. The red lines must be included so that our plugin’s function can work properly.

add_filter( 'ppw_custom_entire_site_login_form', 'custom_login_form' );
function custom_login_form() {
return '
<div class="pda-form-login">

<!--Customize your own logo-->
<h1><a></a></h1>

<!--parameter action=ppw_postpass to bypass cache-->
<!--parameter wrong_password=true to show message wrong password-->
<form action="?action=ppw_postpass&wrong_password=true" method="post">
<label >

Show & Hide the Password

Show and hide the password option creates a better user experience for your users since they can check if they’ve made an error while entering the password or not. To create a checkbox allowing users to show password, add a few lines of code to ppwp_customize_password_form hook provided by Password Protect WordPress Pro plugin.

Customize the Wrong Password Error Message

The plugin doesn’t allow you to show the wrong password error message by default. In order to display and change this message, add the code below to your functions.php file
<?php
add_filter( "ppwp_text_for_entering_wrong_password", "custom_message" );
function custom_message( $message ) {
return '<div class="your_class">Your message</div>';
}
?>

Ready to Create a Custom WordPress Form?

Customizing login, registration, and password forms give your brand significant exposure, strengthens the site security, and enhances site navigation. And if there are so many benefits to it, why should one ever use the default WordPress login Form?

Do you have any other concerns on how to create a custom login form, registration form, or a password form? Leave a comment to let us know, or you can email us at admin@wpblog.com!

Suzie Wilson

Suzies calls herself a WordPressaholic who loves writing for WordPress users. Before shifting to a content writer, she was a content researcher with SEO knowledge. Suzie now is an expert in WordPress plugins and tutorials, content protection plugins in particular.

Share
Published by
Suzie Wilson

Recent Posts

How To Buy A Domain That’s Already Registered In 2019

Your domain name is important. Not only is it a crucial component of your brand, it serves many practical reasons…

1 day ago

How to Add Top WordPress Google Fonts Manually & With Plugin

Let’s learn how to add Google fonts in WordPress. Your website’s design plays an integral part in delivering a great…

2 days ago

WordPress 5.3 “Kirk”: PHP 7.4 Support, Refined Block Editor & Security Enhancements

After much fanfare, it’s finally here. WordPress 5.3 “Kirk”, named after the jazz instrumentalist, Rahsaan Roland Kirk, brings more polished…

2 days ago

WPblog Holiday Season Giveaway!

It’s that time of the year again when the holiday frenzy is in the air and that means one thing…

4 days ago

How to Reset Your WordPress Website via WP Reset Plugin

Life doesn’t give you an undo button to rectify your mistakes. But fortunately, WordPress does. If you ever want your…

1 week ago

Inspirational Entreprenuer Akshat Chaudhary in Conversation With WPblog

When WordPress was launched more than 15 years ago, it not only revolutionized web development but it also opened doors…

1 week ago