UsersWP can open its login, register and forgot password forms in a lightbox. Menu items added from the UsersWP Endpoints box do this on their own. To get the same lightbox from a text link, an image or a button anywhere else, add one of these classes to the link:
uwp-login-linkopens the login form.uwp-register-linkopens the register form.uwp-forgot-password-linkopens the forgot password form.
Put the class on the <a> tag. Keep the link pointing at your real login or register page, so it still works if the lightbox is turned off.
<a href="/login/" class="uwp-login-link">Log in</a>
<a href="/register/" class="uwp-register-link"><img src="/wp-content/uploads/join-button.png" alt="Join"></a>
You can use a data attribute instead of a class: data-uwp-link="login", data-uwp-link="register" or data-uwp-link="forgot-password". This helps with page builders that let you add custom attributes to a button.
If the link opens the page instead
- Check the lightbox settings. Login Lightbox is under UsersWP > General > Login, Register Lightbox under UsersWP > General > Register and Forgot password lightbox under UsersWP > General > Change Password. All three are on by default.
- Check the design style. The lightbox needs Default Design Style set to Bootstrap under UsersWP > General > Developer. With Legacy (non-bootstrap) the links open the normal pages.
- Clear your cache and any CSS or JavaScript optimisation, then test again in a private window.
After a successful login in the lightbox, UsersWP reloads the current page. To send users to your login redirect page instead, tick Enable Login Lightbox Redirect under UsersWP > General > Login.
To do the opposite and stop menu links from opening a lightbox, see How to Disable Modal Login/Register for UsersWP Navigation EndPoints.