How to Create a Custom WordPress Login, Registration & Password Page
— October 21, 2019
• 9 Minutes Read
WordPress comes standard with various types of forms including login, registration, password protection, and WordPress 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 to create the best contact form for your WordPress site for the 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.
1. 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.
2. 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.
3. Secure Your WordPress Site
Customizing the default form also increases your WordPress website 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.
4. 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.
1. 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.
2. MIT Sloan 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.
3. 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 design plugin 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:
- Go to WPForms → Add New and look for the User Login Form template.
- Hover on the template and click on the Create a User Login Form button.
- 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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
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
|
1 2 3 4 5 6 7 8 9 |
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 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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
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 for="">Password</label> <!--Required input tag with name="input_wp_protect_password"--> <input class="input_wp_protect_password" type="password" id="input_wp_protect_password" name="input_wp_protect_password"> <!-- Customize your error message here --> <p id="ppw_entire_site_wrong_password" class="ppw_entire_site_password_error">' . esc_html__( apply_filters( PPW_Pro_Constants::HOOK_CUSTOM_MESSAGE_WRONG_PASSWORD_ENTIRE_SITE, 'Please enter the correct password!' ), 'password-protect-page' ) . '</p> <input type="submit" class="button button-primary button-login" value="Login"> </form> <!-- Add your T&C or custom statements here --> </div> '; } |
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
|
1 2 3 4 5 6 |
<?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 [email protected]!
Create Faster WordPress Websites!
Free eBook on WordPress Performance right in your inbox.
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.
