4.1 WordPress Customizer

Created by Danny Wong, Modified on Sun, 09 Aug 2020 at 12:43 PM by Danny Wong

The Events Calendar supports the WordPress Customizer, located at Appearance → Customize from the WordPress dashboard. This is an excellent way to make styling changes to the calendar directly in WordPress without touching code.

Locating the WordPress Customizer

The WordPress Customizer is part of the Appearance → Customize screen in the WordPress admin. The easiest way to access the Customizer, though, is to simply navigate to the event page that you wish to customize, and then click “Customize” in the admin Toolbar menu.

Some themes hide the admin Toolbar by default. If you can’t locate the Toolbar or the “Customize” link within it, you may find it easiest to just head to your site’s wp-admin and to the Appearance → Customize screen.

Using the WordPress Customizer

Once you’ve got the Customizer open, you’ll notice that its comprised of two panes: the customization options panel on the left, and the preview screen on the right.

The Customizer includes a tab for “The Events Calendar” when the plugin is installed and activated.

In that left-hand panel of customization options, there’s a link that says “The Events Calendar.” Click on this to begin customizing the calendar.

You’ll see a list of options in the left-hand panel of features you can customize. Many of these options are for customizing colors, so, for example, if you click an option and then modify a color, you’ll see a corresponding preview in the right-hand pane of those changes.

Once you’ve found the right color for one item, you can customize the colors of as many other items as you’d like without having to save your changes yet. Once you’re all set with the customizations you want to make, click “Save & Publish.” If you don’t like your changes, though, simply click “Default” to remove them and exit the Customizer.

An example showing the post title color being updated in the WordPress Customizer.

You can make as many customizations as you’d like before clicking that “Save & Publish” button, and can repeat this process over and over until your calendar is looking just right.

All Available Options

? Since the release of The Events Calendar 5.0, we have stopped supporting a number of options that were supported in the legacy calendar views. We are actively working to add support for the updated views and will update this list as that happens.

General

Option Name	Notes
Accent Color	Updates the default blue color used throughout the calendar.
Link Color	Controls the color of text links throughout the calendar and single events.

Single event

Option Name	Notes
Event Title Color	Controls the color of the event’s title in the single event view.
Details Background Color	Controls the background color of the event’s meta information in the event single view, including Details, Venue and Organizer information.

Shortcodes and the WordPress Customizer

By default, the [tribe_events] shortcode will apply styles from the WordPress Customizer if you make those changes for the main calendar page when using the legacy views.

If you are using the updated calendar views, which you can find under Events Settings > Display, the Customizer will not automatically apply the Customizer settings to your [tribe_events] shortcode.

However you can easily apply these styles by adding the following filter to your theme’s functions.php file:

add_filter( 'tribe_customizer_should_print_shortcode_customizer_styles', '__return_true' );