Help Center
Creating User Account Page With Different Dashboard Structures

Creating User Account Page With Different Dashboard Structures

This tutorial will describe how to create the WordPress Account page with the Content or Rewrite mode of the JetEngine Profile Builder feature.

Before you start, check the tutorial requirements:

  • Elementor (Free version)

  • JetEngine plugin installed and activated

The Account page is the central user dashboard where users can add and edit information, publish and edit posts, and save favorite items. This tutorial reveals how to set the Account page with the “Content” and “Rewrite” Template Modes, create subpages for the Account page, and set the Profile Menu.

In this tutorial, we will present how to create the Account page using the example of the job board website.

What’s the Difference Between Content and Rewrite Template Modes?

With the “Content” Template Mode, you need to set the Profile Menu widget once on the Account page. The Profile Menu displays the titles of the subpage templates set for the Account page with the Profile Builder. Content will be displayed dynamically with the Profile Subpage Content widget when users click the corresponding menu items.

With the “Rewrite” Template Mode, the page is rewritten with the content from templates. If you want to add a menu, you need to place the Profile Menu widget in the templates. You can customize templates differently: you can place the Profile Menu in different places on different templates, and you can decide not to add the Profile Menu to some templates.

Activate the Profile Builder

Before you start, proceed to the WordPress Dashboard > JetEngine > JetEngine tab, enable the Profile Builder toggle in the Default Modules section, and hit the “Save” button. Wait until the page reloads.

profile builder default module activated

Content Template Mode

Create the Account page

Follow the WordPress Dashboard > Pages > Add New pathway. Name the page and hit the “Publish” button. For now, leave the page empty.

create the account page

Create the subpages for the Account page with the “Content” template mode

The Account page will contain the Profile Menu, allowing users to click and access various subpages.

Subpage templates can contain such content:

You can create subpage templates with Elementor or JetEngine listing items.

Create a subpage template with a form

Create a template with Elementor

If you decide to create templates with Elementor, move to the Templates tab under the Elementor tab on the WordPress Dashboard.

elementor saved templates

Push the “Add New” button. Choose the “Page” Template Type and enter the Name. Then, hit the “Create Template” button.

create a new template

In the Elementor editor, fill the template with the needed content. For example, I placed the JetFormBuilder form using the JetForm widget.

When you finish customizing the template, hit the “Update” button.

Create as many templates as you need.

elementor page template with content
Create a JetEngine listing item

If you decide to create a JetEngine listing item, go to the JetEngine > Listings tab and push the “Add New” button.

In the Setup Listing Item pop-up, select the “Users” Listing Source, enter the Listing Item name, pick the “Elementor” Listing view, and click the “Create Listing Item” button.

setup listing item

Fill the template with the content and click the “Update” button.

Create as many items as you need.

listing item as a profile subpage

How to display user information

Firstly, create the Meta Box for users. More detailed information can be found in the How to Apply Meta Boxes to Users tutorial.

meta box for users

Also, add some custom meta fields, for example, user nickname, first and last name, email, mobile phone (Text fields), user avatar (Media field), birthday (Date field), professional summary (WYSIWYG field), experience (Number field), language (Checkbox field).

meta fields in user meta box

To display user professional skills, we created a meta field with the “Repeater” Field type and the “Skills” Label. Then, we hit the “New Repeater Field” button to create a new field inside the Repeater field, entered the Label, and picked the “Select” Type.

select field inside the repeater field

By clicking the “New Field Option” button, you can add options to the Select field manually.

adding options to the select field manually

Also, you can enable the Get options from the glossary toggle and select the needed Glossary from the drop-down menu.

If you create options manually, you can use them once in the current Select field. The Glossary functionality allows you to create a list of items with labels and values and use it as many times as you need.

To create a Glossary, follow the JetEngine > JetEngine > Glossaries path. Learn more about the Glossary settings from the Glossaries Overview.

We hit the “+ New Glossary” button, typed the Name, selected the “Set items manually” Data Source, and set the needed options by clicking the “New field” button.

jetengine glossary skill list

After creating the options, we pushed the “Save” button.

Also, we created the “Languages” Glossary.

language glossary

Return to the user Meta Box and set the created Glossary for the Select field.

select field with the premade glossary

Also, we set the “Language” Glossary for the Checkbox field.

language checkbox field with the premade glossary

When you finish customizing, hit the “Add/Update Meta Box” button.

To check where meta fields are displayed, head to Users > Profile. You can see the custom meta fields under the WordPress user profile fields you can fill in.

