Events grouped by Event Date custom field in Bricks

This Pro tutorial for Bricks users provides the steps to output posts of an event custom post type dynamically grouped by the value of their event_date, a date-type custom field (tested with ACF, should also work with other custom field plugins).

Sample data:

  • Event 1: 7 Jul 2020
  • Event 2: 30 Oct 2018
  • Event 3: 14 Dec 2021
  • Event 4: 1 Apr 2020
  • Event 5: 22 Jan 2030
  • Event 6 (no event date)

Output after implementing the tutorial:

This is similar to the Events Grouped by Event Year tutorial, but unlike the earlier one, here we use Bricks elements for the year headings, post title links, etc.

This is a great example to study and understand how to build custom nested query loops in Bricks visually.

Here's the strategy:

  • Add a new "Event Years" query type.
  • Define a custom function in which we loop through the events whilst ensuring that only the events with non-empty event date are considered and in descending order of event date post meta. This function will be set to return an array of 2 items. The 1st one is an array of all unique years. The 2nd one is an array of years mapped to the corresponding post IDs.
  • In Bricks, create two query loops, one inside another.
  • Set the query type of the outer loop to the above function's 1st item, i.e., the array of unique years.
  • For the inner loop, enable PHP query editor and set its post__in parameter to the above custom function's 2nd item with its array key set to the year from the outer loop.

Step 1

Create event CPT and an associated event_date custom field.

There is no need to set the Return Format to Ymd.

Edit event posts and set dates for each.

We shall only fetch the events for which the event date is not empty.

Step 2

Add the following in child theme's functions.php or a code snippets plugin:

This is a BricksLabs Pro tutorial.

For full access login below or create your BricksLabs Pro account

Instant access to 390+ Bricks code tutorials with BricksLabs Pro