WordPress kalender gebouwd voor Pen.nl

Iets meer dan een maand geleden had ik besloten om van scratch een evenementen kalender op te bouwen. Rede hiervoor was dat er geen enkele bruikbare of goed werkende kalender bestond die aan onze eisen voldeed. In de afgelopen jaren hadden we een aantal evenementen kalenders getest, maar die gaven alleen maar conflicten met de WordPress website, waardoor we de kalender meermaals hadden moeten verwijderen. Na het installeren van de laatste evenementen kalender welk niet werkte, had ik maar besloten om dan maar een eigen evenementen kalender te bouwen voor WordPress.

Wat zijn mijn eisen voor de evenementen kalender?

Voor het bouwen van mijn eigen evenementen kalender in WordPress had ik een lijstje gemaakt met punten waaraan deze moet voldoen. Eigenlijk zijn dit allemaal basis eigenschappen welk een kalender weergave altijd moet hebben. Voldoet een evenementen kalender niet aan een van deze punten dan is de plugin überhaupt niet bruikbaar. Mijn eisen waren als volgt:

De invoer van de evenementen verloopt via de Google Calendar. Hierin kunnen evenementen worden aangemaakt en beheerd. Ook is het mogelijk om aan elk evenement een afbeelding te koppelen. Al deze informatie word geïmporteerd binnen de WordPress plug-in. Om vervolgens getoond te worden in een lijst en detail weergave op de website.

Tijd om te starten met bouwen

Nu heb ik zelf weinig tot geen ervaring met het maken plug-ins voor WordPress. Een paar jaar terug had ik al eens een widget geschreven voor het tonen van de weersverwachting. Dit betrof een simpel stukje code welk alleen maar een stukje HTML renderde binnen de site. Voor het bouwen van een evenementen kalender was wel wat meer kennis van WordPress nodig om dit te realiseren. Gelukkig heeft ChatGPT mij enigszins op weg kunnen helpen met het opzetten van de basis voor. Zo heb ik het voor elkaar gekregen om de widget te kunnen toevoegen als block zijnde als wel via een short_code binnen de pagina.

De volgende stap was het werkend krijgen van de Google Calendar koppeling met mijn code. Het idee hiervoor was om gebruik te maken van de iCal file welk door Google Calendar werd aangeboden. Voor het uitlezen van dit bestand naar een bruikbaar data object had ik wel wat problemen. Aanvankelijk had ik een een importer gegenereerd via ChatGPT, maar deze was alles behalve bruikbaar. Het iCal formaat laat zich niet heel makkelijk uitlezen. Na wat zoeken een script gevonden dat wel naar verwachting functioneerde en deze opgenomen binnen de evenementen kalender widget.

Voor het toevoegen van afbeeldingen had ik een trucje gevonden. Wanneer je een afbeelding binnen Google Calendar toevoegt word deze toegevoegd aan de Google Drive omgeving. Hiervan word een link meegezonden binnen de iCal bestand welk ik volgens download en verklein via de WordPress omgeving. Om deze hierna te tonen in de lijst en detail weergave van de evenementen agenda.

De livegang

Nadat ik alle code had geschreven en getest, was het tijd om live te gaan met de plugin. Tijdens de eerste dagen kwamen er nog wat kinderziektes boven water, maar deze zijn allemaal opgelost. De evenementen agenda draait nu al meer dan een maand naar tevredenheid. Mocht je hem willen bekijken dan is deze widget terug te vinden op de website De Digitale Stad Nieuwegein. (https://www.pen.nl/evenementen)