Back to contents

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

This tutorial explains how to display the related parent posts in the Listing Grid with JetEngine plugin for Elementor.

You can display the relations between the necessary posts or custom post types with the help of Posts relations option of JetEngine plugin. There are several types of relations, such as: ‘one-to-one’, ‘one-to-many’ and ‘many-to-many’. You can choose only one type of relation for post types, but which of them depends on your needs.

If you have to display the related parent posts you should do it with the help of the Listing Grid widget of JetEngine plugin.

Let’s get started displaying the related parent posts!

How to create the parent relations

Step 1 – Ensure, that you have previously created the custom post types and add there the needed amount of posts there. Follow the link for further details.

Step 2 – After that, go to the WordPress Dashboard > JetEngine > Posts Relations and add a new posts relation for each post type.

Step 3 – To perform it, you should put in firstly the Name of the relation that will appear. The next you should do is to choose the posts as the Parent and Child ones that will be connected with each other and select the appropriate relations type.

Look at the screen below to confirm, that the related parent posts are located in the column with the name Object 1. In our case, the parent posts are the Taxi driver (twice) and District post types.

Posts Relations in the WP Dashboard

Step 4 – After that, open each post from the post type and edit them in the WordPress Dashboard. In the edit screen, you should choose in the right side panel tabs where you can select the related parent posts (whether one or several depends on the relations that you have previously set).

In our case, we go to the Taxi Driver > Adam post, click Edit link and see on the right side panel possibility to select some districts. The same you need to do with other posts in the custom post type where you want the related posts to be displayed.

Parents Relations in the page settings

Step 5 – Then, you need to create and display custom terms with JetEngine Listing Grid widget. Look into this tutorial for more details.

How to display the related parent posts

Step 1 – Now, you should proceed to the Elementor editor and look for the Listing grid widget.

Step 2 – Then you need to add the needed listings to your page where you want them to be displayed.

Step 3 – After adding the Listing, navigate to the Content > Posts Query tab and click Add new item button. Choose in the dropdown menu the Posts Parameters query type.

Parents Relations in the Posts Query

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

Parents Relations overview

Here you are! Now you can easily display the related parent posts.
That’s as simple as ABC!