Help Center
Profile Menu Element Overview for Bricks

Profile Menu Element Overview for Bricks

This tutorial will describe how the Profile Menu element works and how to customize it to display different content on the WordPress Account and User page with the Bricks builder.

Before you start, check the tutorial requirements:

  • Bricks theme installed and activated

  • JetEngine plugin installed and activated

Account Page

Proceed to the JetEngine > Profile Builder tab.

Warning

Since I want to place the Profile Menu element on the Account page, I selected the “Content” Template Mode to be able to edit this page. If you set the “Rewrite” Template Mode, you can place the element on the subpage templates with which you build the Account page.

If you changed some settings, hit the “Save” button.

user profile builder dashboard

Open the Account Page tab and make certain you have added several subpages. You can create the subpage templates with the JetEngine Listing feature. Note that the Profile Menu element will show the subpages’ titles.

After the subpages creating, click the “Save” button.

subpages for the account page
Warning

If you don’t see some menu items in the Profile Menu element, check if the Hide from menu option for the subpage is disabled.

hide from menu

Before you move further, follow the Bricks > Settings tab and ensure that you enable the Pages toggle to be able to edit the Account page and Listing Items so you can edit the Listing templates.

Proceed to the Account page or one of the subpage templates.

Add a new section to the Bricks editing page.

add a new section to the bricks editing page

Drag-n-drop the Profile Menu element.

profile menu element in bricks

This element has such options if you unfold the General settings tab in the Content section:

  • Context. Here you can define if menu items will be shown from the Account Page or User Page tab from the Profile Builder dashboard. For now, select the “Account” option;
  • Show menu for the role. Here you can select user roles for which the menu will be visible;
  • Add subpage slug to the first page URL. The subpage slug is not included in the URL of the first page on the menu unless you specifically enable this option. If you enable it, the subpage slug will be added to all URLs on the menu, including the first page.
profile menu element settings in bricks

You can set the Style settings as well.

profile menu style settings in bricks

After customizing the Profile Menu settings, drag-n-drop the Profile Subpage Content element.

Warning

If you added the Profile Menu element on the template subpage, you don’t need to use the Profile Subpage Content element.

profile subpage content element in bricks

This element will show the content of every subpage when users will click on the corresponding menu item on the front end.

profile subpage content

Hit the “Update” button.

If you set the “Rewrite” Template Mode, add the Profile Menu element to every subpage template where required.

Finally, proceed to the Account page on the front end.

Now, users can click on the menu items in the Profile Menu, and the Profile Subpage Content shows the corresponding subpage content.

account page with the profile menu on the front end

User Page

Proceed to the JetEngine > Profile Builder tab.

Ensure you enable the Single user page option and set the previously created page as the Single User Page (in my case, that’s the “Profile” page).

Warning

I selected the “Content” Template Mode to be able to edit the User (Profile) page and place the Profile Menu element on it. If you set the “Rewrite” Template Mode, you can place the element on the subpage templates with which you build the User page.

If you changed some settings, hit the “Save” button.

single user page option

Open the User Page tab and ensure you have added several subpages. Note that the Profile Menu will show the subpages’ titles.

After the subpages creating, click the “Save” button.

subpages for the user page
Warning

If you don’t see some menu items in the Profile Menu element, check if the Hide from menu option for the subpage is disabled.

hide from menu toggle

Navigate to the User (Profile) page or one of the subpage templates.

Drag-n-drop the Profile Menu element to the Bricks editing page.

Set the “Single User Page” Context and customize the element according to your needs.

Then, drag-n-drop the Profile Subpage Content element to display the content of every subpage when users click on the menu item.

Warning

If you added the Profile Menu element on the template subpage, you don’t need to use the Profile Subpage Content element.

Note the Profile Menu element won’t be visible on the Bricks editing page because it needs context. You will see the result on the front end when you open any user’s Profile page.

profile menu and profile subpage content

Hit the “Update” button.

If you set the “Rewrite” Template Mode, add the Profile Menu element to every subpage template where required.

Finally, proceed to the front end and open any user’s Profile page.

user profile page on the front end

That’s all. Now you know how to display the submenu templates on the Account and User pages using the Profile Menu element.

Was this article helpful?
YesNo

Need help?

Ask Facebook community

Get answers from 22K Crocoblock Community experts from all over the world.

Start a live chat

Ask question to support agent and share its details via chat messages.