12% off of LTD using this coupon: TWELVEPERCENTOFF. Promo ends on 2 Dec midnight UTC.
Published on Nov 18, 2020

Bidirectional ACF Relationship Fields in Oxygen

Sridhar Katakam

This members-only tutorial provides the steps to set up an automatic bidirectional relationship between items of two different post types using the ACF Post-2-Post plugin by John A. Huebner II. We shall then use pre_get_posts to set meta query for filtering the items by the related items of the other post type.

In this example we are going to work with event and venue post types.

The related entries can be shown using either Easy Posts or a Repeater.

Event single page:

Venue single page:

Step 1

If you have not already, use a plugin like CPT UI to register your custom post types.

Step 2

Install and activate ACF.

Create a custom field group to appear on the event edit screens like so:

Create another custom field similarly to appear on the venue edit screens.

Important: You should use the same field name in both the groups for the Relationship-type of custom field. In this example, it is event_venue.

Step 3

Install and activate ACF Post-2-Post plugin.

Step 4

Add/edit the items of event post type and select the corresponding venues.

Selecting Venue 2 and Venue 3 for Event 2 for example, should automatically show (at the least) Event 2 in the Venue 2 and Venue 3 edit screens, thanks to ACF Post-2-Post plugin. Also, if you edit Venue 2 and remove Event 2, Event 2 will no longer show Venue 2. In other words, the related items get automatically updated and are in sync across the post types.

Step 5

Create a Template that applies to singular Events and edit it with Oxygen.

Add a Section having the usual elements like + Add > WordPress > Dynamic Data > Title and + Add > WordPress > Dynamic Data > Content.

Add another Section having a "Venues" heading.

Add a Repeater below the heading.

Set the WP Query to custom and select venue Post Type.

Since you probably want to show all the related venues, set Posts per page to -1.

You may want to set the Order to be ascending by title.

Select a Repeater Div and add elements as you need. In my test site I added post title and the excerpt. To add the excerpt, add a Text component, select all the text > Insert Data button in the top toolbar > PHP Function Return value and insert get_the_excerpt as the Function Name.

Add a Code Block above the Repeater.


This is a premium members-only content.

To view the rest of the content, please sign up for membership ($47/month or $599 one-time).

Already a member? Log in below or here.