Back to contents

How to create a listing template for Users

useful information

In this tutorial, we will dive into the topic on how to create the listing for the users to show the full list of them with the attractive appearance and either with the default or the custom information.

Listing created with the JetEngine plugin is a very useful and practical tool in order to organize the content into the sections. Listing can be created in a few clicks with the dynamic widgets which are able to display type of information: posts, pages, products, and users. Feel free to proceed to the Knowledge Base to find out information about listings with the Posts and Terms source types and their displaying.

And now let’s proceed to the step-by-step guidance on how to create a listing for the Users.

Backend preparations

1 Step — Adding a new user

First of all, proceed to your WordPress Dashboard to the sidebar and add a new user. Set the needed default parameters: as the Username, Email, First and Last Name, website and the other information.

Note down, that the Username can’t be changed during the further transformations of the personal data and will be shown in the backend only.

Default info about the users

2 Step — Applying meta fields for the users

Go to the JetEngine > Meta Boxes and add a new one.
Then set the name and select the User value in order to attach it to the users.

Next, you need to choose the value from the Visible at field. This option determines who will be able to see and edit the created meta fields.
If the Edit User option is selected, then the meta box will be visible for the admin only.
If the Edit User & Profile option is chosen, then the meta box will be visible for both admin and users and the last ones will be able to change the content by themselves.

Meta Box for the users

After these basic settings for the Meta Box are done, let’s proceed to the meta fields adding.
Read the tutorial to find out how to add meta fields.

3 Step — Filling meta fields for the users with value

Go to the Users > All Users and click the Edit button under each title. Among the other default settings at the bottom of the page you will see the available Meta for users block. Fill in the fields with the appropriate information.
Click the Update Profile button.

Meta fields for the users

Proceeding to Elementor editor

1 Step — Creating a listing to showcase the information of the users

Proceed to WordPress Dashboard > JetEngine > Listings and create a new one for the Users which you can select in the Listing source field. Enter the specific name and choose the Elementor option in the Listing View field.

Listing for the users

Now we are using the Dynamic widgets to fill in the information about the added users.
Choose the Dynamic Field widget and the Post/Term/User Data in the Source field. In the Object Field, you are able to choose among several items the one you want to be displayed. With the Post/Term/User Data source type you will be able to display all the default information which is added to each user.

  • ID will display the numeric value of the user’s id which you can get while hovering the login value at the WordPress Dashboard.
  • Login will show the name either which is set when WordPress has been installed creating. Login helps the user to go into the website Dashboard.
  • Nickname will showcase that name which is set as a nickname in the users’ settings.
  • Email field will output the value from the so-named field in the user’s settings.
  • URL object field will display the website address you have entered in the corresponding field in the WP Dashboard.
  • Registration Date option will display the date when the user has been added to the database. Enable the field filter output option as usually performed for the data values. Read here the detailed guide about the callbacks for the date meta field (link). This value you can’t change as it is recorded automatically.
  • Display Name option must show the name you have applied from several ones for the choice. So the name will be a little customized and differ from the nickname. It is the default option in Users settings either.
Post/Term/User Data in the Dynamic Field

What about the default avatar, you can display it with the Dynamic Image widget if you choose the User Avatar option in the Source field. Then, you will have the slider to specify the exact image size. Also, you can set the fallback image which will be shown if the avatar is empty or even doesn’t exist at all. But if you enable the option which is called Hide if the value is empty it will not be displayed and the fallback option will be unavailable.

If you want to display the image from the Meta Field, choose the specific name of it in the Source field and customize up to your needs.

Also, you can make the picture linked with enabling the corresponding option. For the detailed information about the Dynamic Image widget possibilities, please proceed to the tutorial.

The other meta fields you can display if you choose the Meta Data in the Source field, and choose the exact meta field name from the dropdown menu or enter the meta field key.

2 Step — Displaying a listing of the users

The last you need to perform is to display all the users on the page with the help of the Listing Grid widget.
For this drag-n-drop this widget and choose the name of the listing you need to display.

Listing for the users

Today, we reviewed the listing template creating for the users to show up the important information about them, as well as additionally attached to the meta fields.