Event views do not include a clickable list of categories by default. It’s possible to add this sort of functionality by installing Filter Bar or, depending on your needs, The Events Calendar Category Colors. Both are great but, sometimes, they may offer more than you need or you may prefer to start with a simpler custom solution that you can better adjust to fit your exact needs.

In this snippet, we are going to add a list of clickable event category links below the event search bar. The code can easily be tweaked and adapted as needed. Here it is:

/**
 * Add a list of clickable category links below the event
 * search bar.
 *
 * Can be easily styled using the following selector:
 *
 * .the-events-calendar-category-list
 */
add_action(
	'tribe_template_after_include:events/v2/components/events-bar',
	function() {
		$terms = get_terms( [ 'taxonomy' => Tribe__Events__Main::TAXONOMY ] );

		if ( empty( $terms ) || is_wp_error( $terms ) ) {
			return;
		}

		echo '<div class="the-events-calendar-category-list"><ol>';

		foreach ( $terms as $single_term ) {
			$url  = esc_url( get_term_link( $single_term ) );
			$name = esc_html( get_term_field( 'name', $single_term ) );

			echo "<li><a href='$url'>$name</a> </li>";
		}

		echo '</ol></div>';
	}
);

This code could be added either to a custom plugin (preferred) or else to your theme’s functions.php file. Note that the output will be unstyled at this point — but here are some CSS rules that might help get you started on giving them a more aesthetically pleasing appearance (and these can be added using the Appearance → Customize → Additional CSS feature supported by most modern themes):

.the-events-calendar-category-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
}

.the-events-calendar-category-list ol li {
  display: inline-block;
  list-style: none;
  padding: 0.5rem 1rem;
}

Notes

  • Originally written in November 2018
  • Tested with The Events Calendar 6.0.2
TAGS:
Notify us of out of date information