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.
Where are the Themes and Views?
- Core calendar themes are stored under
- Templates for the Extended Views Add-on (Posterboard and Stream view) are stored under
- Templates for the Frontend Submissions Add-on are stored under
- 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.
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 to customize the name and description of your theme.
- Theme Name
- Theme URI
- Author URI
less/override.less, as explained below.
Add your custom CSS (or LESS) styles in
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
Step 5: Edit your templates files.
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 URI
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
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
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
Title and navigation toolbar of individual calendar views
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
Front End Submissions Add-on: Tag selector for the Post Your Event form
Tag filter dropdown
Calendar views dropdown
Base template extended by Week and Day views
Agenda widget wrapper markup