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.
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”.
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.
Step 2 — Choose the child post by typing 3 or more characters of the title, and then click Update.
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.
Step 2 — In the Source field select Meta Data option.
Step 3 — Then, in the Meta Field block select Child Posts option.
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.
Step 3 — Navigate to the Posts Query tab and here add a new item with 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!