Stand with Ukraine. Fight for freedom and democracy

Donate
Back to contents

How to Connect Custom Categories with Users

Learn how to connect custom WordPress categories with the users and display the needed terms and related data on the front end.

Tutorial requirements:

  • JetEngine installed and activated;
  • CPT created with the help of JetEngine functionality; 
  • Custom taxonomy built with JetEngine and attached to the Custom Post Type;
  • Elementor Page Builder free version or Block Editor;
  • Glossary including the needed values (for instance, level of skills, as in the tutorial);
  • (optionally) Users Meta Box with the desired meta fields.

If you have completed all the steps described above, there will be no difficulties with the tutorial flow. Let’s check how to achieve the desired result.

Initially, let’s look at the result we want to get. At the end of this tutorial, we will know how to adjust the user listing, including custom categories.

results in the listing grid

Remember that we have created and connected CPT and custom taxonomy beforehand.

taxonomy attached to post type

And also, we have built a glossary with skills to use the options later as meta fields for the future relation.

jetengine glossary built

Create a Relation

Let’s add a WordPress relation. Head to WordPress Dashboard > JetEngine > Relations and click on the “Add New” button.

relations list jetengine

Give a Name to the relation, and set the Parent object and Child object.

Now “Users” will be the parent, and “Skills” taxonomy is the child object.

Also, mind selecting the “Many to Many” Relation type

users and skills relation

You can adjust other fields in the General Settings section if needed. For instance, we leave Register controls for parent object and Register controls for child object toggles activated.

relation controls settings

Then we move to the Labels section and alter the default values. Although, you can leave them without changes.

jetengine relation labels

We need to add a meta field to the relation in the samely named section by pressing the “New Field” button.

relations meta fields new field button

We create a “Radio” Field type meta field with the glossary as the source. 

To set the glossary, activate the Get options from the glossary toggle and select the Glossary you added earlier. For instance, ours is “Level.”

Once the adjustments are made, press the “Add Relation” button.

meta fields added to relation

Add Info to Users

Go to WordPress Dashboard > Users and press the “Edit” button next to the desired user.

wordpress users list

Scroll down to the section with the needed relation. Hit the “Connect Skills” button (name changes depending on the child object name and relation labels).

add skills to user section

Now pick the needed option in the one available drop-down list and click the “Connect Skills” button.

connect related skills

You can set the meta data for the skill (term) selected just before.

Don’t forget to press the “Save Meta Data” button.

edit meta fields for related items

Work on other fields if needed and click the “Update User” button at the end of the page.

Add meta data to all needed users by taking the steps described above.

Display Data in the Listing

Now we need to create terms listing to display users’ skills.

Navigate to the WordPress Dashboard > JetEngine > Listings directory. Pick an already built listing for editing or click the “Add New” button.

listing items jetengine

In the appeared pop-up, select the “Terms” Source, fill in the Listing item name, and pick the needed Listing view. We will review both Elementor and Gutenberg.

Press the “Create Listing Item” button to open the editor.

terms listing source

Create a listing in Elementor

Add Dynamic Field widget to display the term name related to the user. We choose the “Post/Term/User/Object Data” Source and “Term name” Object Field this time.

term name dynamic field

And add one more Dynamic Field. This widget will show the user level (metadata). 

Pick the “Relation Meta Data” Source and find the “Skill Level” option. “Skill Level” is the name of the relation Meta Field.

Now you can work on other settings and press the “Publish/Update” button once you finish.

skill level dynamic field

Then head to WordPress Dashboard > JetEngine > Listings again and create one more listing, “Users” Listing source this time.

users listing source

Add desired widgets for display. For instance, we have added a Dynamic Image widget to show the user pic and Dynamic Field for the user’s name.

listing with dynamic widgets in elementor

Then find the Listing Grid widget and place it on the page. Select the newly built Listing. Don’t worry; it will be empty till you don’t set a query.

terms listing in users listing

Build a query

You can open the WordPress Dashboard > JetEngine > Query Builder directory to build a new query.

jetengine queries list and add new button

Complete the Name field and select “Terms Query” as the Query Type.

terms query in the query builder

Scroll down to the General tab and select the Taxonomy.

general tab of the terms query

Open the following Include/Exclude tab and press the Dynamic Tags button to set the “Related Items” macro. Then adjust proceeding info, select the needed item as From Relation option, “Child Object” as From Object, and “Current Object ID” as Initial Object ID From.

Push the “Add Query” button.

include or exclude tab of the terms query

Return to the “Users” Listing and head to the Custom Query section. Here, enable the Use Custom Query toggle and choose the built Custom Query item.

custom term query enabled

Everything will be displayed now. Adjust the listing as desired, and press the “Publish/Update” button.

Build a listing in Block Editor

The same settings are available if you pick “Gutenberg” as the Listing view

Mind creating both “Terms” and “Users” listings with the help of samely named blocks.

And also, use the previously built query.

user listing in gutenberg

Mind pressing the “Publish/Update” button to save the listing.

Place Listing on the Page

Open WordPress Dashboard > Pages and select the page for editing. Or create a new one by clicking the “Add New” button.

The new page can also be built with Elementor Page Builder or Gutenberg.

Listing Grid widget in Elementor

Drag and drop the Listing Grid widget onto the page. Choose the created listing in the Listing field. 

Now everything is displayed, you can save the changes by clicking the “Publish/Update” button.

user listing in elementor

Listing Grid block in Gutenberg

Find the Listing Grid block and place it on the page. Select the listing you have built earlier in the Listing field.

Press the “Publish/Update” button to save the page.

user listing grid in gutenberg

The result is displayed; now you know how to connect custom categories and metadata with users and show it with the Listing Grid from the JetEngine plugin.