🔔 Note: Currently the Customizer will only apply to legacy views. Our team is working to add new options to the Customizer for the updated calendar views.
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.
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.
☝ 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.
Additional Options
Bonus! Even more Customizer options are added when you install and activate our Calendar Customizer extension.