Stand with Ukraine. Fight for freedom and democracy

Donate
Back to contents

JetEngine: Creating Users Query and Displaying Specific Users in the Grid

Learn how to create Users Query with JetEngine Query Builder and display only users with the “Top Specialist” status depending on the number of their WordPress posts.

If you want to show only specific users in the grid, JetEngine got you covered. Systemize the dynamic display of the users with needed status only and even query them by the number of posts using Query Builder

Tutorial requirements:

  • JetEngine plugin installed and activated;
  • WordPress users created and ready-made posts with their authorship;
  • Gutenberg Editor or Elementor Page Builder free version.

Table of Contents:

Build a Glossary

As we will begin with creating a glossary, firstly head to WordPress Dashboard > JetEngine and open the Glossaries tab.

Click on the “New Glossary” button to set the needed parameters.

jetengine glossaries tab

Complete the Name field with a value that will become a label for the created glossary.

After that, pay attention to the Data Source field. This time we will select the “Set items manually” option, although you can choose the “Get items from uploaded file” in case you want to import values.

Press the “New field” button to add the first item.

new glossary default fields

Let’s take a look at the presented fields and complete them accordingly.

jetengine glossary item
  • Field Value — type in a value that will be saved into the database. Pay attention that this value shouldn’t include any spaces and capital letters and should be written using Latin letters. If you want to separate the words, do it by using “-” and “_” symbols;
  • Field Label — complete the field with the label displayed as a glossary item title;
  • Is checked (selected) — enable the mentioned toggle to make the particular value checked by default. For instance, we activate it for one option, one that is dedicated to new users. So, all the users will get this status by default, and it will be possible to disable it later.

Then add as many options as you need by hitting the “New field” button, adjust them, and don’t forget to press the “Save” button.

added items to the glossary

After taking the previous steps, we need to add the built glossary into the users meta box.

Add a Checkbox Field to the Meta Box

Navigate to WordPress Dashboard > JetEngine > Meta Boxes and push the “Add New” button to build a new meta box.

Or, select the existing meta box and press the “Edit” button next to the needed item.

jetengine meta boxes list

Starting from the General Settings tab, complete all the initial fields.

meta box general settings
  • Meta Box Title — give a title to the meta box you are creating;
  • Meta Box for — select the source where the meta box will be displayed. In the described use case, we need to pick the “User” option;
  • ‘Edit meta box’ link — activate this feature if you want to display the gear-shaped button on the user editing page to proceed to meta box editing quickly.

You can also work on the Visibility Conditions tab to define the visibility of the user meta box. 

Now we will select the “Edit User” option so only the website admin can change the users’ status.

Mind changing this value into the “Edit User & Profile” one if you want to make editing available both for admin and users.

meta box visibility conditions

Ultimately, proceed to the Meta Fields tab and press the “New Meta Field” button to start editing.

jetengine users meta box meta fields

Let’s check the meta field settings and work on the needed ones to get the desired result.

the first part of checkbox field settings
  • Label — name the field displayed in the user meta box;
  • Name/ID — set the ID for the future checkbox field; you’ll need it later. Check that this value should include only small Latin letters, numbers, “-” and “_” symbols with no spaces;
  • Object type — select the “Field” option as you need to add the field precisely;
  • Field type — specify the meta field type you want to use. This time we select “Checkbox.”

Then look through the following settings. Not all of them are obligatory to complete in the described case. Pay attention to the Get options from the glossary toggle; activate it to see the Glossary field. Here pick the glossary built earlier with JetEngine.

the second part of checkbox field settings

That’s all we need in the meta box. So, now you can click the “Add/Update Meta Box” button to save the result.

Create Users Query

The next step is building a query by heading to the WordPress Dashboard > JetEngine > Query Builder directory. 

Press the “Add New” button to create a new query.

jetengine queries list

Here General Settings are also the first to be set in the described query.

new users query general settings
  • Name — give a title to the edited query;
  • Query Type — choose the “Users Query” to set the query strictly for users;
  • Query ID — you can optionally fill in this field if you work with the JetSmartFilters plugin and need the ID for the filter you build.

Moving to the Users Query, open the Misc tab. Here we need to specify the Number of users that will be displayed in the grid later.

NOTE
This value will override the one you can set in the Listing Grid block/widget.
the first part of the users query misc tab

Also, we want to display users not only depending on their status but also on the number of posts they have. So move to the Order By field and select the “By user post count” option. 

Besides, we set the Order as “From highest to lowest values.” And you can choose the preferred order if you want.

the second part of the users query misc tab

Go to the Meta Query tab to work on its settings. Push the “Add new” button to create a new meta query clause.

meta query add new button

Let’s start filling in the fields available for editing.

meta query tab in the users query
  • Field key/name — paste the meta field value that you have entered previously in the user meta box Checkbox meta field;
  • Compare — choose the “Regexp” option here as it is meant to be used with the Checkbox and Radio values;
  • Value — paste one of the values you want to display in the grid;
  • Type — pick the “Char” option if you work with the alphabetical values or check the other available value.

That’s all we need for the query, so now you can click on the “Add Query” button.

Display Top Specialists

Go to WordPress Dashboard > JetEngine > Listings. Edit the existing listing by hovering over it and pressing the “Edit” button, or hit the “Add New” button.

Fill in the listing with the dynamic data concerning users on your WordPress website.

user listing dynamic fields

Also, we can add the created statuses to this listing. Place the Dynamic Field widget/block onto the page.

Set the “Meta Data” as the Source and pick the Meta Field you have created before in the users meta box.

user listing dynamic checkbox data

Move to the Filter field output toggle and activate it to set the “Checked values list” as the Callback

Select the built glossary in the Get labels by glossary field. So, now this is it for adjusting this field.

You can also style up the added fields in the corresponding Elementor section and press the “Publish” button whenever everything is ready.

dynamic field checked values list callback

Head to the page where you want to place the listing in WordPress Dashboard > Pages. Select the existing page and hover over it to click the “Edit” button.

Or build a new page by hitting the “Add New” button.

wordpress pages tab

Add Listing to Gutenberg

Search for the Listing Grid block. Once you add it to the page, pick the needed item in the Listing field.

listing grid block in gutenberg editor

Open the Custom Query tab to activate the Use Custom Query toggle and select the created query in the Custom Query field.

NOTE
If you want to style up the Listing Grid block in the Block Editor, install and activate the JetStyleManager plugin, which is entirely free.

Push the “Publish/Update” button to make the page live.

custom query for listing in gutenberg

Adjust Listing in Elementor

The same procedure described earlier can be repeated in the Elementor Page Builder.

Find the Listing Grid widget and place it on the page. Pick the item you have built earlier in the Listing field.

listing grid widget in elementor block editor

Move to the Custom Query tab, switch on the Use Custom Query toggle, and pick the built query as the option in the Custom Query field.

custom query for listing in elementor

That’s it; press the “Publish/Update” button. 

And now, by means of JetEngine and its Query Builder feature, all the users with the “Top Specialist” status will be displayed within the grid and ordered depending on the number of user posts.