In de vorige posts uit deze serie heb ik je uitgelegd hoe je een custom post type (in dit geval de post type ‘event’) maakt zonder behulp van een extra plugin. Nu is het tijd om de evenement-posts op je website te tonen.

Ik laat zien hoe je een lijst van posts van een custom post type weer kan geven op zowel archiefpagina’s (bijvoorbeeld op jouwwebsite.nl/agenda), als individuele post-pagina’s (bijvoorbeeld op jouwwebsite.nl/agenda/kerstmarkt). Als bonus laat ik je zien hoe je evenementen op je archiefpagina’s ordent op datum en hoe je evenementen die in het verleden liggen verbergt.

3 Manieren om custom post types te tonen in WordPress

Om evenementen te kunnen tonen moet je er allereerst voor zorgen dat je een aantal evenement-posts hebt aangemaakt via de WP Admin. Heb je geen posts, dan wordt er natuurlijk ook niets getoond op de pagina.

Om de verschillende scenario’s waarin je in je code rekening mee houdt te kunnen testen, maak dan niet alleen eendaagse evenementen in de toekomst aan, maar ook bijvoorbeeld een evenement in het verleden en een meerdaags evenement met een startdatum in het verleden en een einddatum in de toekomst.

1. De standaard ‘archief-template’ gebruiken

In de eerste tutorial hebben we onze custom post type aangemaakt met de parameter has_archive ingesteld op true, waardoor het automatisch mogelijk is om custom post types archiefpagina-templates weer te geven.

WordPress gebruikt een template-hiërarchie om verschillende typen content weer te geven, en voor custom post types kijkt het naar de volgende templates:

archive-[posttype-naam].php (voor archiefpagina’s)
single-[posttype-naam].php (voor single post pagina’s)

Als deze templates niet bestaan in het thema, dan zoekt WordPress naar de algemene templates:

archive.php
single.php

Als zelfs deze templates niet bestaan, dan schakelt WordPress automatisch over naar de index.php template.

SEO-vriendelijke permalinks instellen

Om van de standaard pagina-templates gebruik te kunnen maken moet je SEO-vriendelijke permalinks hebt instellen. Ga in de WP Admin naar Instellingen > Permalinks en controleer of je bij Algemene Instellingen de optie Berichtnaam hebt gekozen. Zo niet, doe dit dan alsnog en sla de wijzigingen op.

SEO-vriendelijke permalinks instellen voor je WordPress website

