Back to contents

How to establish posts relations with JetEngine. Creating “one-to-one” posts relation

From this tutorial, we’ll learn to establish “one-to-one” post relations and showcase related posts with JetEngine plugin, a powerful addon for adding dynamic content to Elementor.

Post relations is an extremely useful option which converts users to visit more posts and stay on the website longer. There are 3 types of posts relations available in JetEngine: one-to-one, one-to-many and many-to-many.
In this tutorial, we’ll explore how to set the relations between two posts if we need the “one-to-one” post relations type.

The “one-to-one” posts relation is set when there is only one child post that can be related to one parent post, and vice versa.

E.g., you’ve got the “Speaker” post type and the “Topic” post type, and each of the speakers covers only one of the topics, as well as there is no such topic that is covered by several speakers. So we should use “one-to-one” relation.

Let’s dive in!

Creating a post relation

Step 1 — The first thing you should do is navigate to the JetEngine > Post Relations and click Add New button.

Jet Woo Templates

Step 2 — Enter the name of the relation. As I’m going to create relations between Speaker custom post type and Topic post type, so I set the post types I want to connect. Make sure to set the Child and Parent posts correctly. However, the hierarchy sometimes depends on the content.
Finally, establish the relation type: it is “One to one”.

One to one relation type

Step 3 — Also, you can toggle switcher to “yes” if you want to add a meta box with the selection to parent or child pages, or perhaps you should add the box to both post types to be able to select the related post when editing the Parent post type as well as when you edit the Child one.

Step 4 — At last, click Add Relation button to complete the process.

Setting a child page

Step 1 — Now you need to open the parent post in a default editor and navigate to the Related Posts block.

Related Posts block

Step 2 — Choose the child post by typing 3 or more characters of the title, and then click Update.

Related Posts block

Pulling related post to the template

There are 2 ways to display the related post in Elementor. The first and the simplest one is to display the related posts from the other type using the Dynamic Field widget.

Step 1 — Drag the Dynamic Field widget to the page of the Single parent post.

Dynamic Field widget

Step 2 — In the Source field select Meta Data option.

Step 3 — Then, in the Meta Field block select Child Posts option.

Content settings for the Dynamic Field widget

Step 4 — In order to display the post, you need to enable Filter field output option and select Related posts list in the Callback dropdown.

The other way to display the related posts from the other post type is with the help of Listing Grid widget.

Step 1 — The first thing you should do is to create a separate listing template for this child post.

Step 2 — Then, drop the Listing Grid widget to the template and choose this listing for displaying.

Listing Grid settings

Step 3 — Navigate to the Posts Query tab and here add a new item with Posts Parameters type.

Posts Parameters type

Step 4 — Add the %related_children_from|post-type-slug% or %related_parents_from|post-type-slug% code inside the Include posts by IDs field.

As you can see, that is pretty simple. Check it out!