My day job afforded me the opportunity to build out a site for managing custom events. While we initially looked at using something like The Events Calendar, building it from scratch and all the fields we needed made more sense. The original requirements were really vague, so I built out the system the way I would want to use it with the information that most people would like. After a month of silence, the customer returned with a reduced set of fields and the requirement to allow an external system to submit events. I originally considered reducing the fields, but decided to leave my original options available and provide the mapping through the WordPress API to match their requirements. After a couple of tests and security issues, we got it working. The site went live today.

What I learned

I won’t go in depth on each step, but this was a great learning experience and helped reinforce some concepts.

  • The WordPress API is great.
  • Bricks + Frames + ACSS + BricksExtras + Advanced Themer is a power package.
  • Meta Box can be a challenge when dealing with multiple fields, but overall, it works really well.
  • Creating a query loop based on upcoming dates is super easy in Bricks — once you learn the date pattern requirement.
  • The Bricks filter elements work really well.
  • Get lots of feedback from people who have a vested interest – the card design changed three times in the last day.
  • ChatGPT is a great tool. I used it to create an iCal function (code share coming).

Here is a screenshot of the Meta Box event field layout.

Screenshot of the meta box fields

Modifying the API

WordPress really does pack a lot of power into the underlying code, and the API is a fine example of this. I wanted to share events across a variety of sites, and now I can. One thing that I could not figure out was how to manipulate the results to exclude past events and then sort by date, time, and title. After trying a few different approaches, I contacted AI for an assist. In a matter of seconds, I had a solution. A few iterations later, I had a working solution.

<?php 

$today = date('Y-m-d'); // Adjust if your stored format differs

$args = array(
    'post_type'  => 'events', // Use your custom post type slug here
    'meta_query' => array(
        'relation'    => 'AND',
        'date_clause' => array(
            'key'     => 'e_start_date',
            'value'   => $today,
            'compare' => '>=',
            'type'    => 'DATE'
        ),
        'time_clause' => array(
            'key'     => 'e_start_time',
            'compare' => 'EXISTS'
        )
    ),
    'orderby' => array(
        'date_clause' => 'ASC',
        'time_clause' => 'ASC',
        'title'       => 'ASC'
    )
);

$query = new WP_Query( $args );

add_filter( 'rest_events_query', function( $args, $request ) {
    if ( isset( $request['filter_date'] ) && $request['filter_date'] == 1 ) {
        $today = date('Y-m-d');
        $args['meta_query'] = array(
            'relation'    => 'AND',
            'date_clause' => array(
                'key'     => 'e_start_date',
                'value'   => $today,
                'compare' => '>=',
                'type'    => 'DATE'
            ),
            'time_clause' => array(
                'key'     => 'e_start_time',
                'compare' => 'EXISTS'
            )
        );
        $args['orderby'] = array(
            'date_clause' => 'ASC',
            'time_clause' => 'ASC',
            'title'       => 'ASC'
        );
    }
    return $args;
}, 10, 2 );
?>

This code adds all the necessary changes to the API call and provides an option not to use this feature; omit filter_date=1 in your API request. This has been used in a custom shortcode and the new Bricksforge API query.

Similar to the API code above, using the Bricks PHP Query Option allows you to additional meta parameters for sorting.

Screenshot of the query editor.