17th Mar '23
/
8 comments

Conditional Rendering of ACF Repeater Rows Based on True / False Sub Field in Bricks

This Pro tutorial provides the steps to modify a ACF Repeater query loop to only output the rows for which a True / False type of sub field's value is true.

ACF field group:

Fields populated for a Page

Front end before implementing this tutorial:

Front end after implementing this tutorial:

Step 1

Create a field group using ACF Pro having a Repeater-type of field with your desired sub fields.

For the sub field of the type True / False, ensure that "Default Value" is ticked. This will set the default value of this field to true (Yes).

You may want to turn "Stylized UI" setting under the Presentation tab on.

Here's the JSON file of the field group export from our test site. Mirror.

Step 2

Edit your template/Page with Bricks.

Add a Section and inside its Container, a Block.

Enable query loop on the Block.

Set the query type to your ACF Repeater.

Add the Heading/Basic Text elements as needed and set their text to show your text-type sub fields.

Ex.:

Step 3

Next we need to modify the query results of the specified query loop to only include the rows where the active sub field is true.

Add the following in child theme's functions.php (w/o the opening PHP tag) or a code snippets plugin:

This is a BricksLabs Pro tutorial.

For full access login below or create your BricksLabs Pro account

Get access to all 633 Bricks code tutorials with BricksLabs Pro

Related Tutorials..

Checking if the current post has been published within the last x days

Checking if the current post has been published within the last x days

Conditionally output an element if the current post has been published in the last x number of days.
Categories:
Weekday Condition in Bricks

Weekday Condition in Bricks

As of Bricks 1.7, the built-in "Weekday" condition does not work correctly. This is most likely due to it not taking the site's timezone (set…
Categories:
How to create parallax effects using Rellax.js in Bricks

How to create parallax effects using Rellax.js in Bricks

This tutorial provides the JS & PHP codes that can be pasted in order to create smooth parallax effects using the Rellax.js library inside Bricks…
Categories:
Pro
ACF Term Meta on Single Posts in Bricks

ACF Term Meta on Single Posts in Bricks

Consider this scenario: CPT: Project Custom taxonomy: Project Type Each project will be assigned only one project type. Project Type taxonomy's custom field: Project Type…
Categories: