Back to contents

JetEngine: How to Choose and Set the Needed Post Relations

From this tutorial, you can get information on how to establish the posts relations between different post types using the JetEngine plugin for Elementor. Plus, we’ll explain what grandparents relations are.

 

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-one posts relation

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.

One-to-many posts relation

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”.

Many-to-many posts relation

How to select post relations

1Step — WordPress Dashboard

Open the JetEngine > Post Relation directory in the WordPress Dashboard.

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.

NOTE! Parent and child post type can’t be the same type of the post.
Add New Posts Relationship

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.

Single post template

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.

Listing Grid widget

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.

Ajax Serch Widget

4Step — Post Query

Open Posts Query block and here add a new item.

Posts Query block

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.

Grandparents Relations

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.

Post Relations List
NOTE! For the relations to work properly, do not forget to apply ‘Countries’ to each ‘Continent’ and each’Tour’ to each ‘Country’.
Related Posts

2Step — Parent relation

In our case, in Relations list > Country > Tours, we selected Continents to Country in the Parent relation block.

Relations settings

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.

Post Quey Settings

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!