How to Customize Single Event Pages with Event Categories

By default, event categories do not contain a specific body class, so making customizations with CSS can be difficult. The good news is that we’ve got a snippet that you can add to your theme’s functions.php file, which will add a body class to a specific event category. From there, you’re free to customize the appearance of the category to your liking.

This can be useful if you’d like to customize only a specific category of events. For example, you may want to hide the date and time only from one event category. So let’s take a look at how to make this happen.

The snippet

Here’s the snippet that you’ll add to your theme’s functions.php file:

add_filter( 'body_class', 'tec_add_taxonomy_class' );

 // Add taxonomy terms name to body class
function tec_add_taxonomy_class( $classes ){
    if( is_singular('tribe_events') ) {
        global $post;
        $taxonomy_terms = get_the_terms($post->ID, 'tribe_events_cat'); 
        if ( $taxonomy_terms ) {
            foreach ( $taxonomy_terms as $taxonomy_term ) {
            $classes[] = 'tribe_events_cat-' . $taxonomy_term->slug;
            }
        }
    }
    return $classes;
}

Once you add the snippet to your site, check your single event page, and on the body classes, you will see the newly added tribe_events_cat-CATEGORY-SLUG classes (one for each event category on that post). You can now use the body classes to manipulate your CSS to your desire. If you need help inspecting the elements, you can use our Google Chrome Developer Tools tutorial.