JetEngine

Posts relations

This block explains in details the process of creating relations between the posts. Using posts relations you can easily set the ‘one-to-one’, ‘one-to-many’, and ‘many-to-many’ relations between the posts and custom post types to display the specific posts that are related in a set way to the post you’re displaying. Please, keep reading this block to learn how to create and use the relations between the posts (and custom post types).

Step 1. Introduction to Posts Relations

The posts relations allow creating the logical connections between the posts. There are 3 types of such relations, that can be used in different cases. Let’s overview each of them.

• One-to-one

This type of relations between the posts fits when you know that one custom post type can be connected only to one different post type, and vice versa.

E.g., there is a Constellation post type with the posts featuring the titles and images of the constellations located in the Northern Hemisphere. Save the changes.

There is also an Alpha post type. Here we have the posts with the names and photos of the brightest stars (alphas) of the constellations.

To connect these posts we choose the “one-to-one” relation because each of the constellations has only one alpha star. And one alpha star can be found only in one constellation.

When we link the Andromeda constellation to the star called Alpheratz, the relation is created, and we won’t be able to add any more Alpha star post types to Andromeda post, as well as we won’t be able to link any more constellations to the already selected alpha star.

But there can be more constellations and more alpha stars linked to one another.

• One-to-many

This relations type is perfect in cases where one post type can be related to many other posts of a different type. But there is only one post type that can be related to them.

E.g., there is a Constellation post type where we have added different constellations. There is also Stars post type where we have added different stars (not only the brightest ones but actually different ones).

When we create the relations between such post types, we select “One-to-many” relations type, because one star can be related only to one of the constellations (we can’t select it for many constellations). However, we can assign many stars to a single constellation.

• Many-to-many

This relations type allows linking many custom post types to many different post types at once.

E.g., let’s imagine that we have a comet that enters different solar systems on its orbit. However, there is more than one comet entering each of these solar systems. So we create Comet and Solar system post types and use “many-to-many” relations between them.

This way, we can link all the solar systems the comet enters on its way, and we can link all the comets that enter one solar system.

Step 2. Creating the relations

1. After selecting the proper posts relations type, to create the relations between the posts you need to navigate to JetEngine > Posts Relations block and here click the Add New button.
2. The Add New Posts Relationship page opens. Here you need to fill in the fields to create the relations between the post types you have.

• Name - type in the name to use for the relations (e.g., “Events Map”).
• Post type 1 (parent) - use the dropdown to view the list of existing post types and select the post type that will become the parent one. E.g., when working with events and locations, the event held in different places will become the parent post to multiple locations.
• Post type 2 (child) - use the dropdown to select the post type that will be related to the one selected in Post type 1 block (e.g., Locations post type).
• Relation type - here select the relations type you want to apply between the post types (e.g., many events will be held in many locations, some events will be held in the same city, and some cities will have several events, so we select “Many-to-many” relation type).
• Add meta box to parent page - enable this option to allow selecting the related posts of the child post type when one views the parent post’s editing page.
• Add meta box to Child page - enable this option to allow selecting the related posts of the parent post type when one views the child post’s editing page.

Please, note, that once you select the post that’s related to the other post of a different type, the post you’ve selected is automatically linked back.
3. After that save the relation.

Step 3. Setting the relations between the posts of different types

1. Once you’ve created the relations, you can proceed to setting the relations between the specific posts.
2. Open one of the posts that has the meta box active for editing and set the related posts. Then save the changes.

Step 4. Displaying the related posts of different type with Listing Grid

You can display the related posts of different type either using Dynamic Field or Listing Grid widgets.

Dynamic Field

1. Drop the Dynamic Field widget to the page template where you want to display the related child/parent posts.
2. Select the Meta Data option in the Source dropdown.
3. Select the name of the meta field (e.g., “Child Locations”, “Parent Events”, etc).
4. Enable Filter field output option. Select the Related posts list in the Callback dropdown.

Also, there are additional options that become available when the callback is selected:

5. Single value - enable this option to allow displaying only one related post (even if there are several of them linked).
6. Add links to related posts - enable this option to make the related posts shown in the list linked.
7. Related list HTML tag - here you can select the HTML tag to use for the related posts displayed (e.g., UL tag displays the posts in the form of the list with bullets, the OL tag arranges then in the numeric list, and the DIV tag allows displaying the posts in one row.
8. Delimiter - here you can set the separator to show between the related posts if there are several of them.

Listing Grid

1. First, to use the Listing Grid for displaying the related posts, you need to create the single listing for the related posts. You can read in more details about creating a new listing here.
2. After the listing is created, open the single post page template and drop the Listing Grid widget to it.
3. Select a listing to show in Listing dropdown.
4. Now you can filter the Listing Grid widget’s content to display only the related posts using the specific macros codes.
5. Open Posts Query block and here add a new item with Posts Parameters type.
6. Paste the %related_children_from|post-type-slug% or %related_parents_from|post-type-slug% macros inside the Include posts by IDs field.

Please, note, that you can display either parent or child related posts, and the “|post-type-slug” stands for the actual post type slug (e.g., “locations”).