Frontend Filtering of Posts by a Date Picker Custom Field in Bricks

This Pro tutorial provides the steps to enable your site visitors to filter the posts (of any post type) by the value of a date picker type custom field.

Use case: Filtering events by a specific event date or showing events within the selected date range.

We shall include support for browser back/forward buttons with URL state management.

URL Parameters:

  • ?from=2025-07-13 - From date filter
  • ?to=2025-08-15 - To date filter
  • ?date=2025-07-20 - Specific date filter
  • ?from=2025-07-13&to=2025-08-15 - Date range filter

Step 1

Create Events CPT and a corresponding Event Date custom field using a plugin like ACF.

Set the Return Format to Ymd.

Add some posts and populate the custom field.

Step 2

[Optional] Enable CPT archive in ACF config for the CPT and set the slug to events.

Step 3

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

Related Tutorials..

Pro
Frontend Filtering of ACF Repeater Rows by Checkbox Sub Field in Bricks

Frontend Filtering of ACF Repeater Rows by Checkbox Sub Field in Bricks

This Pro tutorial provides the steps to set up input search field filter and button filters so visitors can filter the rows of a ACF…
Pro
Category and Search Filtering for Nested Bricks Query Loops

Category and Search Filtering for Nested Bricks Query Loops

This Pro tutorial provides the steps for adding a category names select dropdown and instant search input field for post titles (and excerpts, if present)…
frontend-filtering-posts-date-picker-custom-field-in-bricks
frontend-filtering-posts-date-picker-custom-field-in-bricks
CleanShot 2025-07-13 at 15.04.23@2x
CleanShot 2025-07-13 at 15.04.23@2x