Custom Profile Menus

Profile Builder Pro - Custom Profile Menus - Thumbnail

Custom Profile Menus Add-on lets you add custom menu items like Register, Login, Edit Profile forms inside iFrame Popups, Login/Logout or just a Logout button.

You can also hide Menu Items based on User Role or choose to hide them only for Logged in or Logged out users.

Install the Custom Profile Menus Add-on

Custom Profile Menus is an Advanced add-on, available with a Profile Builder Hobbyist or Pro license only.

After purchasing the add-on, the .zip file will be available for download under your account page by clicking the “Add-ons Download” button.

Profile Builder Pro - Account Page - Download Add-ons

Once downloaded, you can install the add-on as a normal WordPress plugin, by uploading the .zip file in your WordPress Admin -> Plugins -> Add New -> Upload Plugin.

Alternatively, you can install the Custom Profile Menus add-on by extracting the folder found inside the archive and uploading the entire folder via FTP to your /wp-content/plugins folder found inside your WordPress install.

Note – For Custom Profile Menus add-on to work as expected, you’ll also need to have the following plugin installed and activated on your site:

Custom Profile Menus Features

With Custom Profile Menus Add-On you can add custom menu items like:

You can also hide Menu Items based on User Role or choose to hide them only for Logged in or Logged out users.

Profile Builder Pro - Custom Profile Menus - Features

Inside Screen Options you can enable or disable Boxes or Advanced Menu Properties.

Profile Builder Pro - Custom Profile Menus - Advanced Menu Properties

Adding Custom Profile Menus Items

If you don’t already have a Menu, to add Custom Profile Menus Items, you will need first to create one. Go to Appearance -> Menus -> Set a Menu Name and click on Create Menu.

Profile Builder Pro - Custom Profile Menus - Creating a Menu

After you install and activate the add-on you will be able to add a Custom Profile Menus Item if you go to Appearance -> Menus -> Select from the PB Custom Profile Menus section the desired item -> Click on “Add to Menu” -> Set it up and Save Menu.

Profile Builder Pro - Custom Profile Menus - Add Menu Item

Registration Form in iFrame

To add Profile Builder’s Registration Form inside the iFrame you will need first to use the [wppb-register] shortcode inside a page to generate the Registration form.

Then go to Appearance -> Menus -> Select from the PB Custom Profile Menus section the “Register – iFrame” option -> And click on “Add to Menu” -> Set it up and “Save Menu”.

Profile Builder Pro - Custom Profile Menus - Register iFrame

Inside the Register iFrame we can set the:

  • Navigation Label – The Label of the Menu Item inside the Menu Structure
  • Title Attribute – Allows you to provide extra information about the link
  • Register Form page URL – Here we need to add the URL where our Registration form is located
  • Display Mode – Restrict the Menu Item to a minimum role. Works only if Display Mode: Logged In Users is selected
  • iFrame Title – Allows you to set the title of the iFrame
  • iFrame Size – Allows you to set the iFrame’s height and width in px

Front End Logged Out User

The Registration Form is displayed inside the iFrame.

Profile Builder Pro - Custom Profile Menus - Register iFrame in Front End

Front End Logged In User

The Logged In Users are notified that they already have an account.

Profile Builder Pro - Custom Profile Menus - Register iFrame in Front End Logged In

Login Form in iFrame

To add Profile Builder’s Login Form inside the iFrame you will need first to use the [wppb-login] shortcode inside a page to generate the Login form.

Then go to Appearance -> Menus -> Select from the PB Custom Profile Menus section the “Login – iFrame” option -> And click on “Add to Menu” -> Set it up and “Save Menu”.

Profile Builder Pro - Custom Profile Menus - Features

Inside the Login iFrame we can set the:

  • Navigation Label – The Label of the Menu Item inside the Menu Structure
  • Title Attribute – Allows you to provide extra information about the link
  • Login Form page URL – Here we need to add the URL where our Login form is located
  • Display Mode – Restrict the Menu Item to a minimum role. Works only if Display Mode: Logged In Users is selected
  • iFrame Title – Allows you to set the title of the iFrame
  • iFrame Size – Allows you to set the iFrame’s height and width in px

Front End Logged Out User

Users can login using the Login Form displayed inside the iFrame.

Profile Builder Pro - Custom Profile Menus - Login iFrame in Front End

Front End Logged In User

Logged In Users are notified that they are logged in. They can logout by clicking the “Log out” link displayed inside the iFrame.

Profile Builder Pro - Custom Profile Menus - Login iFrame in Front End Logged In

Edit Profile in iFrame

To add Profile Builder’s Edit Profile Form inside the iFrame you will need first to use the [wppb-edit-profile] shortcode inside a page to generate the Edit Profile form.

