Dit is post 2 van 2 in de serie Custom post types maken
  1. Eigen custom post types maken in WordPress zonder plugin
  2. Extra velden toevoegen aan custom post types met Advanced Custom Fields (ACF)

In deze post laat ik je zien hoe je met de plugin Advanced Custom Fields extra velden toevoegt aan je custom post types. In de vorige post heb ik de custom post type Evenementen aangemaakt. Nu voeg ik hier een begin- en (optioneel) einddatumveld aan toe. Die kunnen we later in de paginatemplates niet alleen gebruiken om de data van evenementen te tonen, maar ook om de berichten geordend op datum in de loop op je evenementen archiefpagina’s te tonen.

ACF downloaden en installeren

Om extra velden aan custom post types toe te voegen gebruik ik de gratis plugin Advanced Custom Fields (ACF). Dit is een van de meestgebruikte plugins om velden aan pagina’s en posts toe te voegen. Je kan hiermee gebruik maken van veel verschillende typen velden, zoals tekstvelden, datepickers, afbeeldingen, Google Maps etc.

Om te kunnen beginnen met het toevoegen van extra velden moet je er dus eerst voor zorgen dat je ACF installeert en activeert op je website.

Extra velden toevoegen aan de custom post type

Heb je ACF geïnstalleerd en geactiveerd? Dan zie je in het menu in de WP Admin een extra kopje Extra velden. Je kan hiermee verschillende groepen velden aanmaken. Voor de evenementen maken we een nieuwe groep aan waarin we alle velden gerelateerd aan de custom post type evenementen toevoegen.

Een nieuwe groep extra velden aanmaken

Klik op Nieuwe groep in het submenu wat verschijnt wanneer je met je muis op Extra velden gaat staan.

Extra velden aan posts en pagina's toevoegen met Advanced Custom Fields (ACF)

In het scherm wat dan verschijnt zie je een aantal metaboxes waarmee je niet alleen velden kan toevoegen, maar ook kan bepalen waar en hoe deze velden getoond moeten worden in het beheer van de website. Heb je nog geen idee wat dit allemaal betekent? Geen zorgen, het wordt in de loop van deze tutorial vanzelf duidelijk.

Een nieuwe groep voor extra velden aanmaken in Advanced Custom Fields (ACF)

Geef allereerst de groep een naam, bijvoorbeeld ‘Evenement informatie’. Dit is de koptekst die later als titel wordt getoond in de metabox die met het aanmaken van deze groep wordt toegevoegd aan het bewerkscherm van een evenement.

Extra velden toevoegen aan de groep

De metabox onder de titel is de plek waar extra velden kunnen worden toegevoegd aan de groep. Ik laat je in deze tutorial zien hoe je een begin- en einddatumveld toevoegt.

Je kan natuurlijk ook andere velden toevoegen aan je posts, denk in het geval van evenementen bijvoorbeeld aan velden voor tijden en locatie. Voor deze tutorial beperk ik me echter tot de datumvelden; de werkwijze voor het toevoegen van andere (typen) velden is praktisch hetzelfde.

Klik op de blauwe knop + Nieuw veld in de metabox onder de titel. Er verschijnt een nieuw blok waarin je het veld kan aanmaken en configureren. Bij elke optie staat een korte uitleg wat deze inhoudt.

Een nieuw veld aanmaken in een groep in Advanced Custom Fields (ACF)

(Start)datumveld toevoegen

Het eerste veld dat ik aanmaak is de (start)datum van een evenement. Dit is een veld van het type Datumprikker, waarmee je in het beheer eenvoudig een datum kan kiezen middels een datumprikker.

Geef de velden de volgende waarden:

Veld label: (Start)datum (heb je geen einddatumveld, vul dan Datum in)
Veld naam: event_date_start (dit is de ‘key’ van het veld welke we later bij het tonen van de posts op de website nodig hebben)
Soort veld: Datumprikker (onder het kopje jQuery in de dropdown)
Instructies: Dit veld is niet verplicht, maar hier kan je eventueel instructies kwijt voor bijvoorbeeld klanten die de website moeten gaan beheren.
Verplicht: Ja (zonder (start)datum verschijnt dit veld later niet in de loop op de archiefpagina’s *)
Weergeven als: j F Y (optie Eigen invoer, dit is hoe de datum in het bewerkscherm van de post wordt getoond)
Output weergeven als: j F Y (optie Eigen invoer, dit is hoe de datum op de website wordt getoond *)
Week start op: Maandag
Conditionele logica: Dit veld kan je gebruiken om condities toe te voegen waaraan eventuele andere velden die je toevoegt moeten voldoen, wil het veld verschijnen. In dit voorbeeld voegen we geen conditionele logica toe.
Veld attributen: Breedte: 50% (dit zodat de start- en einddatumvelden in de metabox naast elkaar komen te staan. Wil je geen einddatumveld, laat de breedte dan leeg.) Desgewenst kan je met de velden Class en ID nog extra classes en een ID toevoegen aan het veld.

