Opens in a new tab
28th Oct '25
/
0 comments

Frontend Search Filtering by Post Title, Content and Related Post’s Title in Bricks

Update: Also added Variation 2 with support for Bricks' Load more functionality.

In the Bricks Facebook group a user asked:

Hello everyone. I have this issue with filtering and bi-directional relationships between 2 CPTs. I have made a query loop with the CPT "Sample packs" and need the CPT "Artists" post title in it. So I did the following (see image). This worked perfectly, but now filtering is an issue. Searching for the artist name, with the article card selected as target query doesn't seem to work, neither does targeting the artist name query.

Hope someone can help me out ๐Ÿฅน

Also having some trouble with this actually, as I need a way to display a โ€œ,โ€ or something like that between the 2 artist names in the query loop

This Pro tutorial provides the steps to

  1. output comma-separated titles of artist CPT posts related to the current sample-pack CPT post (in the loop)
  2. add a search input that lets the visitors search across titles, excerpts, and artist names simultaneously, with a results counter showing how many packs match the search query

on the Sample Pack CPT's archive page (or on a standard Page, if you choose to).

Note

This solution will NOT work properly with pagination. The JavaScript only searches through posts that are currently loaded in the DOM (i.e., only the posts on the current page).

If you don't have too many sample packs (under 50-100), disable pagination and show all posts in your Bricks query settings by setting Posts per page to -1 or a high number.

Step 1

Create your CPTs and add a field group for each using ACF having a bidirectional Relationship field.

Add Artist and Sample Pack posts. Select related posts of the other post type.

Step 2

This step is optional and if you prefer, you could just use a standard Page.

Where possible, it is better (pedagogically speaking, not so much practically) to use a CPT archive page instead of a static Page since the query will be default vs a custom one.

Edit Sample Pack CPT, ensure that Archive is enabled and set your desired archive slug.

Create a Bricks template for the CPT archive and add the condition.

Step 3

Let's create two custom functions.

  1. that returns comma-separated artist titles for the current sample pack (in the loop)
  2. that returns searchable data (JSON-encoded string) for sample pack filtering

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

Accessing ACF Repeater Sub Fields Programmatically in Bricks Query Loop

Accessing ACF Repeater Sub Fields Programmatically in Bricks Query Loop

It is possible to output sub field's values when a Bricks query loop's type has been set to a ACF Repeater without writing code. This…
Read more โ†’
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…
Read more โ†’
Categories:
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…
Read more โ†’
Categories:
Pro
Programmatically populating ACF field values in WordPress

Programmatically populating ACF field values in WordPress

An example of how to set the values of a Select-type field with the names and labels of all public post types.
Read more โ†’
Categories:
Pro
ACF Image Data in Bricks

ACF Image Data in Bricks

Displaying Alt text, Caption, Title and URL of an ACF image field for posts in a query loop.
Read more โ†’
Categories:
Tags:
Pro
Conditional Output based on Date Time Picker Field in Bricks

Conditional Output based on Date Time Picker Field in Bricks

In the past, we showed how elements can be conditionally output based on a post's Date type of ACF field here. This Pro tutorial for…
Read more โ†’
Categories:
Pro
ACF Relationship: Show all other events related to the artists of the current event

ACF Relationship: Show all other events related to the artists of the current event

How all other events related to the artists of the current event can be output in a Bricks query loop.
Read more โ†’
Categories:
Color Custom Field as Section Background Color on Category/Term Archives in Bricks

Color Custom Field as Section Background Color on Category/Term Archives in Bricks

How to use a color from a taxonomy term custom field for as the hero section background color on archive pages.
Read more โ†’
Categories:
Tags: