bg-pattern

How to Display ACF Relationship & Reverse Relationship in Anywhere Elementor Pro

The ACF Relationship Field is excellent for creating advanced relationships between one post type to another (like from A–> B). You can create relationship fields to link posts with common roles and characters. They are pretty amazing when you want to relate one post type to a page with another post type. The ACF Relationship field provides a dual-column component to select one or more items. It allows you to filter your results using a search bar and via post types and taxonomies.

Additionally, using the ACF Relationship Field, we can create a bi-directional relationship (B<– A) between posts; however, there doesn’t seem to be any direct support by ACF for this. The only way you can accomplish this would be by writing some code, and that’s not something everyone wants to do.

That’s where our AnyWhere Elementor Pro plugin comes in. It makes working with ACF Relationship and Reverse Relationship fields super easy—no coding required! This plugin allows you to get post data from the direct ACF Relationship field and reverse relationships without writing any code. All you need is our plugin and Elementor Page Builder installed on your WordPress site with access to the ACF fields, of course!

As the ACF Relationship & Reverse Relationship implementation can be a little tricky, I have opted for a use case for your better understanding.

Directly jump to Reverse Relationship implementation.

Use Case

Suppose we are creating a movie listing website with two post types: Movies and Cast. Some custom fields are assigned to the Movie post type, like release date, duration, and an ACF Relationship Field type “related cast.” The Movie detail page will display information related to the movie, also the Cast detail that has worked on it based on the Relationship field type we have created.

The post under the Cast post type will give information about the actors, including name, image, and a list of movies they have acted in. The relationship between actors and movies is achieved using a reverse relationship, as there is no direct relationship between the cast and the movies. Later in this tutorial, you will see how we can get post data by applying reverse relationships.

Key Takeaways

  • Learn how to link one post type to another using ACF Relationship Fields and display the related content.
  • Use the power of reverse relationships to show related content even when no direct connection exists.
  • Save time and skip coding by using the AnyWhere Elementor Pro plugin to display both Relationship and Reverse Relationship field data visually.
  • Display relationship data beautifully with layout options like Grid, Carousel, and Accordion using the Post Blocks Adv widget.
  • Build smarter WordPress websites by combining ACF fields with AE Pro to deliver dynamic content that’s easy to manage and visually engaging.

How to Use ACF Relationship Fields in WordPress (Step-by-Step)

Here are the steps for using the relationship field in ACF.

Step 1: Creating a Custom Post Type

I created two post types, Movies & Cast, using the Advanced Custom Fields plugin. Next, add some posts to both the post types.

Check out our detailed article on how to create custom post types using ACF.

Create Custom Post Types in ACF
Create Custom Post Types in ACF

Step 2: Adding Custom Fields & Relationship Field

