How to Create an AJAX Login/Registration Popup

To create an AjAX login/registration popup, you need the AJAX Login/Registration addon for WP Popups, which is available on the WP Popups Pro plan and above. Purchase WP Popups Pro here.

With the AJAX Login/Registration addon for WP Popups, you can create a popup that lets users log in or register for your site without leaving the page that they’re on.

You can also integrate Facebook social login to your popup (optional).

Below, you’ll learn how to create an AJAX login/registration popup.

Make sure to install the AJAX Login/Registration addon before you try to create your login/registration popup. Login/registration settings are only visible once you’ve installed and activated the addon.

We’ll first show you how to create a login/registration popup using the native WordPress login process. Then, we’ll share how to integrate Facebook social login at the end of this article.

1. Create New Popup and Choose Login/Registration Template

To get started, go to WP Popups -> Add New to create a new popup. In the Select a Template interface, choose the Ajax Login/Registration template:

2. Configure Design

To control the basic design and position of your popup, you can use the regular WP Popups style and display position settings.

To configure your login/registration forms, go to Appearance -> Ajax Login/Registration Addon. There, you can use the tabs at the top to configure the design for different behavior:

3. Configure Display Rules and Triggers

To configure where/when your login/registration popup appears, you can use WP Popups’ many display rules and triggers.

For example, if you’re displaying the popup automatically, you can use a display rule to hide the popup for logged-in users.

You can also use triggers to control when to display the popup. For example, you could use Class triggering to open your login/registration popup when a user clicks on a button or link.

4. Configure Login/Register Functionality

WP Popups lets you redirect your users to a custom page after they:

Log in
Register
Log out

To set up these custom redirect URLs, go to Addons -> Ajax Login in the template builder:

And that’s it! Once you publish your popup, your login/registration form popup will be live for your visitors.

How to Use Facebook Login With Your Popup

If you want to use Facebook social login, you’ll first need to create a Facebook app to generate a Facebook App ID and Facebook App Secret Key.

Here’s how to do that…

1. Create New Facebook App

To get started, go to Facebook for Developers. Then, click Add a New App. Enter the basic details for your app and click Create App ID:

2. Set Up Facebook Login

In the Add a Product screen, click Set Up underneath Facebook Login;

Choose the Web platform:

Then enter the URL of your site and click Save:

You can ignore the rest of the steps here as they aren’t important.

3. Set Up App Domains and Generate App IDs

Next, go to Settings -> Basic in the app interface. Then, add your URL to the App Domains setting:

Then, access the App ID and App Secret. Keep these values accessible because you’ll need them in the next step.

4. Add App ID to WP Popups

Next, open your WordPress dashboard and go to WP Popups -> Settings -> Addons -> Ajax Login/Registration Addon.

There, add the values for Facebook App ID and Facebook App Secret Key:

Then, click Save Addons Settings.

Now, WP Popups will automatically add a Log in With Facebook option to your login/registration popup: