Pronamic Events is een evenementen plugin voor WordPress. We hebben de plugin een aantal jaren geleden gelanceerd en gebruiken het nog steeds voor veel projecten. De plugin vereist op dit moment nog wel een aantal aanpassingen aan je thema. Dit is erg eenvoudig dankzij de verschillende template functies. In deze blog laat ik zien hoe je een countdown toevoegt aan je events.
Onlangs heb ik een soortgelijke countdown geïntegreerd in de website van TT Circuit Assen. In dit voorbeeld ga ik uit van een situatie waarbij alle events op een archiefpagina een countdown krijgen. Allereerst maken we een archief bestand voor de Pronamic Events plugin. Noem deze archive-pronamic_event.php. Dat ziet er als volgt uit:
Deze archief pagina toont de laatste events in een ongeordende lijst. We tonen de titel en de samenvatting van een event. Daarnaast hebben we een inline span element toegevoegd die wordt gebruikt voor het tonen van de countdown. Kijk voor een volledige lijst van de Pronamic Events functies op de plugin pagina.
Countdown plugin
Je zou zelf een countdown plugin kunnen schrijven. Er zijn echter meer dan genoeg geschikte jQuery oplossingen. In dit voorbeeld gebruik ik jQuery.countdown. Een compacte en eenvoudige plugin met een goede documentatie. Met wp_enqueue_script voeg je dit script toe aan je WordPress website.
Configuratie
Vervolgens kunnen we de countdown activeren voor de events. Hiervoor maken we gebruik van het HTML5 data attribuut. Gebruik hiervoor onderstaande code:
Voilá, al je events op een archief pagina bevatten nu een countdown. Heb je zelf nog ideeën om Pronamic Events uit te breiden? Ik hoor ze graag.