Compatible Themes for The Events Calendar

With all of the thousands of WordPress themes out there, it would be difficult to test the theme compatibility of our calendar plugins against every single one of them.

Instead of focusing on compatibility with a particular theme, we have built The Events CalendarEvents Calendar Pro, Event Tickets, Event Tickets Plus, and our other premium add-ons using default WordPress as the baseline for our standards. What does that mean? It means that we make sure our plugins work seamlessly with themes that come pre-installed with a default WordPress installation.

This allows us to confidently say that we are compatible with most themes that also follow WordPress best practices.

Defining “theme compatibility”

Some people assume that compatibility means everything works together without any problems. That’s not a bad interpretation for simple cases, such as whether a phone charger is compatible with the outlet on your cell phone — it either works or it doesn’t, right?

Theme compatibility is much more complex. There’s a huge amount of diversity in the way both free and premium WordPress themes are built. The Events Calendar might work functionally with a given theme, but not look perfect out of the box. Or it might look fantastic, but need a workaround to make sure it plays nicely with the theme functions.

For the purpose of this post, we’re going to define compatibility as “capable of existing or performing together in harmony.” In other words, you may still need to make little tweaks to get things just right — and that’s why we’re including examples for each theme as well as information about customizations in the next next couple of sections.

How to tell if a theme is compatible

Many themes do not list specific plugin compatibility, so you have to do a bit of work to check if The Events Calendar (or any plugin, really) will play nicely with the theme you’ve selected for your site.

To test compatibility with our plugins, we recommend starting with The Events Calendar, the core plugin for all of our products that’s freely available in the WordPress Plugins Directory. If it works, it’s very likely that Events Calendar Pro and our other premium add-ons will work, too.

Remember to check the calendar’s display settings

There are lots of options for modifying the appearance of The Events Calendar on the Events settings screen (EventsSettingsDisplay). One of those is which template to use for the calendar and event pages. In many cases, we recommend using the “Default Events Template” option.

That setting allows the plugin to be more opinionated about the styles it uses to prevent styling conflicts with themes. If the calendar appearance isn’t great with that setting, then try selecting one of the theme’s page templates instead.

A word about customizing

Sometimes, all you need is a dash of CSS to get the look you’re going for. Other times, you may want to modify calendar templates to get things just right. You can even completely disable the calendar’s styles in The Events Calendar’s display settings and use your own styles.

It’s always been our goal to make The Events Calendar and our premium plugins easy to customize. That’s why there are multiple ways to customize styles and a complete system for overriding templates with your own markup. It’s worth checking out our complete guide to customizing the calendar over at our knwoledgebase to get a feel for everything that’s possible.

Themes compatible with The Events Calendar

Because of the complexity of this topic, our list comes with a bit of a disclaimer: All of the themes listed as compatible in this post are based on information provided by the theme author or from testing we’ve done.

Twenty Twenty

The calendar looks super sharp with the Twenty Twenty theme by WordPress. There’s absolutely nothing that needs to be done to the main calendar to make it look like a million bucks when you’re using the default event template.

But the event page needs a little love because the content bumps up against the very edges of the page. That’s an easy fix with a couple lines of CSS:

#tribe-events-content {
  margin: auto;
  max-width: 800px;
}

The other route is to use one of the themes templates instead, which you can do on the Events display settings screen. The problem there is that now it’s the calendar that needs a little love, this time because the calendar is too narrow. That, too, is solved with a touch of CSS:

.post-type-archive-tribe_events .tribe-events-view {
  max-width: 1260px !important;
  width: 100% !important;
}

Twenty Nineteen

The Twenty Nineteen theme from WordPress is one of the most widely used themes. Most times, the theme is customized with a child theme, just like the theme we use for our plugin demo. We chose to use Twenty Nineteen as the parent theme for The Events Calendar demo because of how seamlessly it works with the calendar. The only custom work we did was a bit of styling for things like fonts and colors, but what you see there is pretty much a standard Twenty Nineteen installation.


