Master ACF Bi-Directional Relationships In Bricks

In this tutorial, we’ll explore:  

• What bidirectional relationships are  
• How to set them up using ACF  
• How to display them using Bricks Builder

What Are Bidirectional Relationships?  

Imagine you’re building a real estate website where you have two custom post types:  

• Properties (listings of homes for sale)  
• Agents (real estate agents who manage the properties)  

With a bidirectional relationship, you can:  

• Assign an agent to a property  
• Automatically display all properties associated with an agent on their profile  

This ensures that the data remains synchronized—if you update the relationship on one side, it automatically updates on the other.  

For example, if you assign Agent Dave Davidson to a property called Forest Villa, Dave’s profile will automatically list Forest Villa as one of his properties.  

How to Set Up Bidirectional Relationships in ACF  

Step 1: Create the Relationship Field for Properties  

1. Go to WordPress Dashboard → ACF → Field Groups  

2. Open the Property Details field group  

3. Click Add Field and configure it as follows:  

   – Field Type: Relationship  
   – Field Name: property_to_agent  
   – Filter by Post Type: Agent  
   – Return Format: Post Object  
   – Enable Bidirectional Relationship  

4. Save the field group.  

Step 2: Create the Relationship Field for Agents  

1. Open the Agent Details field group  

2. Click Add Field and configure it as follows:  

   – Field Type: Relationship  
– Field Name: agent_to_property  
   – Filter by Post Type: Property  
   – Return Format: Post Object  
   – Enable Bidirectional Relationship  
   – Target Field: property_to_agent (the field we created earlier)  

3. Save the field group.  

Step 3: Link Properties and Agents  

Now that the bidirectional relationship is set up, you can:  

• Open a Property in the WordPress dashboard and assign an Agent  
• Open an Agent profile and see the linked Properties  

This ensures that the relationship works both ways!  

Displaying Bidirectional Relationships in Bricks Builder  

Now that we’ve set up the relationships let’s display them using Bricks Builder.  

Step 1: Open the Property Template in Bricks  

1. Go to Bricks → Templates  
2. Open the Single Property template  
3. Select the section where you want to display the Agent’s details  

Step 2: Set Up a Query Loop  

1. Select the Agent Block  
2. Enable Query Loop  
3. Set the Query Type to ACF Relationship  
4. Choose property_to_agent as the relationship field  

Now, the Agent’s details will dynamically appear on the property page.  

Step 3: Test the Relationship  

1. Assign a different agent to a property in the WordPress dashboard  
2. Refresh the front-end page  
3. The new Agent’s details should now appear  

This confirms that the bidirectional relationship is working correctly!  

Expanding the Relationship Further  

You can extend this setup by:  

• Connecting Agents to Real Estate Companies  
• Displaying Company Details on the Agent’s profile  
• Using ACF and Bricks Builder to create even more dynamic relationships  

Final Thoughts  

Bidirectional relationships in Advanced Custom Fields are a powerful way to connect different post types in WordPress. When combined with Bricks Builder, these relationships can be displayed dynamically seamlessly and efficiently.