How to Load a Login, Edit Profile or Registration Form in a Popup

Cristian Antohe
Last Updated: 15/06/16

Ever landed up on a webpage that asked you to register or login, only to forget the original article / page where you wanted to be after registering or login in? Doing those steps is ok, after all you probably wanted to take those actions anyway.

But why not try and make the entire experience a little bit better and more user friendly?

Using custom redirects could help with that, however a more elegant solution would be to login or register from a popup or lightbox.

Custom Profile Menus for Profile Builder

The Custom Profile Menus Addon for Profile Builder makes it really easy to:

  • optimize your user experience by allowing users to login and register from anywhere on your site where there is a navigation menu
  • display different menu items to logged in users or filter based on role
  • uses an entire WordPress page so you can have your own copy or message, not just the forms

login_popup

Setting it all up

When creating a popup with a login form, first thing we want to do is create standalone pages for login, edit profile and register forms using the wppb-login, wppb-edit-profile and wppb-register shortcodes respectively.

The main reason for having this setup this way is to have a complete page where you can also add your own copywriting, images or other shortcodes. This opens up the door for more flexibility further down the line.

Once that’s done, the only thing left is to add those pages to your top or sidebar menus from WordPress.

cpm6

Switch Login/Logout menu items based on logged in status

To take this further, we’ll want to display different menu items based on the user’s logged in status or his user role.

You can chose between showing a particular menu item to:

  • Everyone – this is the default. All users will see these menu items
  • Logged Out Users – this is perfect for the login and register menu items
  • Logged In Users – edit profile and logout are the menu items that will most benefit from it, however, with the possibility to filter menu items further based on user role, you can also display different menus, categories, etc. to different users

Compatibility with Profile Builder

Since this is a Profile Builder Addon, we’ve taken great care to make sure redirects enabled on your login and registration forms are working with the new popup functionality.

Similarly, it’s also fully compatible with the Social Connect Addon, so you can combine normal WordPress login and registration functionality with the Facebook, Twitter or Google connect.

You can try out a Custom Profile Menus demo or simply play around with it by activating the addon on your very own Profile Builder Demo site.

Get Custom Profile Menus

[rm_post_images columns=”4″ include=”57061,57046,57045,57043″ rel=”pbsc”]

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.