Back to contents

JetEngine: How to Display Related Child Posts in the Listing Grid

This brief tutorial uncovers the process of displaying the related child posts in the Listing Grid widget within JetEngine plugin for Elementor editor.

Post relations make it possible to display the relations between the needed posts. Using posts relations you can easily set the ‘one-to-one’, ‘one-to-many’, and ‘many-to-many’ relations between the posts and custom post types. You can easily perform it within the Listing Grid widget coming with JetEngine plugin.

Let’s have a look at the process of creating and displaying the related child posts!

How to create the child relations

Step 1 – Make sure, that you have previously created the custom post types and fill them with some posts. You can read this tutorial to learn how to perform it (link to ‘Creating custom post type with JetEngine’).

Step 2 – Then, in the WP Dashboard go to the JetEngine > Posts Relations and click Add new button.

Step 3 – In the following screen, you should apply some settings. First of all, enter the Name of the current relation. Then select the Parent and Child posts that will comply with each other and set the necessary relations type: ‘one-to-one’, ‘one-to-many’ or ‘many-to-many’ one.

As we can see from the screen below, the child related posts are defined as Object 2. In our case, we have the Taxi, Taxi driver and Taxi order child posts in three different posts relations.

Post Relations

Step 4 – Next, in the WP Dashboard you should proceed to each post from your custom post type and click on Edit link. In the right side panel, you will see tabs that are called the Related post type (e.g. ‘Related District’). They allow you to choose the related child posts, whether one or several depends on the relations that you have previously set.

In our case, we go in the WP Dashboard to the Taxi Driver post type > Adam post, click Edit link and see on the right side panel tabs which give us a possibility to select only one taxi and a number of orders. The same you need to perform with other posts in the custom post type where you want the related posts to be displayed.

select only one taxi and a number of orders

Step 5 – Then, you should create and display custom terms within the JetEngine Listing Grid. Further information you will find in our tutorial.

How to display the related child posts

Step 1 – Open your single template with Elementor editor.

Step 2 – Search for the Listing grid widget and add necessary listings to the page where you want them to be showcased.

Step 3 – In the Listing settings go to the Content > Posts Query tab and Add new item. In the dropdown menu, you should select the Posts Parameters type.

Post Parameters posts query

Step 4 – In the Include posts by IDs field you should enter the next macros: ‘%related_children_from|post-type-slug%’. Consider, that instead of ‘|post-type-slug’ you must enter the slug of the corresponding post type.

Posts Relations overview

That’s it! Enjoy your result!
It’s pretty easy to create and display the related child posts with the help of the Listing Grid widget.