This detailed tutorial fully covers the topic on how to display the grandparent/grandchildren post type relations using the JetEngine Listing Grid Widget.
Grandparent/grandchild relations type allows setting the connection between two already existing relations.
To create this type of hierarchical path you need to use the JetEngine Listing Grid widget that helps you to display the certain Listing and set the relation with the help of macros.
Well, let’s do not waste time and walk through the process:
1 Step— Post Type Creation
To start work with the relations, make sure to have the Post Types created between which you want to set a connection. In case, you are not sure how to create the custom post type follow our documentation on this topic.
2 Step— WordPress Settings
Go to WP Dashboard > JetEngine > Relations. In the example, we have two relations:
- Continent > Country
- Country > Tour
Learn more about how to create Related Posts in the Listing Grid.
3 Step— Parent Relation
Now, you need to create a grandparent/grandchild relation between Continents and Tours. To make it work, go to the Country > Tour relation and set the Parent relation as “continent to country”.
4 Step— Listings and Single Posts
To start setting the macros we need the Single Post and Listings to be created for each post type. In our case, it is Continents, Countries, and Tours.
In each Single Post, we will need to display the certain Listing with the help of the Listing Grid widget and enter the macros to showcase the relation.
Check the tutorials on Listings and Single Post Creation.
5 Step— Relations Settings in Elementor
As an example, we are going to create a relative path between Continents and Tours with the help of Macros.
To turn it into reality, in the Continents Single Post it is needed to display the Tours listing within the Listing Grid.
6 Step— Enter the Macros
The next step is to go to the Post Query (Elementor) or Query Settings (Gutenberg) and enter the macros
%get_grandparent|from-post-type%
where we should change this part “from-post-type” to “tours” to showcase the data that are related to a certain Continent.
Also, it is possible to make it vice versa, in the Single Tour display the Continents Listing with the Listing Grid, and then we need to use
%get_grandparent|from-post-type%
In the part “from-post-type” you need to enter the slug of the parent post. In our case, it would be “continents”
Here is what we’ve got. In the Elementor page builder:
In the Gutenberg editor:
Congratulations! You have set the Grandparent/Grandchild relations.
Well done!