Add a list of category links below the search bar

By default, event views do not include a clickable list of categories.

It's possible to add this sort of functionality by installing Filter Bar or, depending on your needs, the third party plugin 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 recipe 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:

<?php
/**
 * 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_events_bar_after_template', function() {
	$terms = get_terms( [
		'taxonomy' => Tribe__Events__Main::TAXONOMY
	] );

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

	print "<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 ) );

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

	print "</ol> </div>";
} );
(View code on Gist)

The above 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 4.6.26

As with all of our recipes, please note that we share this in the hope it will be useful but without any guarantees or commitments. If you wish to use it, it is your responsibility to test it first of all and adapt it to your needs (or find someone who can do so on your behalf). We are unable to provide further support in relation to this recipe.