How to Display Login Form in Popup

If you're looking for a way to display  MemberPress Login form in the popup on one or more pages you can use Popup Maker plugin.

Step 1: Add the Popup Maker Plugin to your Site

This plugin will allow you to create popup maker and configure it as you want.

  1. Navigate to your WordPress Dashboard → Plugins → and click on the Add New button.
  2. In the Search bar, type Popup Maker
  3. Install and Activate the plugin by PopupMaker

Step 2: Add Is Logged In condition to Popup Maker

By default Popup Maker doesn't contain a condition for users being logged in. They offer the Advanced Targeting Conditions extension that provides this condition along with many others. If you don't have this extension installed you can add the code below at the end of your theme's functions.php file or install Code Snippets plugin and add it in the Snippets section.

function mepr_popup_logged_in() {
  return is_user_logged_in();
}
add_filter('pum_get_conditions', function($conditions) {
  return array_merge($conditions, array(
    'popup_logged_in' => array(
      'group' => __( 'General' ),
      'name' => __( 'Is Logged In' ),
      'callback' => 'mepr_popup_logged_in'
    )
  ));
});

Step 3: Create Popup

  1. Navigate to your WordPress Dashboard Popup Maker admin panel menu item and click on Add/Edit Post Types.
  2. Add [mepr-login-form use_redirect="true"] shortcode to the popup content
  3. Configure the Popup Settings as follows:
    1. Open Triggers tab and click Add New Trigger button
    2. Select "Time Delay / Auto Open" option from Choose what type of trigger to add? dropdown list. You don't need to check "Would you like to set up a cookie as well?" option.
    3. If you want you can click the pencil icon to edit target settings and change the delay after Login Form will popup (by default it is 500ms so it's 0.5 second)
    4. Open Targetting tab and select Is Logged In condition under General group from dropdown list of conditions.
    5. Click exclamation mark next to Is Logged In option to check the opposite of Is Logged In condition. The button will turn red.
    6. Click + AND button and select Pages: Selected option from dropdown list. You should see the field where you can start typing the page you would like Login form to be displayed on. You can add as many pages as you want or select a different category
    7. Optionally you can also change Display and Close settings. For simplicity of this article I leave these settings as default.
    8. Click the Publish button to save the Popup.

Below you can find animated gif with all steps listed above.

Step 4: Test your Setup

Make sure to be logged out and open one of the page that you have selected in step 3.3.f. You should see popup window with Login Form. Once you click Log In button you should be logged in and redirected to the page you set in Global Settings or membership specific settings. Here's how it looks like on front-end:

If you insert [mepr-login-form use_redirect="false"] shortcode in step 3.2 then you will stay on the same page.

When you open any page while being logged in you will not see a popup window with Login Form.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.