Deze en de volgende posts in de serie Custom post types maken zijn niet per se nodig om custom post types te maken, maar gaan dieper in op de voorbeelden die in de vorige posts zijn gemaakt. In deze post laat ik je zien hoe je de posts van de custom post type ‘event’ (evenementen) ordent op startdatum en hoe je evenementen in het verleden verbergt.

Maak je net als in deze serie een post type voor evenementen, dan kan je met een plugin als Advanced Custom Fields datum-velden aan je posts toevoegen. Weet je nog niet hoe, lees dan voordat je verder gaat deze post in de serie.

In de vorige post heb ik met een ‘custom query’ ik een standaard loop gemaakt welke de laatste 6 posts van de custom post type toont.

<?php
/**
 * Show '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;
?>

Deze code is prima wanneer je geen custom post type hebt waarbij de posts aan de hand van bepaalde post metadata (in dit geval de waardes van de twee extra datumvelden die ik in het tweede deel van deze serie heb toegevoegd). Nu ga ik een stapje verder, door:

  • De evenement-posts te ordenen op startdatum waarbij het eerstvolgende evenement als eerste getoond wordt, het evenement daarna als tweede etc.
  • Evenementen die meerdere dagen duren, en die nog niet voorbij zijn ook te tonen.
  • Evenementen uit het verleden te verbergen.
  • De start- en einddatum bij de evenementen te tonen.

Om dit voor elkaar te krijgen moet de standaard query worden aangepast, zodat de loop gefilterd wordt aan de hand van een array van extra parameters. Deze array voeg je vervolgens met een variabele toe aan de $args array.

<?php
/**
 * Show a loop of events: 
 * - ordered by start date
 * - show ongoing events
 * - hide past events
 */
// Get todays date
$today = current_time('Ymd');
			
// Set extra meta query arguments
$meta_query_args = array(
	'relation'	=>   'OR',
	
	// Set the event start date array
	array(
		'key'		=> 'event_date_start',
		'compare'	=> '>=',
		'value'		=> $today,
		'type'		=> 'DATE'
	),
			
	// Set the event end date array
	array(
		'key'		=> 'event_date_end',
		'compare'	=> '>=',
		'value'		=> $today,
		'type'      => 'DATE'
	),
);
			
$args = array (
	'post_type'			=> 'event',
	'posts_per_page'   	=> '6',
	'meta_key'			=> 'event_date_start',
	'orderby'			=> 'meta_value',
	'order'				=> 'ASC',
	'meta_query'		=> $meta_query_args,
);
			
$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>
			<div class="event-date">
				<?php echo esc_html( get_field( 'event_date_start' ) ) . ( get_field( 'event_date_end' ) ? ' - ' . esc_html( get_field( 'event_date_end' ) ) : ''); ?>
			</div>
			<?php echo esc_html( get_the_excerpt() );  ?>
		</li>
	<?php
		endwhile;
		wp_reset_postdata();
	?>
	</ul>
<?php
else :
	echo esc_html( 'No events to display!', 'your-text-domain' );
endif;
?>

In bovenstaande code wordt er eerst gekeken naar de datum van vandaag ($today). Vervolgens wordt er in de variable $meta_query_args een array geplaatst die de datum van de extra velden (met als keys: event_start_date en event_end_date) vergelijkt met de datum van vandaag.

Is de waarde van event_start_date groter dan of gelijk aan (>=) vandaag, toon dan deze posts. Is de waarde van event_end_date groter dan of gelijk aan (>=) vandaag toon dan ook deze posts. Op die manier toon je dus niet alleen evenementen in de toekomst, maar ook meerdaagse evenementen waarvan $today binnen het datumbereik van event_start_date en event_end_date ligt.

In de div <div class="event-date"></div> in de loop tonen we ook de start- en eventuele einddatum van het evenement:

<?php echo esc_html( get_field( 'event_date_start' ) ) . ( get_field( 'event_date_end' ) ? ' - ' . esc_html( get_field( 'event_date_end' ) ) : '' ); ?>

Deze code echo’t als eerste de waarde van het event_start_date veld (echo esc_html( get_field( 'event_date_start' )). Dit veld heeft sowieso een waarde omdat het bij een post verplicht is om een startdatum te kiezen.

De code na de punt controleert of er een einddatum (get_field( 'event_date_end' )) bij het evenement is ingevoerd. Dit veld is niet verplicht, dus kan de waarde hiervan leeg zijn. Heeft dit veld wel een waarde, dan wordt er ook een streepje met daar omheen spaties getoond tussen de start- en einddatum.

Het controleren of er een einddatum is ingevoerd wordt gedaan middels een ternary operator, wat in feite hetzelfde is als een if-statement, maar dan korter. Dus:

<?php echo esc_html( get_field( 'event_date_start' )) . ( get_field( 'event_date_end' ) ? ' - ' . esc_html( get_field( 'event_date_end' ) ) : '' ); ?>

Is in feite hetzelfde als:

<?php
	echo esc_html( get_field( 'event_date_start' ) );
	if ( get_field( 'event_date_end' ) ) {
		echo ' - ' . esc_html( get_field( 'event_date_end' ) );
	}
?>

In de tweede post in deze serie (Extra velden toevoegen aan custom post types met Advanced Custom Fields (ACF)) had ik voorgesteld dat je voor het testen van de query een aantal evenementen aan zou moeten maken, inclusief:

  • één of meerdere evenementen met een startdatum in het verleden,
  • één of meerdere evenementen waarvan de startdatum in het verleden ligt en de einddatum in de toekomst,
  • én evenementen waarvan de startdatum in de toekomst ligt,

dan zou je wanneer je de archiefpagina of pagina-template waarop je agenda getoond wordt ververst, het resultaat moeten zien. Evenementen die voorbij zijn worden niet getoond, en evenementen die nu aan de gang zijn of in de toekomst liggen worden getoond, met het eerstvolgende evenement als eerste, en het evenement dat het meest in de toekomst ligt als laatste.

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?