If you’re running a WordPress membership website, online store, or members’ only content, adding a WordPress login popup modal comes in handy.
Adding a login popup modal enables users to log in to your website without even leaving the page they are on. This indeed improves the user experience of your WordPress website and helps users get into your website fast.
Let’s have a quick recap on why you should create a login popup modal on your website.
Why Should You Add a Login Popup Modal to Your Website?
It’s obvious that if you’re running an online store or membership website, users need to register and log in to your website to access products/content on your website.
By default, when a user clicks on a login link, they are redirected to a default login page or any custom page created by you. Right after a user logs in using the login credentials, they get redirected to another page on your website.
The WordPress login popup modal is a bit different compared to the custom login screen. When you add a WordPress login popup modal, it removes the necessity to use an actual WordPress page.
Instead, using a popup login modal could be added anywhere on your website without any hassles.
Once you create a custom WordPress login popup modal, users on your website will be able to log in to your website without visiting any additional page on your site.
A WordPress login popup modal gives you the flexibility to add a login/register link anywhere on your website such as a sidebar, footer, etc. Users on your website will be able to login to your site without leaving the page they’re surfing.
It’s obvious that a WordPress popup modal is faster and convenient, which improves the user experience on your WordPress website.
And when you provide a better user experience, you have better chances of getting more sales and conversions rolling in.
This is the main reason why you should add a WordPress popup login to your site. Let’s dive deep into the details to create a WordPress login popup modal for your WordPress website.
Steps to Create a WordPress Login Popup Modal (Easy & Effective)
To help you add the WordPress login popup modal to your website, we’re going to use a robust plugin called AJAX Login & Registration Modal Popup. It’s an easy to use plugin which enables you to add a login popup modal to your website easily.
The AJAX Login & Registration Modal Popup plugin helps you integrate the login and registration module on your website with ease.
Let’s go through the step-by-step guide to adding a popup modal on your WordPress website.
Note: To make use of this plugin, make sure you have enabled user registration on your WordPress website.
Step #1: Install & Activate AJAX Login & Registration Modal Popup Plugin
Navigate to your WordPress Dashboard >> Plugins >> Add New and then search for “AJAX Login & Registration Modal Popup Plugin“. Once you locate the plugin, click on the “Install Now” button.
Once the plugin is installed, make sure you activate the plugin then and there.
Step #2: Configuring the Plugin Settings
Right after the plugin’s activation, navigate to WordPress Dashboard >> Settings >> Login/Register Modal. Once you’re there on the plugins page, you will see various tabs – General, Advanced, Emails, Expressions, etc.
Let’s configure each tab offered by this plugin.
Click on the General tab to see various settings options that help you control a few aspects of the login form.
For example, you have the option to confirm email after registration, reload the page, and to display the first and last name of the visitor in the registration form you’re adding.
To ensure real users, instead of bots, are registering on your website, make sure you have enabled the confirmation email after the registration box, which is unchecked by default.
Once you’re done making changes, make sure you click on the “Save Changes” button to make all the changes live.
Now click on the Advanced tab on the screen below the General tab. Here, the Advanced settings allow you to control and modify handlers right for the login and registration selectors.
If you don’t know what changes you’re making in the settings, we highly suggest you leave the settings as default.
You can click on the Email tab, which is an important configuration option to help customize the message you send to your users.
Here there are email templates that include the templates for the “Registration” and “Lost Password” emails integrated with this plugin.
You can customize the message and easily add whatever info you like. Try to add something which resonates with your site users and connects with them.
Note: We would highly suggest you remove the password field in the registration email. Most of the time users who register don’t want their password info sent to them directly. It also creates a security risk, so it suggests removing the password field in the registration email.
Once you’re done making the changes, make sure you click on the “Save Changes” button.
In the Expressions tab, you can easily customize all the brief messages that users will see when a certain action occurs.
Here you can add the form heading, email or username form options, and so on. Expressions are like a tool tip, which you include to show more info about any field you add.
Once you’re done, save all the changes to make the changes live.
Step #3: Adding the Login Popup Modal on Your Site
As of now, you have made all the basic configurations of the login popup modal. Now it’s time to add the login/register button link on your WordPress website.
Now we’re going to add the login popup modal in the sidebar. This doesn’t take much configuring, however, we’ll walk through the complete step-by-step tutorial.
Navigate to your WordPress Dashboard >> Appearance >> Widgets. There you need to drag and drop the “Custom HTML” widget to your sidebar. After that you need to copy and paste into the widget field the exact code given below:
<a href="#login" class="lrm-login lrm-hide-if-logged-in">Login</a> <br><button class="lrm-login lrm-hide-if-logged-in">Login</button>
Code Credits: Greengeeks
Once you paste the code, it will show up as both a text link and a button. You do have the option of hiding the button, which indicates you will not see the link or the button if you’re already logged in to your website.
Once you’re done, make sure you click on the “Save” button to makes all the changes live. As of now, you will be able to see two login links in the sidebar of your website.
One link will be a text link, while the other will be a button. If a user clicks on the link or the button, it will open the WordPress login popup modal.
So this how you can easily add the login popup modal on your WordPress website.
As of now, you have successfully configured the login popup modal, however, you have added a text and a button for users to log in to your website. If you don’t want to keep the text link or the button, follow the instructions given below.
Choosing the Text Link Only
If you want to go with the text link in your sidebar, then you need to remove the code given below from the widget:
<br><button class="lrm-login lrm-hide-if-logged-in">Login</button>
Remove the code given above from the widget and then save the widget to make the changes live and remove the button. This will allow only the login link to show up on your WordPress website.
Choosing the Button Link Only
We would highly suggest showing the button in the sidebar for your login popup modal as it is more user-friendly than a text link.
To remove the text link, you need to remove the code given below from the widget:
<a href="#login" class="lrm-login lrm-hide-if-logged-in">Login</a>
After removing the above code, make sure you save the widget to make the changes live. Once you save the widget, the button will be removed, and there will be a text-only link.
Now you will only be able to see the login button on the sidebar of your website, which will open up the login popup modal once clicked.
Conclusion: How to Create a WordPress Login Popup Modal (Step by Step)
So this is our step-by-step guide to help you add a login popup modal to your WordPress website. You can easily follow the step-by-step walkthrough listed above to easily create a WordPress login modal without any hassles.
Once you add a login popup modal, users on your website can login to your site without even leaving the page they are surfing. This will help you improve the overall user experience on your WordPress website.
Did you find this guide to adding a login popup modal helpful? Feel free to share your thoughts in the comments sections below.
If this post helped you, please share our guide on trending social media channels such as Facebook, Twitter, and LinkedIn.
Other WordPress Tutorials Guide:
- How to Add Security Questions to Your WordPress Login Page
- How to Redirect Users After Login in WordPress
- How to Limit Login Attempts in WordPress
- Ultimate WordPress Security Guide
- How to Get Started With WordPress Blog
- How to Install WordPress on Windows
- How to Create the Best WordPress Staging Site
- How to Disable the Login With Email Address Feature in WordPress
- How to Create a Custom WordPress Login Page
- How to Display Users’ Last Login Date/Time in WordPress