BuddyX
Get BuddyX Pro

Recipe: Customize the login flow

Free & Pro

What you'll build: a branded sign-in experience that replaces WordPress's plain /wp-login.php page. Visitors who click a "Sign in" link see your branded popup or branded login page instead of WordPress's generic gray screen.

Time: ~20 minutes Prerequisites: BuddyX Pro 5.1.0+ activated

This recipe covers the two paths BuddyX Pro offers:

Path When to use What visitors see
Sign-in Popup Default recommendation. Visitors stay on the page they were on; popup overlays for sign-in. A branded modal that opens on the same page
Branded /wp-login.php When you want a dedicated full-page login (e.g. for marketing reasons, or because a 3rd-party plugin assumes the WP login URL). A branded full page at yoursite.com/wp-login.php

You can use both at the same time - the popup is for in-context sign-in (header link, comment form prompt), the branded login page handles direct visits to /wp-login.php.

Path A - Sign-in Popup (recommended)

The Sign-in Popup is a modal that opens when a visitor clicks any "Sign in" or "Register" link in your site. The visitor never leaves the page they're on.

Step A1 - Turn the popup on (2 minutes)

  1. Go to Customize → General → Sign-in Popup | Register Form Fields
  2. Set Sign-in Popup to On
  3. Click Publish

Test:

  • Visit your site logged out
  • Click any "Sign in" link (in the header user widget, the side panel, the comment form's "Please log in to comment" link)
  • The popup should open on the current page instead of redirecting to /wp-login.php

Step A2 - Pick the form to show first (1 minute)

In the same Customizer section, set Form Display:

  • Both - login form with a tab to switch to register (most common)
  • Login - login form only, no register tab (good for closed/invitation-only sites)
  • Register - register form first, with a tab to switch to login (good for sign-up-focused launches)

Step A3 - Add a welcome message above the form (3 minutes)

  1. Customize → General → Sign-in Popup | Register Form Fields
  2. Find Popup Description (the buddyx_login_description field)
  3. Write a short message - one line works best. Examples:
    • "Welcome back - sign in to access your courses."
    • "Join our community of 5,000+ members."
    • "Sign in to comment, post, and connect."
  4. Click Publish

The text renders at the top of the popup, above the login form.

Step A4 - Configure where visitors land after login (3 minutes)

By default, after a successful login the visitor returns to the page they were on. You may want a different destination:

  1. Customize → General → Sign-in Popup | Register Form Fields
  2. Find Login Redirect:
    • Current page (default) - stay on the page they were on
    • Profile page - go to their BuddyPress profile (requires BuddyPress)
    • Activity page - go to the community activity feed (requires BuddyPress)
    • Custom page - go to a specific URL you provide
  3. If you pick Custom page, Login Redirect URL appears below - paste the full URL (e.g. https://yoursite.com/welcome/)
  4. Do the same for Register Redirect (where they go after signing up)
  5. Click Publish

Step A5 - (Optional) Use a 3rd-party login form inside the popup

If you have a 3rd-party authentication plugin (e.g. Login with Google, Login with Facebook) and want to use ITS form inside the BuddyX popup chrome:

  1. Customize → General → Sign-in Popup | Register Form Fields
  2. Set Form Popup to Custom shortcode (instead of "BuddyX Login Form")
  3. Popup Content field appears below - paste the shortcode from your 3rd-party plugin
  4. Click Publish

The BuddyX popup chrome stays; the form body is replaced by the shortcode's output.

Path B - Branded /wp-login.php page

Use this when you want the dedicated full-page login experience customized (instead of, or alongside, the popup).

Step B1 - Enable custom login (2 minutes)

  1. Customize → WP Login Page
  2. Set Enable Custom Login to On
  3. Click Publish

Visit yoursite.com/wp-login.php while logged out to see the default branded layout.

Step B2 - Brand the login page (5 minutes)

In the same Customizer section, you can customize:

Setting What it controls
WP Login Logo A logo image shown at the top of the login form (use a transparent PNG/SVG)
Background Color The page background
Background Image An optional background photo (use the Background Image guide for sizing)
Form Background Color The form panel's background
Button Background Color The "Log In" / "Register" button colors
Form Text Color Text inside the form
Link Color Links (like "Lost your password?")

Pick colors that align with your light-mode palette. The login page typically uses your site's brand color for the button and your hero/header colors for the background.

Step B3 - Choose a layout (2 minutes)

  1. Customize → WP Login Page → Login Page Theme
  2. Pick:
    • Default - the WordPress-classic centered form
    • Modern - a two-pane layout with imagery on one side, form on the other (most popular)
    • Simple - minimal, centered form on plain background
  3. Click Publish

Step B4 - (Optional) Add a Split View image

If you picked Modern, you can add a background image to the left pane:

  1. Customize → WP Login Page → Background Image
  2. Upload a high-resolution image (1920×1080 minimum for sharp rendering)
  3. Click Publish

Combining popup + branded login page

You can have both active at once. The popup handles in-context sign-in (header links, side panel, comment prompts). The branded login page handles direct visits to /wp-login.php (bookmarks, "Forgot password" email links, 3rd-party plugin redirects).

To do this:

  1. Follow Path A to set up the popup
  2. Follow Path B to brand the login page
  3. Both work independently - no conflict

Testing the full flow

Once configured, test end-to-end as a real visitor would experience it:

  1. Log out of WordPress (or open an incognito browser window)
  2. Visit your site
  3. Test the popup: click any "Sign in" link - popup should open without leaving the page
  4. Test login: enter credentials - should land at your configured Login Redirect destination
  5. Test register: click the "Register" tab in the popup - fill the form - submit
  6. Test the branded page: visit yoursite.com/wp-login.php directly - should see your branded layout
  7. Test the forgot-password flow: click "Lost your password?" - should also use the branded layout
  8. Test redirect after login from the branded page: log in via /wp-login.php - should land at your configured destination

Common questions

My visitors are getting "Forbidden" errors when they try to log in via the popup. Most often a security plugin (Wordfence, Sucuri, iThemes Security) is blocking the AJAX login endpoint. Check the plugin's settings for "Block AJAX login" or similar; allow it for the BuddyX login action. Specific guidance varies by plugin.

The popup doesn't open when I click the "Sign in" link. Three common causes:

  1. Sign-in Popup is set to Off in Customizer - turn it on (Step A1)
  2. The link doesn't have the right CSS class - BuddyX automatically attaches the popup to header/side-panel/comment-form sign-in links. Custom links you add via menus may need the buddyx-login-popup class.
  3. A JS error elsewhere on the page is breaking the popup script. Open the browser console (F12) and look for errors.

Can I disable BuddyX's branded login page and use plain WordPress login? Yes - set Enable Custom Login to Off in Customize → WP Login Page. Visitors to /wp-login.php will see the default WordPress login form.

Where do I configure the password-reset email message? The password-reset email content is controlled by WordPress core, not by the theme. Look for the retrieve_password_message filter, or use a plugin like WP Mail SMTP / Better Notifications for WordPress to customize email content.

My BuddyPress xprofile validation isn't running on signups through the popup. The popup uses a streamlined registration form. If your BuddyPress profile has required custom fields that need full xprofile validation, BuddyX falls back to the full /wp-login.php?action=register page for those signups - this is documented behavior, not a bug. Either simplify your required xprofile fields, or accept the fallback.

Related

Got a question? We're a friendly team - drop us a line at support@wbcomdesigns.com.