3rd Jan '24
/
6 comments

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

Get access to all 633 Bricks code tutorials with BricksLabs Pro

Related Tutorials..

Pro
Search Results Grouped by Post Types in Bricks

Search Results Grouped by Post Types in Bricks

Updated on 08 Oct 2024 This Pro tutorial provides the steps to arrange the search results by specified post types in a Bricks site. We…
Pro
Outputting an Element in Bricks x times where x is a custom field value

Outputting an Element in Bricks x times where x is a custom field value

Learn how to output a query loop item(s) as many times as the value of a custom field in Bricks.
Categories:
How to add a layout toggle on query loops in Bricks

How to add a layout toggle on query loops in Bricks

In this tutorial, we’ll show you how to change the layout of your query loop container based on the click of an icon toggle sitting…
Categories:
Pro
Post ID Query Variable-based Post Output in Bricks

Post ID Query Variable-based Post Output in Bricks

How to query a single post of a custom post type using the post ID passed to a page via a URL parameter.
Pro
Meta Box/ACF Images Staggered Grid Gallery in Bricks

Meta Box/ACF Images Staggered Grid Gallery in Bricks

Showing images from two Gallery-type of ACF or Image Advanced-type of Meta Box fields in a staggered grid layout.
Pro
ACF Font Awesome Field in Bricks

ACF Font Awesome Field in Bricks

We walk through using the Advanced Custom Fields: Font Awesome Field plugin for showing Font Awesome icons.
Categories:
Tags:
Adding any Custom WP_Query loop to Bricks’ Query Loop

Adding any Custom WP_Query loop to Bricks’ Query Loop

Sometimes we may need to create a custom post loop using Bricks' query loop feature, but wish to use our own WP_Query code for more…
Pro
Bidirectional Relationship between a CPT and a Taxonomy of another CPT using ACF in Bricks

Bidirectional Relationship between a CPT and a Taxonomy of another CPT using ACF in Bricks

A couple of members asked: I have a cpt called "Markets" aand a cpt "tools". Tools have a taxonomy "tools group". How can i create…