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 610 Bricks code tutorials with BricksLabs Pro

Related Tutorials..

Pro
Google Maps JavaScript API in Bricks

Google Maps JavaScript API in Bricks

This Pro tutorial provides the steps to show post-specific maps with custom marker content in Bricks using Google's Maps JavaScript API and Advanced Custom Fields.…
Categories:
Pro
ACF User Field Bricks PHP Query

ACF User Field Bricks PHP Query

In the Bricks Facebook group a user asks: my end goal was to create a set of cards that would display the Users that are…
Categories:
Pro
ACF Font Awesome Field in Bricks

ACF Font Awesome Field in Bricks

We walk through using the Advanced Custom Fields: Font Awesome Field plugin for showing Font Awesome icons.
Categories:
Tags:
Removing Action/Filter Inside a Plugin’s Namespaced Class Constructor

Removing Action/Filter Inside a Plugin’s Namespaced Class Constructor

Recently worked with a friend figuring out how to remove/undo/cancel an add_action() line that's inside a plugin's constructor inside a PHP Class with the file…
Categories:
Tags:
Pro
Bricks Forms + Meta Box: Auto-Create Post Relationships on Form Submission

Bricks Forms + Meta Box: Auto-Create Post Relationships on Form Submission

How to link a Bricks post-creation form on a post to a newly created post of another post type using Meta Box relationship.
Pro
Frontend Editing with ACF in Bricks

Frontend Editing with ACF in Bricks

This Pro tutorial provides the steps to show a form on single posts on the front end for admins and the post author using which…
Categories:
Pro
Limit the Number of Posts in a Bricks Query Loop of Relationship Type

Limit the Number of Posts in a Bricks Query Loop of Relationship Type

Updated on 12 Dec 2023 Bricks Query Loop popup does not have a control for setting the number of posts to be output when the…