Twenty Seventeen

The Events Calendar is completely compatible with the default WordPress Twenty Seventeen theme. In most cases, you’ll be able to activate the calendar with theme and be good to go.

That said, we recommend using the default events template, which you can on the Events display settings screen. If you use the theme’s default page template, the sidebar is a little narrow which squeezes the calendar just enough to prevent it from going full width. The events template looks a lot better.


Genesis Framework

The Genesis Framework from StudioPress is one of the most popular WordPress frameworks out there. Some of the folks on our team even use it for their personal projects.

“Framework” is the key word here. Genesis isn’t a theme so much as it is a way to develop themes. That means if you were to install Genesis all by itself, you’d see a pretty bare bones calendar page. Chances are that, if you’re using Genesis, you have a child theme installed where your templates and styles exist. That can either be a custom child theme you or a developer on your team created or one created by a third party developer.

There are tons of free and paid Genesis child themes, all of which can vary as far as supporting The Events Calendar. The team behind Genesis, StudioPress, offers a bunch of paid themes on their site. We grabbed a copy of the free Genesis Starter Theme by SEO Themes.

Like Genesis itself, the Genesis Starter Theme is pretty plain and stark right out of the box, but provides some baseline styles that dress things up just enough to look nice and for you to customize from there. We found nothing we needed to do to make the calendar look great — it just works. Just be sure to use the default events template in the Events settings because the theme templates do not appear to properly load the calendar.


Avada

Avada from Theme Fusion is another popular theme compatible with our plugins. Like Enfold and others in this list, Avada has a set of custom calendar templates they’ve added that tailors The Events Calendar to the overall look and feel of the theme.

But, like those other themes, the customizations reflect the calendar templates that predate The Events Calendar 5.0, when a new set of templates were released. The good news there is that you’ll have a lovely calendar if you rely on older versions of our plugins. The even better news is that the updated templates still look great right out of the box.

Of particular note is that their popular Avada Church Theme has full design integration with The Events Calendar by including custom calendar templates with the theme.


Enfold

Kreisi’s Enfold is one of the most popular WordPress themes on the planet. And it just so happens to support The Events Calendar and Events Calendar Pro as well. In fact, if you open up the theme directory, you’ll see it contains a folder for custom calendar templates and styles.

The only problem there is that those customizations are made for the calendar templates that were released before our completely new templates in The Events Calendar 5.0. We tested with the latest templates and the calendar looks great.

What doesn’t look great is the event page. We’d recommend using the default event template, but Enfold seems to remove that setting from the Events settings screen. That means any tweaks we do will need to come at the CSS level.

Try adding this either to your child theme’s style.css file or using custom CSS in the WordPress Customizer:

.responsive .av-single-event-content {
  padding: 0 50px;
}

.av-single-event-meta-bar {
  max-width: 775px;
  padding: 50px;
}

There we go, much better!


Astra

Astra is another popular WordPress theme we tried out. There was absolutely no hassle setting it up to work with The Events Calendar — in fact, it works as is.

One thing you might find yourself wanting to customize is the main calendar. The background of the calendar blends right into the background color of the template. It doesn’t look bad but you might prefer the calendar to stand out a bit more by adding a white background like this in your child theme’s style.css file or using custom CSS in the WordPress Customizer:

.tribe-common--breakpoint-medium.tribe-events .tribe-events-l-container {
  background: #fff;
  padding-top: 50px;
  padding-bottom: 50px;
  margin-top: 50px;
  margin-bottom: 50px;
}

If you’re set on using the theme’s page template instead, you can do that in the Events display settings. Just note that “Archive: Events” will display at the top of the page as the title. It’s pretty easy to fix that with a sprinkle of CSS:

/* Removes the page title from the calendar */
.post-type-archive-tribe_events header {
  display: none;
}