Create a Field Group and add custom fields like Release Date, Ratings, etc. Check out our detailed article on how to add a field group in ACF.

    Create Field Group in ACF and add Relationship Field
    Create Field Group in ACF and add Relationship Field
    • Considering the above example, I have created a relationship field type “Related Cast” to create a direct relationship between Movies and their casts.
    • Under the Filter by Post Type label, don’t forget to mention the post type with which you are creating a relation – “Cast.”
    • Next, assign the field group to the Post Type Movies.
    Adjust Location Rules Settings ACF
    Adjust Location Rules Settings ACF

    Step 3: Populate Your Custom Fields

    After assigning custom Fields to the Movie post type, we need to populate these fields for individual posts.

    Add Data For Movie
    Add Data For Movie

    At this point, we are finished with the basic ACF settings. In the following tutorial, we will be displaying data from custom post types on the front-end via a Single post template for both Movies and Casts. Additionally, a block layout is required that will help render posts in templates.

    Before heading towards creating post templates, let’s first create the block layout in the AE Template.

    Step 4: Design the Block Layout with AE Templates      

    Start with creating the block layout as needed on both the Movie & Cast single post templates.

    You can design separate layouts for both templates; it’s completely up to you. Learn more about creating a Block Layout in AnyWhere Elementor Pro.

    Block Layout
    Block Layout

    Step 5: Create a Dynamic Single Post Template for Movies 

    Here, we will create a single post template for the Movies post type, including the details like release date, rating, director, and the cast that contributed to the movie.

    Create a new AE Template (AE Templates -> Add New) with the following configurations.

    • Render Mode: Post Template
    • Post Type: Movies
    • Preview Post: Select a post from the Movies post type. Data from this post will be used to display the preview in the Elementor editor.
    • Auto Apply: Check this to apply the template to all destination post types.
    • Once done with the configuration Settings, edit the template in Elementor.
    Create Single Post Template in AEPro
    Create Single Post Template in AEPro

    Displaying Data From the ACF Custom Fields 

    To design the “Movie Detail” page, we must obtain data from custom fields. To do this, I have used the AE-ACF Fields widget to show all of the data present in custom fields. The screenshot below shows the custom field data.

    AE: ACF Fields
    AE: ACF Fields

    Getting data from the ACF Relationship Field

    After displaying data from the other custom fields on the frontend, the next step is to display data from the ACF Relationship field (“Related Cast “) using the AE – Post Blocks Adv widget.

    Using Post Blocks Adv, we will display the Cast details associated with that particular Movie.

    Configuring the Post Blocks Advanced
    • Under the Skin – Select the layout style for the data, like Carousel, grid, or accordion. Here, I have selected a Carousel layout.
    • Next, under the Block Layout option, select the Block Layout that we have created above.
    Post-Blocks Adv Settings
    Post-Blocks Adv Settings
    • Under the Query section, select the Source as Relationship.
    • Then we need to specify the name of the Relationship field type “related_cast.”
    AE - Post Blocks
    AE – Post Blocks

    Here is the final look of the single post template designed for the post-type Movie.

    Final Look of Display Relationship Field
    Final Look of Display Relationship Field Data

    How to Display ACF Reverse Relationship Data (No Code)

    Here, we will discuss how you can display the ACF reverse relationship data easily.

    Build a Template for Cast with Reverse Relationship

    Now, we will design the template for the post type Cast, which will include details of individual actors like names, images, and descriptions. Here, we will also be displaying all the movies in which the particular actor has worked. Since there is no direct relation between Cast and Movies, so, to display these details, we will be using the Reverse Relation feature of the Post Block Adv widget.

    Create a new AE Template (AE Templates -> Add New) with the following configurations.

    • Render Mode: Post Template
    • Post Type: Cast
    •  Preview Post: Select a post from the Cast post type. Data from this post will be used while displaying the preview in the Elementor editor.
    • Auto Apply: Check this to apply the template to all destination post types.
    • Save the template and start editing it in Elementor.
    Create Single Post Template For Reverse Relation
    Create Single Post Template For Reverse Relation

    In the Elementor editor, add the widgets like “AE – Post Title,” “AE – Content,” etc., to show the title, content, and other post data.

    Block Layout
    Block Layout

    Now, we need to display all the movies that the particular Cast (Actor) has worked on. For this, we need to get data through a reverse query. Now, to display the data from Reverse Relation, we use the AE – Post Blocks Adv widget.

    Display Reverse Relationship using Post Blocks Adv

    In widget settings, do the following configuration:

    • Under the Skin – Select the layout style for the data like Carousel, Grid, or Accordion.
    • Next, under the Block Layout option, select the Block Layout that we have created.
    AE: Post-Blocks Advanced
    AE: Post-Blocks Advanced
    • Under the Query section, select the Source as Relationship.
    • Then, we need to specify the name of the Relationship field type, just as we did for the Movie template.
    • Since there is no direct relationship between the Cast and their Related Movies, we need to apply the Reverse Relation feature.
    AE: Post Blocks Reverse Relationship
    AE: Post Blocks Reverse Relationship

    Then, all the Movies associated with the particular Actor are displayed. Here is the final look at the template that we have created.

    Reverse Relationship
    Reverse Relationship

    Final Thoughts: Make Dynamic Relationships Easy with ACF and AEPro

    Using ACF Relationship and Reverse Relationship fields can help you connect different types of content on your WordPress site in smart and meaningful ways. While ACF allows you to create these links, showing reverse relationships usually needs coding knowledge.

    But with Anywhere Elementor Pro, you can easily display both direct and reverse relationships without writing any code. This makes it super simple to create dynamic content layouts using Elementor.

    FAQs on Using ACF Relationship Fields in WordPress

    What is an ACF Relationship Field in WordPress?

    The ACF Relationship Field allows you to link one post type to another, enabling you to create connections such as related movies and cast members across different content types.

    What is a reverse relationship in ACF?

    A reverse relationship is when you show posts that are linked to the current post through a Relationship Field from the other post type—even though the link was not created in the current post.

    Do I need ACF Pro to use Relationship Fields?

    Yes, the ACF Relationship Field is available in the Pro version of the Advanced Custom Fields plugin.

    What is Anywhere Elementor Pro used for?

    Anywhere Elementor Pro is a powerful extension that allows you to create templates and dynamically display custom field data (including relationships) using Elementor—without coding.

    Leave a Reply

    Your email address will not be published. Required fields are marked *