How to display ACF Relationship posts in a grid

ACF Relationship component for Elementor free version is a very useful widget with which you can build posts grid with the ACF relationship field which is valued on the current post.
The ACF Relationship/Post objects are fields that allow you to create ‘Parent/Child’ type relationships, establish related content link or share data of the same nature.

The component also works fine with the ACF ‘Post object’ field.

Accessibility for ACF relationship grid widget

How to activate ACF Relationship grid

The Relationship field provides a dual-column component to select one or more posts, pages or custom post type items.
You have created the group and the ‘Relationship’ type field in ACF.

You have selected the posts / pages / CPTs and saved the post.

Open it in the Elementor editor.

The Elementor plugin is installed and active.

The ACF plugin is installed and active. 

The EAC components plugin is installed and active.

From the settings panel you have to drag & drop the ACF Relationship icon on the panel preview.

Select the source and filter the post types

As you can see, you can select any of the Relationship or Post objects field as the source. These fields support Post object or Post id formats.

The field Posts count lets you to select how many posts you want to display in the grid. Very useful if you want to display, for example, the first three posts as related posts.

ACF relationshop grid
ACF relationship select source

With the section Layout you can select the rendering mode between a grid or a slider the number of columns per row that will be showed for each device.
For the Slider mode you will find in this post the description of the elements and their behavior.

ACF relationship select layout and columns count

Select the content you want to display

In the Content section you will select what parts you want to show for each post and add button Read more, post link on the title or picture.

ACF relationship grid content
ACF relationship select content

By default il the grid layout mode the Image ratio feature is enabled and you can position the image vertically.

Image gallery image
ACF relationship image ratio

Styling the Relationship grid

General section: Select the desired style who will be applied to the posts and the bottom margin.
Post, Image and Title sections: Change font size and font color.
For the Image you can add a border radius and stylize the border.

ACF relationship style

ACF Relationship posts in a slider

Exit grid

