Create a New Calendar Theme

Creating your own Calendar Theme allows you to change the layout of your calendar, and more.

This is a bit more advanced than other modifications, so if you’re not familiar with HTML or CSS, you may want to hire a developer to do it for you.

If you are already familiar with writing WordPress Themes you should have no trouble creating a Calendar Theme. Since 2.0, Timely uses the Twig template engine, a faster and easier way to create templates. Full documentation on Twig can be found here.

If you’ve already created templates in the pre-2.0 style, they should still work fine.

We do not recommend you create your custom theme on a production server. You’ll need to turn on debugging to preview your changes. This will negatively affect the performance of your site while it’s turned on.
Where are the Themes and Views?
  • Core calendar themes are stored under [wp-root]/wp-content/plugins/
  • Templates for the Extended Views Add-on (Posterboard and Stream view) are stored under [wp-root]/wp-content/plugins/
  • Templates for the Frontend Submissions Add-on are stored under [wp-root]/wp-content/plugins/
  • Your own custom themes are stored under [wp-root]/wp-content/themes-ai1ec. Any templates you wish to override (even those normally found in an extension) go under your custom theme’s template directory.

Here’s how you do it.

Step 1: Turn on Debug Mode

This will turn off caching and allow you to see the changes as you make them.

Edit [wp-root]/wp-content/plugins/

Step 2: Create a Child Theme

Timely has prepared a theme that you can use as a starting theme for your child theme. It’s called Gamma.



Copy the “gamma” folder into a new folder, with the name of your choosing under the directory “themes-ai1ec.”

Step 3: Edit  style.css

Edit style.css to customize the name and description of your theme.

  • Theme Name
  • Theme URI
  • Author
  • Author URI
  • Description
  • Version
  • Tags
Please note: Use of this file to store stylesheet rules is deprecated. Your theme’s custom CSS (and/or LESS) rules belong in css/override.css or less/override.less, as explained below.

Add your custom CSS (or LESS) styles in css/override.css or less/override.less


Step 4: Copy calendar files from Vortex

Vortex, the default calendar theme, has the all the templates you need. Simply copy the files that you want to edit into your new folder.

The minimum files required to build a calendar theme can be found in Gamma. Gamma is the “skeleton” theme we supply with the plugin. Like all custom calendar themes, Gamma is a child theme of Vortex. Vortex is the foundation of all calendar themes, as it provides the base CSS, images, theme option definitions, and template files required for the calendar to function.

Copy only the templates that you want to customize from Vortex (found either in the core plugin or in an add-on) and place into your new custom theme, under the twig subdirectory.


Step 5: Edit your templates files.

Timely uses the Twig template engine to make it easier edit your template. Editing a twig template is similar to editing any html document. Full documentation on Twig can be found here.

Optional. Update screenshot.png with a thumbnail screenshot of the theme. This image is shown on the calendar theme selection screen.

Index of all Theme Files

style.css: Where the theme’s metadata is defined in a CSS comment, including:

  • Theme Name
  • Theme URI
  • Author
  • Author URI
  • Description
  • Version
  • Tags

This file must be customized to include the relevant details of your custom theme. Please note: Use of this file to store stylesheet rules is deprecated. Your theme’s custom CSS (and/or LESS) rules belong in css/override.css or less/override.less.

The image used to represent a thumbnail screenshot of the theme, shown on the calendar theme selection screen.

The minimum required image files used by all calendar themes. Feel free to replace any contained images with custom versions in your own theme. (Also please refer to Vortex’s img directory to find out what other images you can optionally override in your theme.)

For advanced users, a place to insert arbitrary PHP code to run when the page is initialized, and should usually be left untouched. See the WordPress codex article for more information.

An empty file, not used, but required to be present in all themes by the theme engine.

Agenda view extra toolbar buttons

Upcoming Events widget

Agenda view

Container of the calendar toolbars and the active view

Front End Submissions Add-on: Category selector for the Post Your Event form

Category filter dropdown

Front End Submissions Add-on: Add Your Calendar and Post Your Event buttons

Front End Submissions Add-on: Post Your Event front-end form

Front End Submissions Add-on: Post Your Event message after submission

Front End Submissions Add-on: Post Your Event modal dialog skeleton

Datepicker toolbar button

Event details when displayed as WordPress excerpts

Google Map section of event details

Event popover seen in Month, Week, Day, and Agenda Widget views

Footer of the event details page

Structured event details when retrieved remotely

Event details when displayed as a single WordPress page

Calendar toolbar containing filter dropdowns

Month view

Title and navigation toolbar of individual calendar views

Day view

Pagination buttons of a calendar view

Extended Views Add-on: Posterboard view

Recurrence info display on event details page

Extended Views Add-on: Stream view

Front End Submissions Add-on: Add Your Calendar modal dialog and form

Subscribe buttons

Front End Submissions Add-on: Tag selector for the Post Your Event form

Tag filter dropdown

Calendar views dropdown

Week view

Base template extended by Week and Day views

Agenda widget wrapper markup


Important Note: If you do not see the changes on the front end, please navigate to Dashboard > Events > Theme Options and hit Save Options (this regenerates the CSS).