Help Center

Profile Menu Block Overview for Gutenberg

Profile Menu Block Overview for Gutenberg

This tutorial will describe how the Profile Menu block works and how to customize it to display different content on the WordPress Account and User page with the WordPress (Block) editor.

Before you start, check the tutorial requirements:

  • Block editor (Gutenberg)

  • JetEngine plugin installed and activated

Account Page

Proceed to the JetEngine > Profile Builder tab.

Things to know

Since I set the “Rewrite” Template Mode, I cannot edit the Account page, so I’ll place the Profile Menu block on the subpage templates with which I build the Account page. If you want to place the block on the Account page, choose the “Content” Template Mode.

In case you changed the settings, hit the “Save” button.

user profile builder dashboard rewrite template mode

Open the Account Page tab and ensure you have added several subpages. You can create the subpage templates with the JetEngine Listing feature. Note that the Profile Menu 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 block, check if the Hide from menu option for the subpage is disabled.

hide from menu

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

I went to the Listing template created in the Gutenberg editor.

Drag-n-drop the Profile Menu block on the editing page.

profile menu block

This block has such options:

profile menu block settings
  • 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;
  • Layout. Here, you can select such layouts for the desktop view:
    • Horizontal;
horizontal layout for the profile menu block
  • Vertical;
vertical layout for the profile menu block
  • Layout Tablet. Select the layout for the tablet view;
  • Layout Mobile. Pick the layout for the mobile view.
Warning

If you added the Profile Menu block on the Account page, you need to use the Profile Content block. It will show the content of every subpage when users will click on the corresponding menu item. If you set the “Rewrite” Template Mode and edit the subpage template, you don’t need it.

profile content block

Hit the “Update” button.

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

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

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

account page with subpage templates 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

Since I set the “Rewrite” Template Mode, I cannot edit the User page, so I’ll place the Profile Menu block on the subpage templates with which I build the User page. If you want to place the block on the User page, choose the “Content” Template Mode.

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

select a page to use as the public single user page

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 block, check if the Hide from menu option for the subpage is disabled.

hide from menu toggle

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

I went to the Listing template created in the Gutenberg editor.

Drag-n-drop the Profile Menu block to the editing page.

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

single user page context
Warning

If you added the Profile Menu block on the User page, you need to use the Profile Content block. It will show the content of every subpage when users will click on the corresponding menu item. If you set the “Rewrite” Template Mode and edit the subpage template, you don’t need it.

profile content block

Hit the “Update” button.

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

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

user page with the profile menu 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 block.

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.