Copy discount code:

crocoturns6
croco b-day main image left part croco b-day main image center part croco b-day main image right part
Expires In
croco b-day left image
croco b-day right image

Help Center

How to Create Nested Listings

How to Create Nested Listings

This detailed guide reveals step-by-step instructions on creating posts listing with nested terms listing.

Before you start, check the tutorial requirements:

A nested listing is simply a listing of listings or any list with another list as an element (a sublist). 

With JetEngine, you can build it in several steps. Here is a step-by-step tutorial on how to show related info to the current item.

You can use nested listings for different cases, but let’s imagine that you need to show a Category content of the Related Posts. This tutorial uses images as an example, but you can also display any category content.

Add Images to Categories

There are two ways to add an image to the category: the default Featured Image field or the custom media meta field

Head to WordPress Dashboard > JetEngine > Meta Boxes and create Custom Meta Box for your Custom or default Taxonomy. Select the “Media” Field type and “Media ID” Value format.

category media field

Navigate to WordPress Dashboard > JetEngine > Taxonomies.

If you work with Custom Taxonomy, edit it and create a new media meta field.

Or, if you deal with the Default Taxonomy or created via another plugin, you can enable the Built-in toggle in the top right corner to find the needed taxonomy. Then press the “Edit” button and add the field.

built-in toggle

Now you are ready to upload media. Find the taxonomy and edit categories where you need images. Upload images to the image field and save changes.

media field upload

Create Terms Listing

Navigate to JetEngine > Listings > Add new and create Terms listing

Add a Dynamic Image widget and select your media field in the Source dropdown field.

dynamic image widget settings

If it’s a featured image, find the Custom meta field/repeater key field and paste the “thumbnail_id” value, it’s a featured image field key.

thumbnail id custom meta field for dynamic image

Check other widgets settings and adjust some if needed. You can enable the Linked image option, change the alignment and use the Style tab to customize your terms listing.
You can add the content you want besides the media with the Dynamic Field, Dynamic link, or other widgets. Save changes by pushing the “Publish/Update” button.

Create Terms Query

Warning

If we add the Terms listing to the Posts listing as it is, it will show all the categories in each post. So let`s prepare the query first.

Head to WordPress Dashboard > JetEngine > Query Builder and press the “Add New” button. Name the query and select the “Terms Query” Query Type.

terms query taxonomy in general settings

In the General tab, choose your Taxonomy name and move to the Object/Post IDs field. Click the Dynamic Tag icon and select the “Current ID” option from the appeared list. 

Thus we specify post IDs to get the categories. In our case, current post ID. Save changes and close the query.

current id macro in the object post ids field

Insert Nested Listing

Open the JetEngine > Listings directory, and create or edit the Posts listing. Find the Listing Grid widget in the Elementor editor area. 

In the Listing field of the General tab, start typing your Terms listing name and select it.

Head to the Custom Query tab, activate the Use Custom Query switcher and choose your Terms query in the Custom Query field. Change the number of columns if you wish so. Adjust the Listing Grid widget settings if you need and save the result.

custom query settings in listing grid widget

Remember that you can add other query conditions, such as showing only parent or child categories, using the “Current ID” dynamic macro in the Parent/Child tab. You can also add order conditions. You can even query to show categories with specific meta field value.

Check Result

The last step is to add your Posts listing widget to the needed page.

result on front end

In the described case, it’s a related post listing, so a related query is added. Feel free to pass this step if you have another setup. 

Remember that the workflow is the same for other listing types. Now you know how to use nested listings and show the category’s content in the Posts listing.

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.