Upcoming Events in Bricks Grouped by ‘Month Year’ with Frontend Filtering by Event Type

This is a newer version of the earlier Upcoming Events Grouped by 'Month Year' in Bricks tutorial with these improvements:

• two nested queries instead of three for the events grouped by month years
• frontend filtering by event type (a custom taxonomy) using custom JavaScript

Step 1

Create event CPT and corresponding event-type taxonomy with a plugin like ACF.

Create a field group for your CPT having an event-date custom field of Date Picker (or Date and Time Picker).

For Date Picker type field, set return format to Y-m-dFor Date Time Picker type field, set return format to Y-m-d H:i:s

Publish some event posts having event type and event date for each.

Step 2

Let's

• add a new "Event Month-Year" query loop type
• create the callback function for the above query loop type
  • get all future events
  • loop through these events and organizes them into groups based on their month and year (e.g., "January 2025", "February 2025")
  • sort chronologically: ensure the months appear in the correct order (oldest month → newest month)
  • return an array having display (human-readable month-year label like January 2025) and posts (array of post IDs belonging to that month) keys
• add a Bricks helper function to navigate nested query loops
• create a helper function to get post IDs for the inner loop
  • bl_get_month_year_post_ids(): retrieves the post IDs from the parent month-year group
  • used in the inner post loop to only show events from the current month being looped
• create a display helper function
  • bl_get_month_year_display(): return the formatted month-year string like "January 2025"
  • used in the Heading element to display the month-year title
• create a taxonomy helper function
  • bl_get_event_types(): return space-separated taxonomy term slugs for an event
  • used as the value for data-event-type attribute on each event item

Add the following in child theme's functions.php (w/o the opening PHP tag) or a code snippets plugin: