ACF Relationship in Bricks using Posts Query Loop

Bricks includes ACF Relationship type of query out of the box for showing posts (on single pages of a post type) related via a ACF Relationship field to another post type.

For more flexibility, though, you might want to use a posts query loop instead. This Pro tutorial shows how.

We shall work with “Game” and “Review” CPTs in this example.

Step 1

Create both your CPTs at ACF → Post Types.

Create field groups for each having a Relationship type of field.

Game CPT field group:

Review CPT field group:

Game CPT field group:

Enabling bidirectional relationship with a field attached to Review CPT

Review CPT field group:

Enabling bidirectional relationship with a field attached to Game CPT

Here we created a Relationship type field called related_reviews for game CPT and set this field to bidirectionally link to related_games field of the review CPT.

Similarly, a Relationship field called related_games has been added for the review CPT which is bidirectional with game CPT’s related_reviews field.

Step 2

Let’s work on showing related reviews when a single game post is being viewed on the front end.

Here’s the exported template from our dev site. You can import this and apply a template condition to apply it to all singular posts of the game CPT. You should also select the Block element on which query loop is enabled, click Sign code and Save.

Alternatively, the manual steps are below.

Create a template titled “Game” of type “Single”.

Edit it with Bricks and apply a template condition to make it apply to all singular posts of the game CPT.

Add a Section showing Post Title and Post Content.

Add another Section for showing the related reviews.

Add a “Related Review” Heading inside this Section’s Container.

We shall programmatically add s at the end of the heading text if there’s more than one related review.

Add Container > Block > Basic Text.

Enable query loop on the Block.

Toggle Query editor (PHP) on and paste this PHP:

$related_reviews = get_field( 'related_reviews' ) ?: [0];

return [
  'post__in' => $related_reviews,
  'posts_per_page' => -1,
];

Set Basic Text’s text to:

{post_title:link}

Step 3

Add the following in child theme‘s functions.php or a code snippets plugin:

	<?php

	// Add «s» at the end of a specific heading element’s text if there is more than 1 related post (using ACF Relationship).
	add_filter( ‘bricks/element/settings’, function( $settings, $element ) {
	if ( $element->id === ‘qjnszv’ && bricks_render_dynamic_data( ‘{query_results_count:fjhifr}’ ) > 1 ) {
	$settings[‘text’] .= ‘s’;
	}

	return $settings;
	}, 10, 3 );

view raw

gistfile1.txt

hosted with ❤ by GitHub

Replace qjnszv with the Bricks ID of the Heading element.

Replace fjhifr with the Bricks ID of the query-loop enabled element.

Note: If the code is being added in the child theme’s functions.php near the end, do not add the opening PHP tag.

Step 4

In the same way, set up a template for single review posts.

References

https://stackoverflow.com/a/56083106/778809