fill in user meta fields

To set the Repeater fields, hit the “+ Add Item” button and select the needed option from the drop-down. Repeat this step to add as many options as you need.

how to fill in repeater fields

When you are done, push the “Update Profile” button.

In the Profile tab, you can fill in custom fields for yourself. To fill in custom meta fields for other users, go to the Users > All Users tab and click to edit one of the needed users.

edit user page

Now, let’s create a subpage with user information. You can create a template with Elementor or JetEngine listing items; the creation process is described above.

Currently, we will create a subpage template via the Elementor Theme Builder.

Navigate to the Templates > Saved Templates tab and hit the “Add New” button.

Select the “Page” template type, enter the name, and press the “Create Template” button.

create an Elementor page template to display the user’s info

In the Elementor editor, we added two columns on the page and inserted the Dynamic Image widget into the first one. As the Source, we selected the meta field from the user Meta Box.

dynamic image widget with user's avatar

Under the Dynamic Image, we added three Dynamic Field widgets with the “Meta Data” Source. They display the user’s first and last name and work position from the meta fields from the user Meta Box.

dynamic field widgets with the user's first and last name and work position

Let’s add the Heading widget with the “General” text to highlight the general user information. 

heading widget

Under the Heading widget, we added two Dynamic Field widgets with the “Meta Data” Source. They display the user’s experience and salary from the meta fields from the user Meta Box.

We enabled the Customize field output toggle for both widgets and added custom text before the dynamic value (e.g., “Salary: €%s,” where %s stands for the value pulled from the custom meta field).

dynamic field widgets with customize field output

We added another Heading widget with the “Languages” text.

Under that, we drag-n-dropped the Dynamic Field widget with the “Meta Data” Source. It displays the value from the Checkbox meta field from the user Meta Box and shows how many languages the user knows.

Also, we enabled the Filter field output option and picked the “Checkbox field values” Callback.

how to display checkbox field values

We opened the Style settings tab of the Column in the Inner Section and set the “Classic” Background with the white color to highlight this column. 

column style settings

Now, let’s customize the second column. We drag-n-dropped the Heading widget with the “Professional Summary” text and the Dynamic Field widget with the “Meta Data” Source that shows the user’s description.

Also, we set the “Classic” Background with the white color in the Style settings tab of the Column in the Inner Section

heading and dynamic field widgets in the column

Then, we added the Heading with the “Skills” text. To display the values from the Repeater fields, we added the Dynamic Repeater widget. 

We selected the needed Repeater meta field as the Source. In the Item format textarea, we replaced “name” in the <span>%name%</span> macro with the name of the Repeater field. In our case, it’s <span>%user-skill%</span>. 

repeater dynamic field settings

Then, we opened the Style settings tab of the widget. In the Items tab, we set the Color of the text to black and the Background Color to light grey. We set the Border Radius to: “10” Top, “10” Right, “10” Bottom, and “10” Left to round the corners of the item’s outer border edges. Then, we set the Padding to: “4” Top, “10” Right, “4” Bottom, and “10” Left to set the space size around the items. Finally, we set the Margin to “10” Right to set the distance between items.

repeater field items style settings

Also, we added another Inner Section widget with the user portfolios. To learn more about how to set that, proceed to the How to Allow Users to Add Portfolio With the Front-End Form tutorial.

user portfolios displayed with the listing grid

Finish customizing the template and hit the “Publish/Update” button.

Profile Builder dashboard

Proceed to the JetEngine > Profile Builder tab.

Set the newly created page as the Account Page and select the “Content” Template mode.

Then, click the “Save” button.

user profile builder dashboard

To create subpages for the Account page, open the Account Page tab and hit the “+Add New Subpage” button.

In the new repeater item, add the Title and Slug, and set the Elementor template or JetEngine listing item as the Template

You can also hide the subpage from the menu on the Account page and select user roles allowed to access this page.

profile builder subpage creation

Add as many subpages as you need. When you finish, hit the “Save” button.

profile builder subpages

Customize the Account page

Open the Pages tab and click to edit the Account page in the Elementor editor.

Drag and drop the Profile Menu widget.

profile menu widget

As you can see, the widget shows the subpages’ titles.

Ensure to pick the “Account” Content and then customize other widget settings.

For more information about the Profile Menu settings, check the Profile Menu Widget Overview for Elementor.

profile menu widget settings

After customizing the Profile Menu settings, place the Profile Subpage Content widget.