33 thoughts on “How to display ACF Relationship posts in a grid”

  1. Cześć! Hi! I have a problem. Unfortunately, in the “Relational Field” list, I cannot see the relationship fields I have created in AFC. What may be the problem? Thank you in advance!

    Reply
    • Hi Marcin,
      I assume you are up to date with ACF and EAC versions and saved the post well before editing it with Elementor.
      First, in your post, add a ‘Text editor’ widget, open the list of dynamic tags and select the entry ‘ACF relational’ and tell me if you find the field in the list
      Second, proceed in the same way and select, this time, the entry ‘ACF Text’ and tell me if you find the field in the list
      Finally you can look at the traces in ‘Elementor/System info’, section ‘Log’ if you find data related to EAC.
      Rgds

      Reply
      • Hi,

        just spent a couple of hours trying to get the components to work, but had no luck….

        1. Relationship Widget won’t show the ACF-field in an Elementor-Template. If I try it with a sample Page the relationship ACF field is displayed. We’re using Templates and a Kit where Template-Pages that consist of templates are displayed.

        2. The Post Widget can with workarounds do what i need. But unfortunately after everything works, pagination won’t….when i click more it just repeats the first two results…. when i switch to 4 results all Posts are displayed…

        just fyi

        Markus

        Reply
        • Hi Markus and have good year
          Sorry for the issues you are having with our plugin but its target is the free version of Elementor.
          We do not test with the PRO version of Elementor nor with theme builders.
          When the plugin detects the PRO version, the features are disabled hence the malfunctions you experience.
          If you have a staging server you can send me the links to the frontend pages so that I can direct you if necessary.
          Use the button ‘Contact us’ form for this.
          Rgds

          Reply
  2. Hi,
    Incredible plugin! You need to publish it on the wordpress repository !
    The images on the ACF RELATIONSHIP GRID are not displayed. The Feature Image option is checked and is configured on the displayed items. And then I check “date” or “except”, they show up.

    Reply
    • Hi Valentin,
      Sorry for the inconvenience but i just tested the ‘ACF Relationship grid’ component with version 1.9.6 and the behavior of the image is consistent and displays correctly with or without the ‘Date and/or excerpt’ options checked.
      Rgds

      Reply
      • Ok my bad.
        After a some research, I didn’t authorized featured images request from my ACF plugin.

        Thanks a lot !

        Reply
        • Hi Valentin. I’m having the same problem. What do you mean by “authorized featured images request from my ACF plugin”?
          Thanks.

          Reply
  3. Hi There,

    Thanks for providing this nice plugin. I have two questions:

    1. loading the relational posts into another post works fine, but somehow mij ACF (custom) shortcodes all just return ” (an empty string) even if i include a fallback value. It seems it does know (from within the template header files) that the shortcode is active, but seems unable to actually run the shortcode function. Could you help out here? Or is this a limitation of this plugins post query?

    2. How can we add custom styling/formatting templates apart from the 20 (pretty flamboyant) versions included? It would be lovely to created custom standards per theme/site and not having to add custom css each post template.

    Reply
    • Hi Tije
      Thank you for your feedback
      1) I understand that you want to execute a shortcode in a template of which at least one of the parameters is an ACF (Relationship) dynamic field.
      You know that the scope of each ACF field is limited to the post in which it is filled in.
      Perhaps you should use the ‘ACF Options Page‘ which have field values ​​global to the site.
      2) At the moment our development roadmap does not include extending ‘custom CSS’ to a theme or site.
      Rgds

      Reply
      • Hi Chichille,

        Thanks for the quick reply! For point 2 you could look into supporting another elementor plugin that already fixes this.

        For point 1, which is more important to me… i’m aware of this and wrote a custom function to get an acf from the parent page (embedding the related posts). This works on all other instances. And the shortcode gets called since the [field text] is replaced with nothing. But it always replaced with “” (empty string) even when i skip the function and try to replace a dummy text. So it looks like the eac blocks this somehow. Any pointers where i should look?

        Reply
        • Hi Tije,
          It’s tricky to orient you without code and without precise context, except that the dynamic tags (ACF included), as you know, look for their values ​​for the ID of the current post and not in the parent.
          Really sorry for not being able to help you more but you could replace the dynamic tag in your shortcode with a function of this type:
          “function get_inherited_field( $field ) {
          $value = get_field($field);
          if (!$value)
          $value = get_field( $field, wp_get_post_parent_id( get_the_ID() ) );
          return $value;
          }”
          Rgds

          Reply
  4. First off, thank you so much for this plugin! This has saved me so much headache!
    One request, if it hasn’t already been added and I just don’t know how to add it, a way to add a button underneath the excerpt would be wonderful.

    Reply
    • Hi Merissa,
      This is not currently planned in our roadmap, but we take your request into account.
      Nevertheless you already have the link to the post on the title and the image.
      Rgds

      Reply
    • Hi Johan,
      Thanks for your feedback.
      The title issue will be fixed in the next version (v2.1.2).
      As for the issue of the featured image, check that the option ‘Featured image’ under Dashboard/ACF/your relationship field group/Presentation tab, is enabled.
      Rgds

      Reply
      • Au lieu de recréer un commentaire, je vous écris ici 🙂
        La version 2.1.3, casse les relation ACF, lors de la mise à jour, il n’est plus possible d’afficher les champs relationnels.
        La version 2.1.2 fonctionne bien pourtant 🙂
        Merci pour votre travail 😀

        Reply
        • Bonjour Johan,
          Nous avons réalisé de multiples et importantes modifications pour cette nouvelle version et notamment corrigé un bug sur le composant ‘ACF Relationship grid’ avec lequel vous ne pouviez avoir une grille dans le corps de l’article et une autre dans l’entête ou le pied de page.
          Malheureusement nous n’avons pas évalué avec justesse la non régression du correctif.
          Je pense qu’il vous faut de nouveau réactiver le composant dans chaque article.
          Désolé pour cet inconvénient.
          Cordialement

          Reply
  5. Hi, I’ve been trying to use this but in the “Relational Field” there’s always nothing to select no matter what I did. Do you have any suggestions on what to do?

    Reply
    • Hello Kei,
      With so little information I can’t help you.
      I assume that you have created an ACF group with at least one ‘Relationship’ or ‘Post object’ field.
      Then you’ve assigned the Location rules ‘Show this field group if’ to ‘Post type’ with your post type and then populated each post of your post type with the articles you want published.
      And if so, you should see the ACF group in the ‘Relational field’.
      Sorry I can’t be of more help
      Rgds

      Reply
      • Also, he said above it doesn’t work with Elementor Pro – only Free… probably it as that’s what issue I’m having too.

        Reply
  6. Hello and thank you for this excellent plugin. I have 2 CPT Concerts and Places with an ACF relationship. I’m trying to use your “ACF Relationship” Element on my CPT Concert’s Elementor template (to display the places) but the relationship field is empty. When I edit a concert page with Elementor, the ACF relationship module finds the relationship. But I would like to use it on my model to avoid having to do it manually on all my pages? Is it possible ?

    Reply
    • Hello Chris,
      Sorry for the issue you are facing.
      We only test with the free versions of Elementor and ACF.
      In addition, certain features and widgets are deactivated when the PRO version of Elementor is detected to avoid possible conflicts, and it seems that your model must be built with Elementor PRO!
      Nevertheless, you can check that the ACF group is correctly associated with your model in Location rules.
      Rgds

      Reply
  7. First off, thank you so much for this amazing plugin.
    And I also have a question, in the acf relationships widget my relationship fields do not appear.
    I am using ACF Pro and Elementor Pro, I have configured a relationship type field in one of my field groups and the relationship is also reflected in the products (this is where I want it to appear and it works), but when I use the ACF relationships widget In order to show this in the frontend, no field appears.

    Reply
    • Hello Mildred
      Same answer as for Chris’ previous question.
      Some features are disabled for the PRO versions of Elementor and ACF.
      But if I understand correctly, the relationship field appears when you’re in the Elementor editor, but its value is not displayed in the frontend!
      If this is the case can you temporarily copy this piece of code all the way down into your theme’s ‘functions.php’ file and return the results to me.
      Rgds
      ——————–
      add_filter( ‘acf/pre_load_post_id’, ‘fix_post_id_on_preview’, 10, 2 );
      function fix_post_id_on_preview( $null, $post_id ) {
      if ( is_preview() ) {
      return ( null === $post_id ? get_the_ID() : get_the_ID() === $post_id ) ? get_the_ID() : $post_id;
      } else {
      $acf_post_id = isset( $post_id->ID ) ? $post_id->ID : $post_id;
      if ( ! empty( $acf_post_id ) ) {
      return $acf_post_id;
      } else {
      return $null;
      }
      }
      }

      Reply
      • Thanks for your answer.
        I’m sorry I didn’t make myself understood well.
        The relationship does not appear anywhere (including the Elementor editor)

        Reply
        • Hello Mildred,
          Sorry, I didn’t quite understand.
          To avoid any conflict, certain functionalities are deactivated when Elementor PRO and/or ACF PRO are active.
          Currently, there is no possibility to have the list of ACF relations in the grid.
          Again, sorry
          Rgds

          Reply
          • This is so confusing. Why these functions are disabled in pro and available in free version only.
            We’re using Elementor pro + ACF pro and Relationship field dropdown appears empty. https://i.imgur.com/RvvZ59o.png
            Although data is set correctly in backend and posts. There must be a solution to this?

          • Hello,
            Sorry, but we only develop and maintain this plugin for the free version of Elementor and ACF and we never test it with the PRO versions.
            But maybe with another plugin!
            Rgds

    • Hello Felipe,
      Edit the ACF group, edit the Relationship field and within ‘General’ tab
      Field ‘Filter by Post Type’ add Product
      After that select the product you want and display them as slider
      Rgds

      Reply

Leave a Reply to Tije Cancel reply