Flexibility is what makes WordPress so great, you can create anything from a simple blog to a fully functioning membership site all from the same content management system. Whether you’re trying to restrict access to a personality test using a WordPress quiz plugin, or restricting access to client-specific content, there are plenty of reasons users might need to login. As websites get increasingly more complicated, we’re finding more situations where users have reason to log into WordPress websites.
Some common examples include:
- e-commerce websites
- Membership websites
- e-learning websites
In each of these situations, our users need to login to WordPress to access their account information or access content or features that publicly browsing users don’t have access to.
WordPress makes this easy with it’s builtin user management and authentication systems. Simply navigate to www.yourdomain.com/login and you’re presented with a login screen. While this is functional, it’s not the best experience.
Typically you’ll want a better solution than using the vanilla WordPress login screen, for example, you might want a simple login popup modal. Let’s discuss the benefits.
Why have a login popup modal on your WordPress site
The vanilla WordPress login screen is functional, but it has some serious drawbacks from a user experience point of view. Specifically:
- It’s unbranded
- It looks completely different than the front end of your website
- It takes users to a standalone page with no navigation, making it harder to reset or return to a previous task
So while you could easily add a login link to your WordPress menu that points to www.yourdomain.com/login/, we probably want something better. This is where a login pop-up modal comes into play.
What is a login pop-up modal
A “modal” is a web page element that displays in front of the existing content on your current page, deactivating all other page content. It’s often also referred to as a “pop-up” because it “pops” over the content and design you’re currently looking at.
A modal is a great option for making your login capabilities seamless and easy with the rest of your site. While you could stylize the default WordPress login screen, changing the colors and replacing the WordPress logo, it still is a jarring experience compared to logging in from the page you’re currently on.
There are many reasons why we prefer modals to dedicated login pages:
- It makes it easier to return to the page you were currently on after logging in
- If someone clicks on “login” by accident or out of curiosity, it’s easier to close and resume their previous task
- You’re not taken to a completely separate page, which requires a pageload and effort to reorient yourself
- It’s a more seamless experience with less friction and slowdown
So hopefully you’re convinced that a pop-up modal is the best approach. The next question is, how do we go about it? Our recommendation is to use a simple and easy plugin.
Why you want a plugin for your login pop-up modal
It’s not difficult to custom code a pop-up modal, plenty of libraries exist that reduce the effort to 15 – 20 lines of code… but just because custom development isn’t difficult, doesn’t mean it’s the best approach. If you’re not a developer you still have to find and pay one, and if you are a developer I assure you it will take more effort than using the plugin we’ve identified.
There are lots of login popup plugins in the repository, some are good, some are not great, but there is one that we recommend. We like this plugin so much we don’t recommend even looking at the other options.
What is the best plugin you ask?
Login/Signup Popup
The Login/Signup Popup and inline form for WordPress and WooCommerce is a simple and robust plugin that will allow you to get your login pop-up on your site in minutes.
Let’s go through the quick and simple steps.
1. Install Login/Signup Popup from the repository
The first step is installing the plugin, which you can do through the free WordPress plugin repository. Simply login to your WordPress admin dashboard and navigate to Plugins > Add New and search “Login/Signup Popup.”
Click on the “Install” button followed by “Activate” once the plugin is installed.
2. Configure the Main Settings
Once activated, there will be a new menu item on the lefthand side of the WordPress admin that says “Login/Signup Popup” and within that menu a link to “Settings.”
Clicking on that link will let you configure the login popup per your preferences.
For the sake of this tutorial, I recommend disabling “Enable Registration.” Typically you’ll want users to register as part of a checkout process (like purchasing a membership, course, or product) rather than register independently.
You might want to set a “Login Redirect” which will direct users to a specific page after they’ve logged in. In my case, I’m redirection users to the “account” page which is located at www.mydomain.com/account.
That’s all you need to do, everything else can be left as is. Simple right? I wasn’t kidding. Once you’ve made these 1 – 2 changes you can optionally style the pop-up as you’d like.
3. Configure the Style
Click into the “style” tab and you can set a range of options including:
- Popup position (middle, top, etc…)
- Popup width / height
- Padding (i.e. space inside the popup around the login form)
- Background colors
- Text colors
- Sidebar image / side
- Form and button colors / styling
4. Add the popup to your menu
Typically you’re going to add a login link to either the main or footer menu of your website and Login/Signup makes this incredibly easy! Simple go to Appearance > Menus in the WordPress admin and select the menu you’d like to add the link to.
You may notice there is now a “Login/Signup Popup” box under the “Add menu items” column on the lefthand side of the screen. If you expand that, you’ll see options to add different login / logout options. Note that some options will only display if the user is logged in or logged out, for example the “Hello, username” will only display once the user has logged in.
In my case, I’m adding a simple “login” link and the “Hello, username” as it’s a nice personal touch.
Save your menu, and visit the front end of your website!
5. Test the login popup modal
It’s always good to test a new piece of functionality before assuming it works without issue. In my case I simply opened my site in an incognito window and here is what I saw:
Clicking on the login link triggered my new login popup modal, looking very stylish.
Once logged in, I have my nice “Hello, Admin” text which even includes an avatar!
A better, seemless login experience in minutes
From start to finish this entire process took me less than 10minutes the first time around. You might even be faster!
As you can see this is the easiest way to get a beautiful, branded, and easy-to-use login popup modal on your WordPress website. Now your users can easily login from any page their on, keeping the entire experience consistent with the rest of your site, minimizing friction, and ultimately keeping your users happy.
If you’re looking for a more full-featured WordPress popup plugin, we recommend looking into Popup Box. It has a wide range of support for third party integrations like email marketing services, special pop-ups like countdowns, and different media types.