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) andposts(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-typeattribute on each event item
Add the following in child theme's functions.php (w/o the opening PHP tag) or a code snippets plugin:
