WordPress Customizer for V1 Calendar Views

👋 This article covers Views 1 (V1), the legacy design of calendar views prior to The Events Calendar 5 and Events Calendar Pro 5. If you are using newer versions and the updated views, please check out the updated guide for using the WordPress Customizer with the new styles.

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 the WordPress dashboard and go 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
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 NameNotes
Accent ColorControls link colors of event titles and read more links
Featured Highlight ColorControls 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 NameNotes
Link Color 
Filter Bar ColorRequires Filter Bar
Button Color 
Map PinThe 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 NameNotes
Calendar Table ColorApplies to both the Month View and (if Events Calendar PRO is activated) the Week View.
Calendar Highlight ColorApplies to both the Month View and (if Events Calendar PRO is activated) the Week View.
List-style Views
Option NameNotes
Price Background ColorIs used in all list-style views, including List View and Day View.
Photo View (PRO-Only)
Option NameNotes
Photo Background ColorRequires Events Calendar Pro
Single Event
Option NameNotes
Post Title Color 
Details Background Color 
Widgets
Option NameNotes
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.

Additional Options

Bonus! Even more Customizer options are added when you install and activate our Calendar Customizer extension.

Table of Contents

Details

Report an issue