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 626 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
Bricks Slider Images From ACF Flexible Content Sub Field

Bricks Slider Images From ACF Flexible Content Sub Field

Consider the following field group associated with Pages when using ACF Pro: "Page Fields" field group|_"Page Content" Flexible Content field|__"Layout 1" layout|___"Title" Text field|___"Layout 1…
Pro
CPT Submenu Items in ACF Pro Options Admin Menu

CPT Submenu Items in ACF Pro Options Admin Menu

This Pro tutorial provides the steps to add links to admin pages under an Options page created with ACF Pro. All code mentioned in this…