Croco Black Friday 2024 banner element
Copy discount code:
bfcroco2024
Days
Hours
Minutes
Croco Black Friday 2024 banner element
Help Center
How to Build Grandparent/Grandchild Relations

How to Build Grandparent/Grandchild Relations

Learn to build WordPress grandparent/grandchild hierarchical relations with the JetEngine plugin. Display related grandchild items on the Grandparent Single page using the Listing Grid.

Before you start, check the tutorial requirements:

  • Elementor (Free version), Block editor (Gutenberg), or Bricks

  • JetEngine plugin installed and activated

The JetEngine relations can connect post types, taxonomies, users, and Custom Content Types (CCT). You can not only connect two post types, for example; you can relate post type and taxonomy, CCT and users, etc.

The grandparent/grandchild relations type allows the connection between two already existing relations to be set.

grandparent and grandchild relation scheme

Also, you can display related grandchildren for a grandparent using macros.

How to Create the Grandparent/Grandchildren Relation

As an example, for the Medcenter website, we created three Custom Post Types: “Doctors,” “Services” and “Departments.” “Doctors” will be a child post type,  “Services” — parent, and “Departments” — grandparent.

To create relations, follow the WordPress Dashboard > JetEngine > Relations directory and press the “Add New” button.

We recommend creating the first relation between the grandparent and parent (“Departments” to “Services,” in our case).

We enter the relation’s Name (“departments to services”) and set the Parent object (“Departments” CPT), Child object (“Services” CPT), and Relation type (“One to many”).

Since it’s the grandparent-parent relation, we don’t set the Parent relation.

To get detailed instructions on how to create the relation, proceed to the How to Create Relations Between Posts tutorial. Feel free to adjust other relation settings to fit your needs.

After customizing, press the “Add/Update Relation” button.

grandparent to parent relation

Afterward, return to the WordPress Dashboard > JetEngine > Relations tab and hit the “Add new” button to create a parent-to-child relation.

We enter the relation’s Name (“services to doctors”) and set the Parent object (“Services” CPT), Child object (“Doctors” CPT), and Relation type (“Many to many”).

As the Parent relation, we adjust the recently created grandparent-parent relation (“departments to services”).

Finish customizing the relation and press the “Add/Update Relation” button.

parent to child relation

Now, you should assign children posts to parents (doctors to services) and parent posts to grandparents (services to departments). To learn how to achieve this, proceed to the Related Items Editing Overview.

How to Display the Grandparents/Grandchildren Relation Items with Macros in Query

Creating the Custom Query

In our case, we want to display grandchildren (doctors) on the Grandparent Single page (department). For that, we need to create a custom query for the Listing Grid.

We go to WordPress Dashboard > JetEngine > Query Builder and hit the “Add New” button.

We enter the query Name (“Doctors on the department page”) and select the “Posts QueryQuery Type since the grandchildren are the CPT (“Doctors”).

If you, for instance, connected posts (grandparent), taxonomy (parent), and users (children) and want to display grandchildren users on the Single Post grandparent page, you need to create the “Users Query.”

If you want to show grandparents on the Single grandchildren page, you should select the grandparent type for the query accordingly.

posts custom query for relations

Then, we proceed to the Posts Query section, General settings tab, and specified the Post Type (“Doctors”).

Next, we open the Post & Page tab and hit the “coin stack” icon near the Post In field. Since we want to retrieve grandchildren, we pick the “Related Grandchildren” macro. If you’re going to display the grandparents, you need to select the “Related Grandparents” macro accordingly.

Learn more from the Macros for WordPress Relations.

related grandchildren and grandparents macros

In the macro settings, we choose the needed Grandchild Relation (“services to doctors”). As we want to display the grandchildren on the “Department” Single page, we set the “Current Object ID” in the Grandparent ID is field. Then, we hit the “Apply” button.

related grandchildren macro settings

After customizing the custom query, we press the “Add/Update Query” button.

With the JetEngine Macros Generator feature, you can also generate needed macros for the related items and use them where supported.

Displaying grandchildren on the Grandparent Single page

To learn how to create a Single Post page for the grandparent post type (“Departments” in our case), proceed to the How to Create Archive and Single Templates for Custom Post Type tutorial. 

With the JetThemeCore plugin, you can create templates in the Elementor and WordPress block editor (Gutenberg).

To learn how to create a Single Post template with the Bricks builder, move to the Bricks Builder Single Post & Archive Basics Explained tutorial.

In our case, we opened the Single Post template in the Elementor editor.

post single page template for medical departments

Drag-n-drop the Listing Grid widget, block, or element (depending on the builder you use) and select the Listing created for the grandchildren (for “Doctors” in our case).

Customize the Listing Grid according to your needs. For instance, we enabled the Equal columns height toggle.

Learn more about the Listing template in Elementor, Gutenberg, Bricks, and Timber/Twig.

listing grid with doctors

Then, unroll the Custom Query tab, activate the Use Custom Query toggle, and select the recently created Custom Query with the “Related Grandchildren” macro.

The query settings will be applied right on the edited page.

related grandchildren posts

Finish customizing the page and save the changes.

In the same way, you can display the related grandparent items on the Grandchildren Single page.

Legacy Grandparent/Grandchild Relation

Warning

If you have any Legacy relations created before the JetEngine 2.11.0 update, we recommend updating them to the refactoring version. Hit the "Edit" button near the needed relation, and then hit the "Convert into the new format" button. After that, all posts will be automatically transferred, but you should manually change the macros used for relations as described above in this tutorial.

convert relation into the new format

Legacy relations can be created only between post types. To learn how to set up the Legacy grandparent/grandchild relations, watch this video tutorial.

To display posts with this type of hierarchical path, you should use the JetEngine Listing Grid widget or block. This widget helps you display a particular Listing and set the relation using macros.

Warning

The following macros work only with legacy relations, which were created before the JetEngine 2.11.0 update.

If you decide not to update the relations and leave them legacy, you can use the following macros to display the grandchildren or grandparent posts in the Listing Grid widget or block:

%get_grandparent|post-type-slug%
%get_grandchild|post-type-slug%

For example, to display the grandparent posts, navigate to the grandchild Single Post (“Tour” in our case) in the Elementor or Block editor.

Place the Listing Grid widget or block here.

Go to the Post Query tab, click on the “Add Item” button, select the “Posts & Authors Parameters” Type, and enter the macro:

%get_grandparent|post-type-slug%

where you should change the part “post-type-slug” to the CPT slug (e.g., “tour”) to showcase the data (continent) related to a certain “Tour.”

Also, it is possible to make it vice versa, display the Tour Listing with the Listing Grid in the Single Continent, and then we need to use such a macro:

%get_grandchild|post-type-slug%

In the “post-type-slug” part, you need to enter the slug of the grandparent post. In our case, it would be “continent.”

As we mentioned above, you can set a macro in the Elementor editor.

grandparent macro in the listing grid widget in the elementor editor

The same settings are available in Gutenberg.

grandparent macro in the listing grid widget in gutenberg

That’s all. Now you know how to create and display the legacy and refactoring Grandparent/Grandchild relations with the JetEngine plugin on your WordPress website.

Was this article helpful?
YesNo

Need help?

Ask Facebook community

Get answers from 22K Crocoblock Community experts from all over the world.

Start a live chat

Ask question to support agent and share its details via chat messages.