JetEngine is the first-class addon for Elementor editor which allows adding the dynamic listing and grid layouts and provides a way to display the custom posts and taxonomies within any page templates.
Today we’ll show you how to choose the needed posts relations and how to set them with JetEngine plugin.
JetEngine provides you with 3 types of such relations, so let’s take a quick overview of them.
The post relations types
One-to-one posts relation — this relations type implies that one parent post type can be connected only to one child post type. E.g., one country has only one capital, and there are no capitals that are actually related to many countries at once. So the relation between the “Country” and “Capital” post types should be “one-to-one”.
One-to-many posts relation — means that one parent post type can be related to many other child post types. E.g., one book has only one author, however, one author could have written multiple books. So the parent “author” post type should have “one-to-many” relations type with the “book” child post type.
Many-to-many posts relation — allows linking a lot of parent post types to many child post types at once. E.g., the is a “product” child post type, which is related to the “shop” parent post type. However, there are many products in each of the shops, and there are different shops where each of the products can be sold. So, the relations are “many-to-many”.
How to select post relations
1Step — WordPress Dashboard
Open the JetEngine > Post Relation directory in the WordPress Dashboard.
2Step — Add New
Click the Add New button and then you will need to provide the title for post relation.
After that, select the post type both for parent and child posts from the Post type 1 (Parent) and Post type 2 (Child) dropdowns.
3Step — Relation Type
Afterward, set the needed posts relation in the Relation type dropdown.
Here you can also see Add meta box to parent page toggle. Enable this option in order to add the meta box while viewing the parent post’s editing page.
And if you want to add a meta box while viewing the child post’s editing page to be able to set the patent post from it, toggle the Add meta box to Child page option.
4Step — Add Relation Button
Then click the Add Relation in order to save a new relation.
Displaying the related posts of different type with JetEngine
First, let’s clear up where we should add the related posts. Usually, the related posts are displayed on the Single post template, so in order to add them, first, one should create the template (either with Crocoblock or Elementor PRO).
1Step — WP Settings
In order to create a template with Crocoblock, open the WordPress Dashboard and proceed to the Crocoblock > My Library directory.
If you don’t use Crocoblock, you can also add a template via Elementor > My templates block.
To learn more about creating the Single post template feel free to check this tutorial.
2Step — Drag and Drop the Listing Grid
Now open the Single post template to which you’ve decided to add the related posts, with Elementor editor, and drag and drop Listing Grid widget to the page’s canvas.
3Step — Select a Listing
Select a listing to show in Listing dropdown. Make sure you’ve got the listing for the post type that is related to the post type template you’re now editing. If not, please, proceed to JetEngine > Listings block and here create a new listing.
4Step — Post Query
Open Posts Query block and here add a new item.
5Step — Paste the macros
Paste the %related_children_from|post-type-slug% or %related_parents_from|post-type-slug% macros inside the Include posts by IDs field (it depends on the relations between the posts, and if you’re editing the post template that is Child or Parent for the related posts.
Don’t forget to replace the post-type-slug with an actual slug of the post type.
Click the Update button.
This relation type allows you to make a hierarchical path between two separate relations.
Let’s puzzle it out on the example. As an example, we took such post types as Continents, Countries, and Tours. It is possible to create two relations Continents > Countries and Countries > Tours and connect these two relations in one path.
1Step — Create Relations
As was mentioned above, you need to have two relations to set the grandparents one. If you do not have it, please, follow our tutorial on how to create them. In the example, we have two relations County > Tours and Continents > Country.
2Step — Parent relation
In our case, in Relations list > Country > Tours, we selected Continents to Country in the Parent relation block.
3Step — Set the Macros
First of all, we need to add the Listing Grid and choose the listing related to the certain Single post. Then, fill the Post Query with macros. Let’s figure them out:
%get_grandparent|from-post-type% — get the parent post for the current post type
%get_grandchild|from-post-type% — the search will go from the current post to the child’s one.
Here “from-post-type” you need to enter the slug of the post type.
It is a little overview for you to have an idea about this type of relation. To get to know more, kindly take a look at the full tutorial.
Great! Now you’ve created the post relations and have set the related posts of a different type for displaying on the Single post template!