6th Sep '24
/
0 comments

ACF Relationship Select Filter in Bricks

In the BricksLabs Facebook group, a user asks:

I'm learning about ACF relationships and attempting to output a list of posts on any given page, and use the filter - select element in Bricks to refine the output by an ACF relationship field.

Can you recommend BL Tutorials that might help here?

---------------------------------------------------

CPT Downloads: Relationship with one or more Events.

CPT Events: Relationship with one or more Downloads.

Query loop: output all downloads and filter by event.

The built-in Bricks' 'Filter - Select' element does not seem to work with a Relationship-type of field as of Bricks 1.10.3.

We can set up a custom select menu populated with the posts of a CPT and write some custom JavaScript for filtering the posts of another CPT.

This Pro tutorial shows how a custom select menu can be populated with the posts of a CPT that filter the posts of another CPT using JavaScript, where both CPT items are connected via an ACF Relationship field in Bricks.

Consider this example:

CPT 1: EventsRelationship field: Related Downloads

CPT 2: DownloadsRelationship field: Related Events

Events:

Downloads:

Event 1: Download 1, Download 3Event 2: -Event 3: Download 2Event 4: Download 2, Download 3

After implementing the tutorial, a list of downloads that can be filtered by their related events on the downloads CPT archive page (could be a static Page as well):

While this article's custom filter build process is specific to ACF Relationship, the overall process to build a select menu dropdown to filter one set of items with another set of related items is the same.

Step 1

Install and activate ACF.

Create your two custom post types.

Create a field group for each.

Event Fields:

Download Fields:

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

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

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…
Categories:
Custom Function for ACF Link Field

Custom Function for ACF Link Field

How to output the label of an ACF link field through Dynamic Data.
Categories:
Tags:
How to create filters with IsotopeJS in Bricks (Part 3): apply multiple filters

How to create filters with IsotopeJS in Bricks (Part 3): apply multiple filters

This tutorial will review how to apply multiple filters to an isotope container using the IsotopeJS library‘s features in Bricks.