Knowledgebase

Check the knowledge base articles to get a jump start on your integrations, modifications, and all around user questions. If you don’t find what you’re looking for hit the help desk.

Search Knowledgebase

The Events Calendar and the WordPress Customizer

The Events Calendar and its add-ons, like Events Calendar PRO, integrate with the WordPress Customizer to provide a number of options for quick, easy customization. You can tweak the colors of a number of calendar elements, for example, and can even customize other elements like the “pins” of Google Maps used on event and venue views.

This guide covers the ins and outs of how The Events Calendar and its add-ons integrate with the WordPress Customizer. If a question of yours remains unanswered even after reading through this guide, stop by our help desk and let us know!


Finding the WordPress Customizer

The Customizer is part of the Appearance → Customize screen in WordPress. 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.

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.

Customizer: The Events Calendar General Theme Settings

Example showing the two panes: Customizing options on the left, preview on the right

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.

ECP Color Customizer Demo

☝️ This .gif demonstrates making numerous customizations in one go. Note how the user modifies some colors in the Global Elements section of The Events Calendar customization options, then modifies some other colors in the Month/Week View section.

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

General Theme
Option Name Notes
Accent Color Controls link colors of event titles and read more links
Featured Highlight Color Controls the background of featured events on your default Events page. It also determines the background color of Buy or RSVP Now buttons.
Global Elements
Option Name Notes
Link Color
Filter Bar Color Requires Filter Bar
Button Color
Map Pin The Google Maps API will attempt to accommodate a wide range of image sizes for the map pin, but something in the range of 20–30px wide and 20–40px tall will likely work best, like this example image from Google.
Month/Week View

Note: If only The Events Calendar is activated, this section will be called “Month View”. It only becomes “Month/Week View” if Events Calendar PRO is activated.

Option Name Notes
Calendar Table Color Applies to both the Month View and (if Events Calendar PRO is activated) the Week View.
Calendar Highlight Color Applies to both the Month View and (if Events Calendar PRO is activated) the Week View.
List-style Views
Option Name Notes
Price Background Color Is used in all list-style views, including List View and Day View.
Photo View (PRO-Only)
Option Name Notes
Photo Background Color Requires Events Calendar PRO
Single Event
Option Name Notes
Post Title Color
Details Background Color
Widgets
Option Name Notes
Calendar Header Color
Calendar Date Bar Color
Show Featured Event Images

We are continuing to add to this list. If you know of any color(s) that you would like to see modifiable from the Customize page, please let us know on our UserVoice feature-suggestion page.