/* Removes extra spacing around the calendar */
.post-type-archive-tribe_events .ast-article-post {
  padding: 0;
}

Cyberchimps

Although Cyberchimps does not specifically list our plugins on their theme pages, they have given us their stamp of approval on their recommended plugins list. We checked out their free Travel theme to test things out and, while the calendar looks pretty good and functions normally, we do recommend using the default events template in the Events display settings. Otherwise, the theme will treat the calendar like a WordPress archive template, which adds unnecessary pagination and space for a sidebar to the right of the calendar.

When you use the default events template, you’ll notice that the calendar has a light gray background that blends in with the site background. It’s not a great look, but can be fixed by adding the following to your child theme’s style.css to using custom CSS in the WordPress Customizer.

.tribe-common.tribe-events.tribe-events-view.tribe-events-view--month.tribe-common--breakpoint-xsmall.tribe-common--breakpoint-medium.tribe-common--breakpoint-full {
  background: #fff;
}

You’ll also notice that the event page is also gray and that the content touches the far left and right edges of the screen. That can be cleaned up like this:

#tribe-events-pg-template,
.tribe-events-pg-template {
  background: #fff;
  padding: 2rem;
}

So, yes, the themes from Cyberchimps do support The Events Calendar and Events Calendar Pro, but you’re looking at some minor CSS tweaks to get things looking just right.


Divi

Elegant Themes has recognized The Events Calendar as one of the best WordPress event plugins on their blog in the past, but they do not specifically outline the compatibility of our plugins with their popular Divi theme.

While we’ve seen folks successfully use Divi with The Events Calendar without any hassle, we’ve also heard from others that Divi overrides the number of events to show per page in the Events settings. If that happens to you, we’ve released a little extension you can install on your site that corrects the issue.


X Theme

X Theme from Themeco doesn’t specifically support The Events Calendar, but we’ve had several users share that they’ve successfully integrated our plugin with their theme. To be fair, we’ve also had users report theme conflicts, so we highly recommend testing before assuming compatibility with this theme.

In our tests, the calendar looks pretty darn nice. But to get there, it does take a tiny bit of custom CSS. For example, we recommend using the default events template in The Events Calendar display settings. That ensures that the calendar gets enough space to display all of its content, but the calendar’s background blends into the theme’s gray background color. We can fix that like this:

.tribe-common--breakpoint-medium.tribe-events .tribe-events-l-container {
  background: #fff;
}

That will help the calendar pop, but we can take things a little further if you want the calendar to match the same X theme styles for page content:

.tribe-common--breakpoint-medium.tribe-events .tribe-events-l-container {
  background: #fff;
  box-shadow: 0 0.15em 0.35em 0 rgba(0,0,0,0.135);
  margin: 60px;
  padding: 60px;
}

The only other thing is color. X has a sort of bright red (#ff2a13) as its default color for things like links and buttons. Normally, you would be able to change those styles for the calendar using the WordPress Customizer. However, The Events Calendar 5+ does not currently support the Customizer options, although it is something we plan to re-introduce. In the meantime, you’ll need to change the button color in CSS:

/* Changes the button background color */
.tribe-common .tribe-common-c-btn,
.tribe-common a.tribe-common-c-btn {
  background-color: #ff2a13;
}

/* Changes the button background for hover and focus states */
.tribe-common .tribe-common-c-btn:hover,
.tribe-common .tribe-common-c-btn:focus,
.tribe-common a.tribe-common-c-btn:hover,
.tribe-common a.tribe-common-c-btn:focus {
  background-color: #d80f0f;
}

Summary

We sure hope you find this list of themes helpful for finding ones that work well with The Events Calendar. Like we mentioned earlier, we’re super confident that our plugins play well with any theme that uses WordPress best practices.

But for cases where things look off or appear to not work, now you have some options for what to do. Just as we saw in many of the examples, some light CSS will do the trick. The good news is that the calendar is super flexible to customize so that it looks and feels like a natural part of your website.