Color Calendar Events by Taxonomy Term

Each event on the Calendar element can have its own color, but sometimes the color should be based on the event’s category (or any taxonomy) instead of per post. In this tutorial we’ll go through how to store a color on each taxonomy term and have the calendar use it for every event, using a small helper function and Bricks’ echo dynamic tag.

Note: nothing in this tutorial is actually specific to the calendar. This same approach could be used to apply color to any item in any Bricks query loop based on the taxonomy term of a post. The method to get the color value within the loop would be the same.

Step 1: Add a color field to the taxonomy

Create a field group with a single color picker and assign it to your taxonomy’s terms rather than to posts. In this example the taxonomy being used is ‘event_type’, which is acting as the main category type for the events.

ACF: Field type “Color Picker”, return format “String”. Location rule: Taxonomy is equal to event_type.

Meta Box: Field type “Color”. In the field group settings, set Location to “Taxonomy” and choose event_type.

Make a note of the field name. Then edit each term and pick its color.

Step 2: Add the helper function to your child theme

As we’re creating a custom function, make sure to list this function name via the filter bricks/code/echo_function_names, so it can be used with the echo dynamic tag. This is included in the code at the bottom.

/**
 * Return a meta value from the first term of the current post in a taxonomy.
 * Works with ACF, Meta Box or plain term meta.
 *
 * Usage in Bricks: 
 */
function be_post_term_meta( $taxonomy = '', $meta_key = '', $post_id = 0 ) {
    $taxonomy = sanitize_key( $taxonomy );
    $meta_key = sanitize_key( $meta_key );
    $post_id  = $post_id ? absint( $post_id ) : get_the_ID();

    if ( ! $taxonomy || ! $meta_key || ! $post_id ) {
        return '';
    }

    $terms = get_the_terms( $post_id, $taxonomy );
    if ( ! $terms || is_wp_error( $terms ) ) {
        return '';
    }

    foreach ( $terms as $term ) {
        $value = get_term_meta( $term->term_id, $meta_key, true );
        if ( $value !== '' && $value !== false && $value !== null ) {
            return is_scalar( $value ) ? (string) $value : '';
        }
    }

    return '';
}

add_filter( 'bricks/code/echo_function_names', function () {
    return [
    'be_post_term_meta'
    ];
} );

The function looks up the current event’s terms in the named taxonomy and returns the first term’s meta value. It returns nothing if the event has no term or if the term has no color, and the calendar then falls back to its default color (as set in the calendar settings).

Step 3: Add the custom function via Bricks’ echo dynamic tag

Now we have the custom function, this can be used to set the color per post.

Edit the Calendar element. In the Field Mapping group, set Color to: (adding the {} brackets)

echo:be_post_term_meta('event_type','event_type_color')

Swap ‘event_type’ and ‘event_type_color’ for your taxonomy slug and field name.

That’s it

Save, then reload the page. Events should now take their color based on the chosen taxonomy term color.