How to Set Up a Public Single User Page

Add and fill in custom fields for users

Firstly, create the Meta Box for users following the How to Apply Meta Boxes to Users tutorial.

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), and language (Checkbox field).

We created a meta field with the “Repeater” Field type and the “Skills” Label to display the user’s professional skills. 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. 

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

You can also 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 when editing 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.

Hit the “+ New Glossary” button, type the Name, select the “Set items manually” Data Source, and set the needed options by clicking the “New field” button.

After creating the options, push the “Save“ button.

Also, we created the “Languages” Glossary for the Checkbox meta field to display what languages the user knows.

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

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

Hit the “Add/Update Meta Box“ button after finishing customizing.

To fill in the custom meta fields, head to the Users > Profile tab.

To set the Select field options in the Repeater field, hit the “+ Add Item” button and pick the needed option from the drop-down list. Repeat this step as many times as you need.

After setting the options, push the “Update Profile” button.

In the Profile tab, you can fill in custom fields for the current user. To fill in custom meta fields for other users, go to the Users > All Users tab and select the user to edit.

Create a subpage

Now, we’re ready to set up a subpage with user information. Return to the WordPress Dashboard > JetEngine > Profile Builder > User Page tab and press the “+ Create New Template” link for the Template option of the required subpage.

In the Create New Profile Template pop-up, enter the Template Name, select the Template Type (“Listing Item,” “Elementor Template,” or “Bricks Template”). If you select “Listing Item,” you can select the Listing view (“Elementor,” “Bricks,” “Blocks (Gutenberg),” or “Timber/Twig“).

In our example, we created the Elementor template.

In the Elementor editor, we added a new Section and dragged and dropped the Inner Section widget with two columns into it.

We inserted the Dynamic Image widget into the first Column of the Inner Section. As the Source, we selected the meta field from the user Meta Box.

In the Style settings tab of the Dynamic Image widget, we set the 174 px Width and 50% Border Radius.

Learn more about settings from the Dynamic Image Widget Overview.

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 of the user Meta Box.

You can discover more about the Dynamic Field widget settings in the Dynamic Field Widget Overview.

Then, we added the Heading widget with the “General” text to highlight the general user information. 

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 of 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).

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

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.

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

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 values 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 values to: “4” Top, “10” Right, “4” Bottom, and “10” Left to set the space size around the items. Finally, we set the Margin values to “10” Right to set the distance between items.

To learn more about the widget settings, move to the Dynamic Repeater Widget Overview.

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

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