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, a page with another post type, and page. 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.

However, you can easily implement this kind of relationship by using our plugin called AnyWhere Elementor Pro. 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.

UseCase

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 list of movies they have acted in. The relationship between Actors and Movies is achieved using a reverse relationship as there is no direct relation b/w Cast and Movies. Later in this tutorial, you will see how we can get posts data by applying Reverse relationships.

Creating Custom Post Type. 

I created two post types, Movies & Cast, using any plugin; I recommend using the Custom Post Type UI plugin.  Next, add some posts to both the post types.

Adding Custom Fields & Relationship Field Type 

• Create a Field Group and add custom fields like Release Date, Ratings, etc

• Considering the above example, I have created a relationship field type “Related Cast” to create a direct relationship between Movies and their Cast. 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.

Populate the 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.

Creating a Block Layout      

Start with creating the block layout as needed on both 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.

Designing 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 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 while displaying the preview in the Elementor editor.
• Auto Apply: Check this to apply the template to all destination post types.

• Once done with configuration Settings, edit the template in Elementor.

 Displaying Data From the Custom Fields 

To design the “Movie Detail” page, we must obtain data from custom fields. To do this, I have used the AE- ACF Field 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 Advanced widget.

Using Post Blocks Advanced, 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.

Designing Template for the Cast  

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

Applying 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 here 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?