Stel je geen SEO-vriendelijke permalinks in, dan ziet de URL van de archiefpagina voor de custom post type die je hebt aangemaakt er bijvoorbeeld zo uit: www.voorbeeld.nl/?post_type=events. Stel je wél SEO-vriendelijke permalinks in, dan ziet je URL er door het 'rewrite' argument ('rewrite' => array( 'slug' => __( 'agenda', 'your-text-domain' ) ), dat je hebt gebruikt er zo uit: www.voorbeeld.nl/agenda. Je kan deze pagina voor je bezoekers bereikbaar maken door deze als menu-item aan je website-menu toe te voegen.

Custom post type archiefpagina aan het menu toevoegen

Ga in de WP Admin naar Weergave > Menu’s. Doordat in de eerste tutorial de opties voor archiefpagina’s voor de custom post type zijn ingeschakeld, is er in de linker kolom onder Menu items toevoegen de extra optie Events bij gekomen.

De custom post type archiefpagina toevoegen aan het WordPress menu

Klik op het tabblad Alles tonen, vink de optie All Events aan en klink vervolgens op de knop Aan menu toevoegen. De archiefpagina voor je custom post type wordt nu aan je menu toegevoegd. Je kan nu de naam van je menu-item aanpassen naar Agenda (dit is immers ook de slug van de pagina), en desgewenst het menu-item verplaatsen door het naar boven of beneden te verslepen.

De naam van je custom post type menu-item aanpassen

Als je menu naar wens is, vergeet niet de wijzigingen op te slaan. Wanneer je nu je website bezoekt zal je zien dat je Agenda-pagina met de posts die je eerder hebt aangemaakt via het menu is te bezoeken.

De custom post type archiefpagina bereikbaar via het menu in WordPress

Mijn custom post type verschijnt niet bij de menu-opties

Het kan zijn dat de opties voor het toevoegen van de archiefpagina niet direct zichtbaar is in de linkerkolom (zoals hierboven beschreven). Geen nood. Dit is eenvoudig op te lossen door rechtsboven te klikken op Scherminstellingen en vervolgens de optie Events aan te vinken.

De custom post type zichtbaar maken in het WordPress menu

2. Eigen pagina-templates gebruiken voor archief- en single post pagina’s

Afhankelijk van welk thema je gebruikt kan het zijn dat je niet tevreden bent over hoe je custom post type posts worden getoond op de archief- en/of single post pagina’s. Wat je dan kan doen is een nieuw bestand aanmaken in de root van je (child-)thema met de naam archive-[posttype-naam].php (vervang [posttype-naam] met de naam van je post type). In het geval van deze tutorials heeft het bestand de naam archive-events.php. Dit bestand zal nu automatisch door WordPress worden herkend als de pagina-template voor deze custom post type.

Wanneer je nu de pagina die je zojuist aan het menu hebt toegevoegd ververst in je browser zal je zien dat je een witte pagina krijgt; het pagina-template bestand wat je zojuist hebt aangemaakt is immers nog leeg. Je kan als startpunt het beste dan de inhoud van het bestand archive.php uit je (parent-)thema kopiëren en naar wens aanpassen.

Hetzelfde kan je doen met de single post pagina’s van de custom post type. Maak een nieuw bestand aan met de naam single-[posttype-naam].php (vervang [posttype-naam] met de naam van je post type). In het geval van deze tutorials heeft het bestand de naam single-events.php. Kopieer en plak de inhoud van het bestand single.php van je (parent-)thema in je zojuist aangemaakte bestand in je (child-)thema, en pas het naar wens aan.

3. Een custom query gebruiken

Een andere manier om custom post types te tonen, is door gebruik te maken van de class WP_Query en posts op te halen uit de database en te tonen middels een ‘loop’.

Deze ‘loop’ kan je bijvoorbeeld gebruiken om je custom post type posts weer te geven in een widget die je op pagina’s in een sidebar of footer kan plaatsen. Ook kan je een extra loop van custom post types toevoegen aan bijvoorbeeld je homepage.

Hieronder volgt een voorbeeld van een ‘standaard’ loop, waarmee de laatste 6 custom post type posts worden opgehaald, en waarvan de titel en excerpt (korte samenvatting) worden getoond.

<?php
/**
 * Show simple 'events' loop.
 */
$args = array(
	'post_type'			=> 'event',
	'post_status'		=> 'publish',
	'posts_per_page'	=> '6',
 );
 
$events = new WP_Query( $args );
if( $events->have_posts() ) : 
?>
	<ul>
		<?php
			while( $events->have_posts() ) :
				$events->the_post();
		?>
				<li>
					<h2><?php echo esc_html( get_the_title() ); ?></h2>
					<?php echo esc_html( get_the_excerpt() );  ?>
				</li>
		<?php
			endwhile;
			wp_reset_postdata();
		?>
	</ul>
<?php
else :
	esc_html_e( 'No events to display!', 'your-text-domain' );
endif;
?>

Let bij een nieuwe query op de volgende punten:

  1. Gebruik in je query het => symbool wanneer je de $args array maakt voor het WP_Query object maakt. Gebruik het -> symbool wanneer je een functie uit een class wil gebruiken (bijvoorbeeld $events->have_posts()).
  2. Gebruik de wp_reset_postdata() functie na endwhile; statement waneer je de loop afsluit. Hierdoor wordt de global $post variabele van de hoofd-query weer hersteld waneer je meerdere post-loops op je pagina hebt staan. Meer info over deze functie vind je hier.

Evenementen ordenen op datum

In de volgende en laatste post in deze serie laat ik zien hoe je voor de custom post type ‘event’ evenementen ophaalt, ordent op startdatum en evenementen uit het verleden verbergt.

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?