This widget will show the content of every subpage when users will click on the corresponding Profile Menu item.

profile subpage content widget settings

Hit the “Update” button.

Check the Results

Open the Account page on the front end.

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 subpages on the front end

Rewrite Template Mode

Account page creation

Follow the WordPress Dashboard > Pages > Add New pathway. Name the page and hit the “Publish” button. You can leave the page empty since the content will be displayed from the templates.

Warning

If you want to add some content to the page, do it before you set the page as the Account Page in the Profile Builder dashboard because you cannot edit it.

create the account page

Creating the subpages for the Account page with the “Rewrite” template mode

The Account page will contain the Profile Menu, allowing users to click and open different subpages.

Subpage templates can contain such content:

You can create subpage templates with Elementor or JetEngine listing items.

Subpage template with a form

Elementor template creation

If you decide to create templates with Elementor, move to the Templates tab under the Elementor tab on the WordPress Dashboard.

elementor saved templates

Push the “Add New” button. Choose the “Page” Template Type and enter the Name. Then, hit the “Create Template” button.

create a new template

In the Elementor editor, fill the template with the needed content. For example, I placed the JetFormBuilder form using the JetForm widget.

elementor page template with content

Then, drag-n-drop the Profile Menu widget to the editing page.

With the “Content” Template mode, you can set and style the Profile Menu when you are on the Profile page. The advantage of the “Rewrite” Template mode is that you can style the Profile Menu widget differently for every template. Also, you can decide not to add the Profile Menu to some templates at all.

Ensure to pick the “Account” Content and then customize other widget settings.

For more information about the Profile Menu settings, check the Profile Menu Widget Overview for Elementor.

When you finish, hit the “Update” button.

profile menu in the elementor template

Create as many templates for the Account page as you need, and ensure to add and customize the Profile Menu widget to these templates where you need it.

JetEngine listing item creation

If you decide to create a JetEngine listing item, go to the JetEngine > Listings tab and push the “Add New” button.

In the Setup Listing Item pop-up, select the “Users” Listing Source, enter the Listing Item name, pick the “Elementor” Listing view, and click the “Create Listing Item” button.

setup listing item

Fill the template with the content and add the Profile Menu widget.

Ensure to pick the “Account” Content and then customize other widget settings.

With the “Content” Template mode, you can set and style the Profile Menu when you are on the Profile page. The advantage of the “Rewrite” Template mode is that you can style the Profile Menu widget differently for every template. Also, you can decide not to add the Profile Menu to some templates at all.

When you finish, hit the “Publish/Update” button.

profile menu in the listing template

Create as many listing templates for the Account page as you need, and ensure to add and customize the Profile Menu widget to these templates where you need it.

Displaying user information

Proceed to the How to display user information chapter of this tutorial to learn how to create the template to show the user information for the account.

When you finish creating the template with the corresponding content, you can add the Profile Menu widget and pick the “Account” Context.

With the “Content” Template mode, you can set and style the Profile Menu when you are on the Profile page. The advantage of the “Rewrite” Template mode is that you can style the Profile Menu widget differently for every template. Also, you can decide not to add the Profile Menu to some templates at all.

Finish customizing the template and hit the “Publish/Update” button.

User Profile Builder dashboard

Proceed to the JetEngine > Profile Builder tab.

Set the newly created page as the Account Page and select the “Rewrite” Template mode.

The Use page content option is available with the “Rewrite” Template Mode. Enable it to show the Account page content if subpage templates are not set.

Then, click the “Save” button.

rewrite template mode

Open the Account Page tab to create subpages for the Account page,  and hit the “+Add New Subpage” button.

In the new repeater item, add the Title, Slug, and set the Elementor template or JetEngine listing item as the Template

You can also hide the subpage from the menu on the Account page and select user roles allowed to access this page.

profile builder subpage creation

Add as many subpages as you need. When you finish, hit the “Save” button.

profile builder subpages

Results Checking

Open the Account page on the front end.

For the Profile Menu widget in the template with the user information, we set the “Horizontal” Menu Layout.

account page on the front end

By clicking on the “Post a Job” menu item, we proceeded to the template with the form. Here, we set the “Vertical” Menu Layout for the Profile Menu widget. As you can see, with the “Rewrite” Template mode, you can apply different settings to the Profile Menu for different subpages.

account subpages

That’s all. Now you know how to create the WordPress Account page with the Content or Rewrite mode of the JetEngine Profile Builder feature.

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.