Sébastien SERRE

OpenAgenda for WordPress

Display Events hosted in Openagenda.com easily in your WordPress Website by using shortcode, Gutenberg Blocks and Widget.

Vincent Dubroeucq

openagenda

Display calendars from https://openagenda.com on your site.
<h3>Basic usage</h3>
This WordPress plugin allows you to embed any calendar hosted on <a href="https://openagenda.com" rel="nofollow ugc">https://openagenda.com</a> on your WordPress site.
Upon activation, the plugin creates a new post type named Calendars. Just create a new calendar, provide the UID of the calendar you wish to display in the calendar settings box, and that’s it !
You can leave the content area for this calendar empty, as it will be populated automatically with your events !
Your events are automatically inserted after your content. If you wish to control where your events will be listed, just use the shortcode <code>[openagenda]</code> in your content.
<h3>Settings</h3>
General settings can be found under the Calendar > Settings entry in the admin menu.
All data related to your API key or calendars can be found on https://openagenda.com.
The settings are divided into two tabs: General and Integrations.
<h3>General settings</h3>
The General settings page provides the following settings :
<ul>
<li>OpenAgenda API key : Your user API key. Providing your account API key is required for the plugin to work properly. It can be found in your account on <a href="https://openagenda.com" rel="nofollow ugc">https://openagenda.com</a></li>
<li>Allow for embedded content : If your events contain embedded content, tick this box to allow the corresponding HTML tags.</li>
<li>Load default stylesheets : The plugin provides very basic styling and depends heavily on your theme’s styles. Disable this to rely 100% on your theme styles.</li>
<li>Legacy templates : Templates have been updated in 3.0.0. Check this option to continue using legacy templates.</li>
<li>Cache duration : For performance reasons, basic requests to OpenAgenda are temporarily kept in cache. This settings controls the time to keep them cached, in seconds.</li>
<li>Default event image : Choose an image to use in case events do not have one.</li>
<li>Delete all calendar content on uninstall ? : controls whether you want to delete all your calendars on uninstall.</li>
<li>Delete all options on uninstall ? : controls whether you want to delete all your calendar settings on uninstall.</li>
<li>Allow OpenAgenda to collect usage stats ? : controls whether you want to send CMS used and site URL to OpenAgenda, for statistic purposes.</li>
</ul>
<h3>Integrations settings</h3>
The Integrations tab allows you to fine tune settings for various third party services the plugin uses.
OpenStreetmap integration settings :
<ul>
<li>Default map tiles link : This is the map tile used for the various maps displayed by the plugin.</li>
<li>Default map tiles attribution link : this is the default attribution link placed on OpenStreetMaps.</li>
</ul>
CloudImage integration settings :
<ul>
<li>CloudImage API key : If you wish to use CloudImage to serve your images, enter your API key here.</li>
</ul>
<h3>Permalinks settings</h3>
In the Permalinks settings, you can change the prefix for your calendar pages. You cannot leave this blank as your URLs will conflict with WordPress’ default pages and posts.
In the Settings > Reading section, you can set a calendar page as your front page. Note that it will still use the default calendar template provided by the plugin and the default front page template provided by your theme.
<h3>Customizer settings</h3>
In the Customizer, a new panel is available to house various display settings. For now only a main color setting is available.

