I am adapting a WP theme to manage it in future with Pinegrow. The theme uses a custom post type for ‘Events’. On the front end the Past Events will be arranged by year in an accordion. The code in the working example places the ‘year’ into the accordion heading and publishes relevant posts beneath it.
2018
01/01/2018 event post
31/03/2018 event post
2017
01/01/2017 event post
31/03/2017 event post
2016
01/01/2016 event post
31/03/2016 event post
Here’s an existing example I have put together without Pinegrow - http://christoph-richter.com/dev/events/ - this is the archive-events.php in full below
With Pinegrow I have successfully created Custom Post Types (and pulled in Advanced Custom Fields) but I am stuck on how i should add the code that specifies the date for the year headings (e.g. 2018, 2017, 2016 etc). Any advice would be welcome! It should look something like this…
<?php
// we get all events which are scheduled to be published in the future
$args = array(
'post_type' => 'events',
'posts_per_page' => -1,
'post_status' => 'future',
'orderby' => 'date',
'order' => 'ASC'
);
$posts = new WP_Query($args);
if( $posts->have_posts() ): while( $posts->have_posts() ) : $posts->the_post();
// here this piece of code adds the year heading , we need the year only once, so once we display the year we put in an array so on each iteration we check if it's already displayed and in the array , if not we print the year.
$year = get_the_date( 'Y' );
if(array_search($year, $years)===false){
$years[] = $year;
?>
<strong><?php echo $year; ?></strong>
<?php
}
?>
Full template file for ‘archive-events.php’ below for context
<?php
get_header();
?>
<!-- https://wordimpress.com/loop-through-categories-and-display-posts-within/ -->
<section >
<article class="container">
<?php
// the query to get all events which has a date of up to 20 days before current date
$args = array(
'post_type' => 'events',
'posts_per_page' => -1,
'post_status' => 'publish',
'orderby' => 'date',
'order' => 'ASC',
'date_query' => array(
array(
'after' => '20 days ago'
)
)
);
$posts = new WP_Query($args);
$years = [];
if( $posts->have_posts() ): while( $posts->have_posts() ) : $posts->the_post();
// here this piece of code adds the year heading , we need the year only once, so once we display the year we put in an array so on each iteration we check if it's already displayed and in the array , if not we print the year.
$year = get_the_date( 'Y' );
if(array_search($year, $years)===false){
$years[] = $year;
?>
<strong><?php echo $year; ?></strong>
<?php
}
?>
<div class="row">
<div class="col-xs-12 col-md-2">
<?php the_date('d M'); ?>
<?php the_field( 'event_end_date'); ?>
</div>
<div class="col-xs-12 col-md-2">
<a href="<?php the_field('event_name_link'); ?> target="_blank">
<?php the_field('event_name'); ?>
</a>
</div>
<div class="col-xs-12 col-md-2">
<a href="<?php the_field('event_location_link'); ?> target="_blank">
<?php the_field('event_location'); ?>
</a>
</div>
<div class="col-xs-12 col-md-6">
<?php the_field('event_details'); ?>
</div>
</div>
<hr style="border-color:#000" />
<?php endwhile; endif; ?>
</article>
<article class="container">
<?php
// we get all events which has been scheduled to be published in the future
$args = array(
'post_type' => 'events',
'posts_per_page' => -1,
'post_status' => 'future',
'orderby' => 'date',
'order' => 'ASC'
);
$posts = new WP_Query($args);
if( $posts->have_posts() ): while( $posts->have_posts() ) : $posts->the_post();
// here this piece of code adds the year heading , we need the year only once, so once we display the year we put in an array so on each iteration we check if it's already displayed and in the array , if not we print the year.
$year = get_the_date( 'Y' );
if(array_search($year, $years)===false){
$years[] = $year;
?>
<strong><?php echo $year; ?></strong>
<?php
}
?>
<div class="row">
<div class="col-xs-12 col-md-2">
<?php the_date('d M'); ?>
<?php the_field( 'event_end_date'); ?>
</div>
<div class="col-xs-12 col-md-2">
<a href="<?php the_field('event_name_link'); ?> target="_blank">
<?php the_field('event_name'); ?>
</a>
</div>
<div class="col-xs-12 col-md-2">
<a href="<?php the_field('event_location_link'); ?> target="_blank">
<?php the_field('event_location'); ?>
</a>
</div>
<div class="col-xs-12 col-md-6">
<?php the_field('event_details'); ?>
</div>
</div>
<hr style="border-color:#000" />
<?php endwhile; endif; ?>
</article>
<article class="container pastConcerts">
<div class="accordion">
<h2>Past contests</h2>
<?php
// previously we queried for all events which were created up to 20 days before current date, now we get all events created even before it, the old events.
$args = array(
'post_type' => 'events',
'posts_per_page' => -1,
'post_status' => 'publish',
'orderby' => 'date',
'order' => 'DESC',
'date_query' => array(
array(
'before' => '20 days ago'
)
)
);
$years = [];
$i = 0;
$posts = get_posts( $args ); // get all posts matching the above query
foreach ( $posts as $post ) : setup_postdata( $post );
// here this piece of code adds the yer heading , we need the year only once, so once we display the year we put in an array so on each iteration we check if it's already displayed and in the array , if not we print the year.
$year = get_the_date( 'Y' );
if(array_search($year, $years)===false){
$years[] = $year;
?>
<strong class="year"><?php echo $year; ?></strong>
<div class="content">
<?php
}
?>
<div class="row">
<div class="col-xs-12 col-md-2">
<?php the_date('d M'); ?>
<?php the_field( 'event_end_date'); ?>
</div>
<div class="col-xs-12 col-md-2">
<a href="<?php the_field('event_name_link'); ?> target="_blank">
<?php the_field('event_name'); ?>
</a>
</div>
<div class="col-xs-12 col-md-2">
<a href="<?php the_field('event_location_link'); ?> target="_blank">
<?php the_field('event_location'); ?>
</a>
</div>
<div class="col-xs-12 col-md-6">
<?php the_field('event_details'); ?>
</div>
</div>
<hr style="border-color:#000" />
<?php
// we added a div with class name content above, so we have to close the div tag after we print all events under a single year.
// the following code checks if the current entry is the last entry or the next entry has a different year than the current, if so we are good to close the current div and add the next set of events under the following year.
$i++;
if(count($posts) == $i || array_search(get_the_date( 'Y' ,$posts[$i]->ID), $years)===false){
?>
</div>
<?php
}
endforeach;
wp_reset_postdata();
?>
</div>
</article>
</section>
<?php
get_footer();
?>
Thank you!