* Het PHP-datumformat j F Y betekent dat de datum als volgt wordt weergegeven: 1 januari 2020. Natuurlijk kan je indien gewenst kiezen voor een andere PHP-datumformattering zoals 01-01-2020 (d-m-Y), of één van de andere standaard opties. Voor meer informatie over PHP-datumformattering, lees dan dit WordPress artikel op de WordPress support site.

Een nieuw veld aanmaken in een groep in Advanced Custom Fields (ACF)

(Start)datumveld toevoegen

Voer voor het toevoegen van een einddatum veld de stappen opnieuw uit vanaf Extra velden toevoegen aan de groep. Wil je geen einddatum veld, sla deze stap dan over.

De snelste manier om dit veld aan te maken is door het (start)datum veld te dupliceren. Dit doe je door met je muisaanwijzer op de blauwe titelbalk van het (start)datum veld te gaan staan, en te klikken op de optie Dupliceer.

Een veld dupliceren in Advanced Custom Fields (ACF)

De enige waarden die je in dit nieuwe veld moet aanpassen zijn:

Veld label: Einddatum
Veld naam: event_end_date
Verplicht: Nee

Een nieuw veld aanmaken in een groep in Advanced Custom Fields (ACF)

Veldengroep koppelen aan custom post type

Je hebt nu dus een start- en einddatumveld aangemaakt. Nu moeten ze nog worden gekoppeld aan de custom post type evenementen, zodat de velden ook daadwerkelijk in het bewerkscherm van een evenement tevoorschijn komen. Dat doe je door in de metabox Locatie (onder je velden metabox) te kiezen voor de opties:

Toon deze groep als: Post type gelijk is aan Event (of hoe je je post type dan ook hebt genoemd.)

Persoonlijk vind ik het ook fijn als de metabox met de datumvelden direct onder de titel en boven de WYSIWYG-editor van een evenement verschijnt. Kies hiervoor in de metabox Instellingen bij de optie Positie voor de optie Hoog (onder titel). Dit werkt overigens alleen wanneer je geen gebruik maakt van de Gutenberg-editor.

De positie van een Advanced Custom Fields (ACF) metabox aanpassen

Sla vervolgens je veldengroep op door in de metabox rechtsboven te klikken op de blauwe knop Publiceren. Je veldengroep is nu aangemaakt.

Een nieuw evenement aanmaken

Wanneer je een nieuw evenement aanmaakt door in het menu te klikken op Events > Add new.

Een nieuw evenement aanmaken

Je zal nu in het scherm onderaan (in het geval van de Gutenberg Editor) of bovenaan de zojuist aangemaakte velden zien.

Extra velden in de Klassieke Editor
Extra velden in de Klassieke Editor
Extra velden in de Gutenberg Editor
Extra velden in de Gutenberg Editor

Door op een van de datumvelden te klikken kan je middels een datumprikker (kalendertje) de data van het evenement invoeren of aanpassen.

Een datum kiezen in een extra veld

Vul bij meerdaagse evenementen ook de einddatum in. Heb je een evenement wat maar één dag duurt, laat dat veld dan leeg.

Voorzie het evenement verder van een titel en inhoud. Sla het evenement op wanneer je klaar bent met bewerken. Maak desgewenst nog meer evenementen aan.

Evenementen tonen op de website

Nu moeten de evenementen nog getoond worden op de website. Dit doen we door een loop toe te voegen aan nieuwe paginatemplates op de website. Hoe dit moet leg ik in de volgende post in deze serie uit.

Beoordeel deze post:

Gemiddeld: 0 / 5. Aantal beoordelingen: 0

Nog geen beoordelingen

Whoops! 😔

Zou je ons willen laten weten hoe we (deze post) kunnen verbeteren?