Then go to Appearance -> Menus -> Select from the PB Custom Profile Menus section the “Edit Profile – iFrame” option -> And click on “Add to Menu” -> Set it up and “Save Menu”.

Profile Builder Pro - Custom Profile Menus - Edit Profile iFrame

Inside the Edit Profile iFrame we can set the:

  • Navigation Label – The Label of the Menu Item inside the Menu Structure
  • Title Attribute – Allows you to provide extra information about the link
  • Edit Profile Form page URL – Here we need to add the URL where our Edit Profile form is located
  • Display Mode – Restrict the Menu Item to a minimum role. Works only if Display Mode: Logged In Users is selected
  • iFrame Title – Allows you to set the title of the iFrame
  • iFrame Size – Allows you to set the iFrame’s height and width in px

Front End Logged Out User

Logged Out Users are notified that they need to login in order to edit their profile.

Profile Builder Pro - Custom Profile Menus - Edit Profile iFrame in Front End Logged out

Front End Logged In User

Logged In Users can update their profile using the Edit Profile form displayed inside the iFrame.

Profile Builder Pro - Custom Profile Menus - Edit Profile iFrame in Front End

Login / Logout

The Login / Logout Menu Item will display :

  • For the Logged Out User – A “Login” menu button that will take the user to the Login page
  • For the Logged In User – A “Logout” menu button that will logout the user with just a click

To use the Login / Logout functionality you will need first to add the [wppb-login] shortcode inside a page to generate the Login form.

Then go to Appearance -> Menus -> Select from the PB Custom Profile Menus section the “Login / Logout” option -> And click on “Add to Menu” -> Set it up and “Save Menu”.

Profile Builder Pro - Custom Profile Menus - Login - Logout

Inside the Login/Logout Menu Item we can set the:

  • Title Attribute – Allows you to provide extra information about the link
  • Login Label – Here we set the Menu Item label for the Logged Out user
  • Logout Label – Here we set the Menu Item label for the Logged In user
  • Login Page URL – Here we need to add the URL where our Login form is located
  • Display Mode – Restrict the Menu Item to a minimum role. Works only if Display Mode: Logged In Users is selected

Front End Logged Out User

The Login Menu Item is displayed to Logged Out Users. Clicking the Login Menu Item will take the user to the Login form.

Profile Builder Pro - Custom Profile Menus - Login - Logout - Logged out User

Front End Logged In User

The Login Menu Item will change into a Logout Menu Item after login. Clicking the Logout Menu Item will logout the user.

Profile Builder Pro - Custom Profile Menus - Login - Logout - Logged In User.png

Logout

The Logout Menu Item will display, for the Logged In User if set, a “Logout” menu button that will logout the user with just a click.

Go to Appearance -> Menus -> Select from the PB Custom Profile Menus section the “Logout” option -> And click on “Add to Menu” -> Set it up and Select “Logged in Users” inside the Display Mode -> Save Menu.

Profile Builder Pro - Custom Profile Menus - Logout

Inside the Logout Menu Item we can set the:

  • Navigation Label – The Label of the Menu Item inside the Menu Structure
  • Title Attribute – Allows you to provide extra information about the link
  • Display Mode – Restrict the Menu Item to a minimum role. Works only if Display Mode: Logged In Users is selected

Front End Logged Out User

We set the Logout Menu Item – Display Mode to Logged In Users so Logged Out Users will not see this Menu Item.

Profile Builder Pro - Custom Profile Menus - Logout - Logged Out User

Front End Logged In User

After Login users will see the Logout Menu Item. Clicking the Logout Menu Item will logout the user.

Profile Builder Pro - Custom Profile Menus - Logout - Logged In User

Display or Hide Menu Items based on User Role

We can display Menu Items and Custom Profile Menus based on user role. Inside the Display Mode we can choose to display the Menu Item for:

  • Logged In Users
  • Logged Out Users
  • Everyone

Restricting the Menu Item to a minimum role works only if Display Mode is set to Logged In Users.

Profile Builder Pro - Custom Profile Menus - Display Mode

Lets say we want to Display a Menu Item only to Logged In Users that have the Subscriber role. We will need to select inside the Display Mode option the Logged In Users value and also to check the Subscriber role.

Profile Builder Pro - Custom Profile Menus - Display Mode Logged In Users

Front End Logged Out User

The Logged Out User doesn’t see the Edit Profile Menu Item.

Profile Builder Pro - Custom Profile Menus - Display Mode - Logged Out User

Front End Logged In User

The Logged In User, that has the Subscriber Role, sees the Edit Profile Menu Item.

Profile Builder Pro - Custom Profile Menus - Display Mode - Logged In Subscriber

Custom Profile Menus is an Advanced add-on, available only with a Profile Builder Hobbyist or Pro license.

Get Custom Profile Menus – Profile Builder Add-on