If you use standard WordPress tags to categorize your events, you might want to display them directly on The Events Calendar’s list view. This allows visitors to see an event’s topics at a glance and click to find related events.

This guide provides a single code snippet that automates the entire process. It will:

  1. Automatically create the necessary template override file in your theme’s folder.
  2. Add the code required to display clickable event tags.
  3. Inject the CSS to style the tags for a clean and professional look.

How to Implement the Snippet

The easiest and safest way to add this functionality is by using a code snippets plugin. Alternatively, advanced users can add it to their child theme’s functions.php file.

Step 1: Copy the Code
Copy the entire PHP snippet provided below.

/**
 * Auto-create template override for event tags in list view
 */

// Hook into init to create the template override
add_action( 'init', 'create_event_tags_template_override' );
function create_event_tags_template_override() {
    // Only run once
    if ( get_option( 'event_tags_template_created' ) ) {
        return;
    }

    $theme_dir = get_stylesheet_directory();
    $template_dir = $theme_dir . '/tribe/events/v2/list';
    $template_file = $template_dir . '/event.php';

    // Create directories if they don't exist
    if ( ! file_exists( $template_dir ) ) {
        wp_mkdir_p( $template_dir );
    }

    // Create the template file
    if ( ! file_exists( $template_file ) ) {
        $template_content = '<?php
/**
 * View: List Event with Tags
 *
 * Auto-generated template override for event tags
 */
$container_classes = [ \'tribe-common-g-row\', \'tribe-events-calendar-list__event-row\' ];
$container_classes[\'tribe-events-calendar-list__event-row--featured\'] = $event->featured;

$event_classes = tribe_get_post_class( [ \'tribe-events-calendar-list__event\', \'tribe-common-g-row\', \'tribe-common-g-row--gutters\' ], $event->ID );
?>
<div <?php tribe_classes( $container_classes ); ?>>

	<?php $this->template( \'list/event/date-tag\', [ \'event\' => $event ] ); ?>

	<div class="tribe-events-calendar-list__event-wrapper tribe-common-g-col">
		<article <?php tribe_classes( $event_classes ) ?>>
			<?php $this->template( \'list/event/featured-image\', [ \'event\' => $event ] ); ?>

			<div class="tribe-events-calendar-list__event-details tribe-common-g-col">

				<header class="tribe-events-calendar-list__event-header">
					<?php $this->template( \'list/event/date\', [ \'event\' => $event ] ); ?>
					<?php $this->template( \'list/event/title\', [ \'event\' => $event ] ); ?>
					<?php $this->template( \'list/event/venue\', [ \'event\' => $event ] ); ?>
				</header>

				<?php $this->template( \'list/event/description\', [ \'event\' => $event ] ); ?>

				<?php $this->template( \'list/event/cost\', [ \'event\' => $event ] ); ?>
				
				<?php
				// Add event tags here
				$tags = get_the_terms( $event->ID, \'post_tag\' );
				if ( ! empty( $tags ) && ! is_wp_error( $tags ) ) {
					$tags = array_values( array_filter( $tags, function( $term ) {
						return $term instanceof WP_Term;
					} ) );
					
					if ( ! empty( $tags ) ) {
						$tag_links = [];
						foreach ( $tags as $tag ) {
							$link = tribe_events_get_url( [
								\'tag\' => $tag->slug, 
								\'post_type\' => \'tribe_events\', 
								\'eventDisplay\' => \'default\' 
							] );
							
							if ( ! is_wp_error( $link ) ) {
								$tag_links[] = \'<a href="\' . esc_url( $link ) . \'" rel="tag" class="tribe-event-tag-link">\' . esc_html( $tag->name ) . \'</a>\';
							}
						}
						
						if ( ! empty( $tag_links ) ) {
							echo \'<div class="tribe-events-calendar-list__event-tags">\';
							echo \'<span class="tribe-event-tags-label">\' . esc_html__( \'Tags:\', \'the-events-calendar\' ) . \'</span> \';
							echo \'<span class="tribe-event-tags">\' . implode( \', \', $tag_links ) . \'</span>\';
							echo \'</div>\';
						}
					}
				}
				?>

			</div>
		</article>
	</div>
</div>
';

        file_put_contents( $template_file, $template_content );

        // Mark as created
        update_option( 'event_tags_template_created', true );
    }
}

// Add CSS styling
add_action( 'wp_head', 'add_event_tags_list_view_styles' );
function add_event_tags_list_view_styles() {
    if ( tribe_is_event_query() && tribe_is_list_view() ) {
        ?>
        <style>
            .tribe-events-calendar-list__event-tags {
                margin-top: 8px;
                margin-bottom: 8px;
                font-size: 0.85em;
                color: #666;
                line-height: 1.4;
            }
            
            .tribe-event-tags-label {
                font-weight: 600;
                margin-right: 5px;
                color: #333;
            }
            
            .tribe-event-tag-link {
                color: #0073aa;
                text-decoration: none;
                transition: color 0.2s ease;
                background: #f7f7f7;
                padding: 2px 6px;
                border-radius: 3px;
                margin-right: 3px;
                display: inline-block;
                margin-bottom: 3px;
            }
            
            .tribe-event-tag-link:hover {
                color: #005a87;
                background: #e7f3ff;
                text-decoration: none;
            }
            
            .tribe-event-tags {
                font-style: italic;
            }
        </style>
        <?php
    }
}
?>

Step 2: Add the Snippet to Your Website

Choose one of the following methods:

  • Method 1: Using a Snippets Plugin (Recommended)
    1. Install and activate a free plugin like Code Snippets.
    2. Navigate to Snippets > Add New in your WordPress dashboard.
    3. Give your snippet a title, such as “Display Event Tags in List View”.
    4. Paste the copied code into the main code field.
    5. Select the option to “Only run on site front-end”.
    6. Save and activate the snippet.
  • Method 2: Using your Child Theme’s functions.php file
    1. Access your theme files via SFTP or your hosting control panel’s file manager.
    2. Navigate to wp-content/themes/[your-child-theme-name]/.
    3. Open the functions.php file and paste the copied code at the end.
    4. Save the file. We strongly recommend using a child theme to prevent your changes from being overwritten during a theme update.

How It Works

The first part of the snippet runs only once. It checks for a template file at [your-theme]/tribe/events/v2/list/event.php. If the file doesn’t exist, the script creates it and populates it with the code needed to display tags. It then sets an option in the database to prevent this creation process from running again.

The second part of the snippet adds custom CSS to your site’s header, but only when viewing the calendar’s list view. This ensures the styles are applied efficiently and only where needed.

This code was tested with The Events Calendar version 6.4.1.

Review the following guides for more information on customizing The Events Calendar:

TAGS:
Notify us of out of date information