Elementor posts widget fill with ACF relationship field

27.09.2022

Picture of a beautifully tidy garden

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 Relation 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 "Contributions" 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.

See also

No contributions found