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.

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.

• 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.

Step 3: Populate Your Custom Fields

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

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.

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.

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.

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.

• Under the Query section, select the Source as Relationship.
• Then we need to specify the name of the Relationship field type “related_cast.”

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

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.

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

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.

• 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.

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

To know more refer to the ACF Relationship Docs!
1. How To display ACF Reverse Relationship Using Post Blocks Adv?
2. How To Display ACF Relationship Fields data Using Post Blocks Adv?

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