Custom Profile Menus

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.

Activating the Custom Profile Menus Add-on

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

After purchasing a premium version of Profile Builder, you can check the following guide on how to install Profile Builder.

Custom Profile Menus Features

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

• Profile Builder Registration Form in iFrame
• Profile Builder Login Form in iFrame
• Profile Builder Edit Profile Form in iFrame
• Login/Logout functionality
• Logout

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

Inside Screen Options you can enable or disable Boxes or 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.

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.

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”.

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.

Front End Logged In User

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

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”.

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.

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.

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”.

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.

Front End Logged In User

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

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”.

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.

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.

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.

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.

Front End Logged In User

After Login users will see the Logout Menu Item. Clicking the Logout Menu Item will logout the 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.

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.

Front End Logged Out User

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

Front End Logged In User

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

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