If you add Openagenda Filter widgets via the customizer, the preview will not display them immediately. That’s simply because filters are initialized on page load and the customizer preview is not always fully refreshed when a setting is changed.
Simply publish your settings and refresh the page, or open your agenda page in another tab. Your filter should work just fine.
<h3>Filter widget and shortcodes</h3>
To allow users to easily find relevant events, the plugin also provides a convenient filter widget. Place the widget in your sidebar or other widgetized area, pick a filter and tweak any additionnal settings in the widgets admin.
To integrate filters directly in your content instead of widget areas, the plugin also provide shortcodes.
Every shortcode listed here (except for <code>[openagenda]</code>) corresponds to a filter option in the widget.
Additionaly, shortcodes and widget filters have the same parameters, and every shortcode attribute corresponds to a widget filter setting.
<code>[openagenda]</code>
Displays the calendar. You do not need to use this shortcode explicitely, as it is automatically injected in the content of your “calendars” posts.
However, if you need to insert static content after your list of events, you can do so by inserting this shortcode, then your static content afterwards.
<code>[openagenda_filter_active]</code>
Displays the active filters. It takes no parameters.
<code>[openagenda_filter_choice]</code>
Displays a list of choices, depending on the field chosen. It takes the following parameters :
<ul>
<li><code>field</code>: the slug of the choice field you want to display (e.g. “cities”, “keywords”, “departments”, “favorites”, etc… ).</li>
<li><code>additional_field</code>: Any custom field you have setup in your OpenAgenda administration. Only works when ‘Additional Field’ is the chosen field.</li>
<li><code>page_size</code>: Number of options to display before the ‘More options’ button.</li>
</ul>
You can find the list of available additional fields in the Forms section of your agenda settings on openagenda.com (ex: https://openagenda.com/[your-agenda]/admin/schema)
<code>[openagenda_filter_calendar]</code>
Displays a calendar. It takes no parameters.
<code>[openagenda_filter_map]</code>
Displays an interactive map to locate and search events. It takes the following parameters :
<ul>
<li><code>map_tiles_link</code> : Map tiles link to use. Defaults to <code>https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png</code></li>
<li><code>map_auto</code> : Whether to automatically update map on scroll. </li>
</ul>
<code>[openagenda_preview]</code>
Displays a preview of any calendar. It takes the following parameters :
<ul>
<li><code>uid</code> : UID of the calendar you wish to preview.</li>
<li><code>size</code> : Number of events to display.</li>
<li><code>sort</code> : Event sort option. Accepts <code>lastTimingWithFeatured.asc</code>, <code>timingsWithFeatured.asc</code>, <code>lastTiming.asc</code>, <code>timings.asc</code>, <code>updatedAt.asc</code> or <code>updatedAt.desc</code>. </li>
<li><code>filters</code> : Query string representing filters to apply to the request. To ensure it works properly and avoid breaking the shortcode, you should urlencode the query string. You can do so via a simple tool like <a href="https://www.urlencoder.org/fr/" rel="nofollow ugc">https://www.urlencoder.org/fr/</a></li>
<li><code>links</code> : Accepts <code>oa</code> or an empty string. If set to <code>oa</code>, event links will point to events pages on https//openagenda.com instead of local pages.</li>
</ul>
<code>[openagenda_filter_relative]</code>
Allows to filters past or upcoming events. It takes no parameters.
<code>[openagenda_filter_search]</code>
Displays a search field. It takes the following parameters :
<ul>
<li><code>placeholder</code> : text field placeholder.</li>
</ul>
<h3>Customization</h3>
Templates for the list of events and individual events can be customized in your child theme.
If you’re not already using a child theme, it is recommended to create one.
<a href="https://developer.wordpress.org/themes/advanced-topics/child-themes/" rel="nofollow ugc">https://developer.wordpress.org/themes/advanced-topics/child-themes/</a>
Just create a folder named <code>openagenda/</code> in your child theme, then copy and paste the template you wish to override from the plugin’s <code>templates/</code> folder.
Here is a list of templates you can find in the plugin’s <code>templates/</code> folder :
<ul>
<li><code>event-loop.php</code> : main wrapper for list view and single event view. Displays exports button and pagination at the top and bottom. </li>
<li><code>list-header.php</code> : contains the total number of events and active filters display.</li>
<li><code>event.php</code> : template used to display the event information on list views.</li>
<li><code>single-event.php</code> : template used to display the event information on single event views.</li>
<li><code>event-location.php</code> : template used to display the location information on single event views.</li>
<li><code>event-additional-fields.php</code> : template used to the list of additional fields on single event views.</li>
<li><code>preview-loop.php</code> : main wrapper for the preview widget and shortcode.</li>
</ul>
The <code>legacy/</code> folder contains templates used prior to version 3.0.0. If you updated the plugin and notice issues on your frontend, that’s probably because your site used legacy templates. Please try and check the Use legacy templates checkbox in the settings page.
The plugin provide convenient template tags for you to display event data in the <code>inc/template-tags.php</code> file. Feel free to define your own in your theme.
The plugin also provides many hooks to allow you to customize the html output or other various data.
<h3>Usage of third party services and copyright information</h3>
This plugin displays data hosted and provided by <a href="https://openagenda.com" rel="nofollow ugc">https://openagenda.com</a>. By using this plugin, you accept and agree with OpenAgenda’s <a href="https://openagenda.zendesk.com/hc/fr/articles/201753991" rel="nofollow ugc">terms and conditions</a> and <a href="https://openagenda.zendesk.com/hc/fr/articles/360003182014" rel="nofollow ugc">privacy policy</a>. Please make sure to read them before using this plugin. Also, using this plugin DOES require an account at <a href="https://openagenda.com" rel="nofollow ugc">https://openagenda.com</a>, and an API key.
By default, maps displayed by this plugin use data from <a href="https://openstreetmap.org/" rel="nofollow ugc">https://openstreetmap.org/</a> and uses the <a href="https://leafletjs.com/" rel="nofollow ugc">leaflet JS library</a>. By using this plugin, you accept and agree with OpenStreetMap’s <a href="https://wiki.osmfoundation.org/wiki/Terms_of_Use" rel="nofollow ugc">terms of use</a>, <a href="https://wiki.openstreetmap.org/wiki/Acceptable_Use_Policy" rel="nofollow ugc">acceptable use policy</a> and <a href="https://wiki.osmfoundation.org/wiki/Privacy_Policy" rel="nofollow ugc">privacy policy</a>
The plugin provides optional integration with CloudImage. The integration requires to create an account at <a href="https://cloudimage.io" rel="nofollow ugc">https://cloudimage.io</a> and accept and agree their <a href="https://assets.scaleflex.com/Sales/Legal/Scaleflex+Services+Terms+and+Conditions+%5BFR%5D.pdf" rel="nofollow ugc">terms of use</a>.
Icons used in the UI are <a href="https://genericons.com/" rel="nofollow ugc">Genericons</a>, licenced under the GPL 2.0.

OpenAgenda

I find this plugin quite neat indeed. Any wordpress user can easily add dedicated agenda pages powered by the OpenAgenda platform.

Little disclosure: I work for OpenAgenda.

Simple OpenAgenda integration

Display calendars from https://openagenda.com on your site.

OpenAgenda for WordPress vs OpenAgenda