Elementor posts widget fill with ACF relationship field

With the posts widget in Elementor, you can easily display other posts, pages, products or custom post types (CPT) on a page in a loop. The only tricky part is when you want to display the content of a meta field, e.g. an ACF relationship field.

Problem:

The option offers ACF relationship in post widget Elementor does not offer.

Solution:

1. ACF relationship field (e.g. field name "my_acf_relationship_field") on the desired page or content type and fill it with data.
2. In Elementor, drag the "Posts" widget to the desired location
3. Settings Elementor: Source: -> Content type
4. Query ID: Enter an individual ID, e.g. "acf_relation“
5. In the preview, all content types now appear first, let's change that now.
6. Save and exit Elementor Editor
7. Edit functions.php (Note: Only work on the Child Theme!). The following code changes the WP_Query object of Elementor:

add_action( 'elementor/query/acf_relation', function ( WP_Query $query ) {
   $ids = get_field('my_acf_relationship_field', get_the_ID());
   $query->set( 'post__in', $ids );
   $query->set( 'orderby', 'post__in' );
} );

Now the correspondingly selected relationships should be displayed in the same order as they appear in the ACF relationship field.