Template Customization Example

The Events Calendar allows you to customize any of the calendar views, including events, venues, and organizers. It uses template overrides, which is a way of modifying templates without touching the source code of the plugins and add-ons. If you’re unsure what template overrides are or how they work, then you’ll want to read up on it before proceeding.

We’re going to look at an example of a template override. In this case, we’re going to customize the calendar’s list view template.

Let’s say we really like the layout in general, but would prefer to get rid of the featured image.

Here’s how we can make that happen.

Locate the template file

First off, we need to find where the event template file is located in the plugin files. In this case, we’re customizing a template in The Events Calendar. That means we can head over here to start looking: /wp-content/plugins/the-events-calendar/src/views/v2.

Inside that folder is another one that is called list which is perfect because it contains the template files we need to customize the calendar’s list view.

The event folder appears to be the most relevant we’re looking for, so let’s go there. Now, we see there’s a featured-image.php file that looks super promising.

Add the copied template to your theme

The key part of overriding a template is that we need a place to put our customized template. That’s what we’re going to do next.

Head over to your server and open up your theme folder. That’s located where WordPress is installed in the /wp-content/themes folder. Your theme will be in there, so let’s open it up and add a new folder in it called tribe. We’ll want to nest more folders in there so that the exact same folders that are in the plugin folder are in the theme.

That’s where we can drop in thefeatured-image.php file we copied earlier.

Not bad so far? Let’s move to the next step.

Customize the template

Now that the featured-image.php file is safely in our theme, we can modify it to suit our needs. In this case, we want to remove the featured image. That means we can open up the file and literally erase everything in it. Seriously, select everything and delete it until you’re left with a blank file, then save your work.

Here’s what we get when we revisit the event page:

Heck yeah, the featured image has been removed, which is exactly what we want!

Note that the event description is still not using 100% width as the original CSS class reserves some space for the image, but you can change that by adding the following CSS snippet at wp-admin > Appearance > Customizer > Additional CSS section:

.tribe-common--breakpoint-medium.tribe-events .tribe-events-calendar-list__event-details {
    width: 100%;
}

Although this is a fairly simple example of what’s possible with template overrides, the same process applies to every other template file in The Events Calendar.