Hi, there are a few ways to accomplish this using Elementor Pro and its Dynamic Tags. I’m using ACF free, but I suppose it is close to using PODs. Or at least you can take something from the methods I describe.
If the relationship setup is not bidirectional Case 1 will work only on the CPT with attached related posts field to it. In other words, the posts that are related will not “know” they are related to something, hence you will not be able to display the relationship in them.
Case 2 will work everywhere.
For Case 1 you will need Advanced Post Queries Plugin, which extends Elementor Post Query options with some useful dynamic tag options.
Case 1:
- The easiest way is if you have bidirectional relationship set up on both post types (you can also have relationship only on the CPT you wish to display related posts to).
- Then you just put the Carousel/Loop Grid widget, create a Loop Template to display the data you wish using Dynamic Tags (for example: image and title).
- After in the Carousel/Loop Grid widget Query Setting you choose for source your CPT that has the custom relationship field.
- In the Advanced Query Options that are now available (thanks to the Advanced Post Queries Plugin) you choose: – Dynamic Related Posts; In the Related Posts you choose – Post is in Current Post Custom Field.
- In the Related Posts Field input: put the key of your relationship field in your case maybe it is: service-relation.
That’s it. The Loop Grid will now pull the related posts for your CPT.
Case 2:
To use the custom query option in the Loop Grid/Carousel you must create, well custom query. You can do this by using Code Snippets Plugin for simplicity and granular control, or put the query code in your theme functions.php (a bit messy IMO).
I give you an example of the query I’ve built for me:
- In the example you must replace
your_custom_query_name with whatever you’d like your query to be called (you will use this name later in the Custom Query input field of Elementor Post Grid widget)
- You should also replace the
relation_field_key with your custom field name /probably: service-relation/ so the query can get the related posts inputed in that field.
// Create a custom query for Elementor based on the Relationship
add_action( 'elementor/query/your_custom_query_name', function( $query ) {
// Modify the posts query here
$meta_query = $query->get( 'meta_query' );
if ( ! $meta_query ) {
$meta_query = [];
}
$meta_query[] = [
array(
array(
'key' => 'relation_field_key', // name of your custom field
'value' => '"' . get_the_ID() . '"', // matches exactly "123", not just 123. This prevents a match for "1234"
'compare' => 'LIKE'
)
)
];
$query->set( 'meta_query', $meta_query );
} );
- After you created your custom query, you go back in Elementor to build your single post template.
- Put the Carousel/Loop Grid widget, create a Loop Template to display the data you wish.
- in the Carousel/Loop Grid widget Query Setting you choose for source your CPT that has the custom relationship field.
- In the Carousel/Loop Grid widget Query Setting, in the Query ID field you just put
your_custom_query_name
Voila! That’s it, now the template for your single post type will display the posts put in the relationship field.
I would love to see some other implementations. Hopefully I didn’t confused you ??
