Add Category Tags to List View

Have you noticed that when you look at an archive page in WordPress (an archive page is basically just a post list view), they will display category tags below the title of each post?

What if I told you that this same feature could be accomplished with your Events in The Events Calendar?

Excited?? You should be, cuz it’s pretty simple!

👋 First, as with any customization like this you’ll want to create a child theme before you begin. Creating a child theme is really simple and allows you to make customizations like this without editing core files that would just get erased next time your theme gets updated.

To see how to create a child theme easily, check out this awesome article: How To Create a Child Theme (and Why). Come on back here when you’re done setting up your child theme.

All you need to do is copy this code and paste it into your functions.php file. (of your child theme, of course):

// Inject the list of categories after the title
add_action( 'tribe_template_before_include:events/v2/list/event/venue', function() {
    global $post;
    ?>
    <ul class='tribe-event-categories'>
        <?php echo tribe_get_event_taxonomy( $post->ID ); ?>
    </ul>
    <?php
} );

Copy the above code to your clipboard, then head back to your WordPress back-end, and navigate to Appearance → Theme Editor. If this is your first time clicking on this, you’ll get a nice message warning you to be careful. Go ahead and click I understand.

On the right-hand side, you should see a file called Theme Functions (functions.php). Click on that.

Go ahead and paste that code you copied right into this file. If there’s some existing code in there already, paste this code at the very end. (If you see a closing ?> tag it should go before that.)

Click Update File at the bottom.

That’s it! You should now notice category tags appearing below the title of each event in List View.

Pretty awesome, right?

The looks might not be great out of the box but nothing that a little CSS cannot fix. Here is an example to get you started. You can paste this code in your child theme’s style.css file, or head over to Appearance → Customize → Additional CSS and paste it in there.

.tribe-events-calendar-list .tribe-event-categories li {
	display: inline;
	border: 1px solid #334aff;
	background-color: #334aff;
	padding: 3px 9px;
	border-radius: 30px;
	margin-right: 3px;
	font-size: 0.8em;
}
.tribe-events-calendar-list .tribe-event-categories li:hover {
	background-color: #fff;
}
.tribe-events-calendar-list .tribe-event-categories li a {
	color: #fff;
}
.tribe-events-calendar-list .tribe-event-categories li:hover a {
	color: #334aff;
}

With all the above code in place you should see something like this:

Enjoy!