I have another site (https://coolmountainforge.com) that I use for my blacksmithing hobby. I have a list there for events that we have participated in or are planning to in the future. I have set that up as a custom post type for the events with custom fields for each event – including the even’t start date (and end date to for that matter). What I wanted to display on the site was a list of future events listed showing from today forward (dates ascending) and another list for past events from today into the past (dates descending).
Setting up the custom post type and the custom fields was easy enough. I like to use the Custom Post Type UI plugin to create custom post types and Advanced Custom Fields to create custom fields. I set up an archive template in my child theme (archive-events.php). I broke the template into two lists that would have different events and a different sort order. I had looked for an example that would show how to do this, what I though would be common, task but didn’t find anything that did quite what I wanted. I share this in hopes that it will help someone else.
<?php
/**
* The template for displaying the Event Archive page.
*/
get_header();
?>
<section id="primary" class="content-area">
<main id="main" class="site-main">
<div id="post-wrap">
<header class="entry-header">
<h2 class="entry-title"><?php _e( 'Upcoming Events' ); ?></h2>
</header>
<?php
// get today's date
$today = date( 'Y-m-d' );
// get posts
$futureposts = get_posts(array(
'post_type' => 'events',
'posts_per_page' => -1,
'meta_key' => 'event_date_start',
'meta_value' => date('Y-m-d'),
'orderby' => 'meta_value',
'order' => 'ASC',
'meta_compare' => '>=',
'value' => $today,
'type' => 'DATE',
));
if( $futureposts ): ?>
<ul class="events-list">
<?php foreach( $futureposts as $post ) : setup_postdata( $post ); ?>
<li>
<div class="entry-content">
<?php the_field( 'event_date_start' ); ?>
<?php if( get_field( 'event_date_end' ) ) :
echo " - ";
the_field( 'event_date_end' );
endif; ?>
<br />
<span class="event-title"><?php the_title(); ?></span>
<br />
<?php the_field( 'event_location' ); ?>
</div>
</li>
<?php wp_reset_postdata(); ?>
<?php endforeach; ?>
</ul>
<? else: ?>
<p><?php _e( 'No upcoming events are currently on the calendar.' ); ?></p>
<?php endif; ?>
<hr />
<header class="entry-header">
<h2 class="entry-title"><?php _e( 'Past Events' ); ?></h2>
</header>
<?php
// get posts
$pastposts = get_posts(array(
'post_type' => 'events',
'posts_per_page' => -1,
'meta_key' => 'event_date_start',
'meta_value' => date('Y-m-d'),
'orderby' => 'meta_value',
'order' => 'DESC',
'meta_compare' => '<',
'value' => $today,
'type' => 'DATE',
));
if( $pastposts ): ?>
<ul class="events-list">
<?php foreach( $pastposts as $post ) : setup_postdata( $post ); ?>
<li>
<div class="entry-content">
<?php the_field( 'event_date_start' ); ?>
<?php if( get_field( 'event_date_end' ) ) :
echo " - ";
the_field( 'event_date_end' );
endif; ?>
<br />
<span class="event-title"><?php the_title(); ?></span>
<br />
<?php the_field( 'event_location' ); ?>
</div>
</li>
<?php wp_reset_postdata(); ?>
<?php endforeach; ?>
</ul>
<? else: ?>
<p><?php _e( 'No past events are currently on the calendar.' ); ?></p>
<?php endif; ?>
</div>
<!-- <?php the_posts_pagination(); ?> -->
</main><!-- #main -->
</section><!-- #primary -->
<?php get_footer(); ?>
