Group CPT posts by Custom Field

  • Resolved bibliofille

    (@bibliofille)


    8 years ago

    I’ve set up a custom post type for events and on the archive-events.php template, and I am styling the posts in a grid. I’m trying to figure out how to separate the posts so that those in February 2017 will be grouped under an <h5> label that says “February 2017”, and all events in March 2017 will be grouped under an <h5> tag that says “March 2017,” etc.

    I used ACF for the custom fields, and right now each event allows for a “Event Month” text field and an ACF date picker field.

    Any help would be much appreciated!

    Here is a link to the current test page: https://test.cgla.net/events/

    Here is the code for my archive-events.php template:

    <?php
/*
 * Template Name: Events Archive 
*/
?>

<?php get_header(); ?>

			<div id="content">

				<div id="inner-content" class="wrap cf">

					<main class="main" class="m-all t-2of3 d-5of7 cf" role="main" itemscope itemprop="mainContentOfPage" itemtype="https://schema.org/Blog">

						<h1 class="archive-title h2"><?php post_type_archive_title(); ?></h1>

						<?php if( get_field('events_archive_gala_display', 'option') ): ?>
	
	<?php get_template_part( 'events-gala' );?>
	
<?php endif; ?>

						<div class="event-container">

							

							<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

							<div id="post-<?php the_ID(); ?> event-item" <?php post_class( 'cf' ); ?>>

									<h4><?php the_title(); ?></h4>
									
									<p><?php the_field('event_date'); ?> | <?php the_field('event_start_time'); ?> - <?php the_field('event_end_time'); ?></p>

									<p><?php the_field('event_description'); ?> <a href="mailto:<?php the_field('event_rsvp_email'); ?>"><?php the_field('event_rsvp_email'); ?></a></p>

											
										<h5><?php
$categories = get_the_category();
$separator = ' ';
$output = '';
if($categories){
    foreach($categories as $category) {
if($category->name !== 'open to public') 
{
        $output .= $category->cat_name.$separator; }
    }
echo trim($output, $separator);
}
?>
</h5>

<?php if( get_field('add_calendar_link') ): ?>
	<a href="<?php the_field('add_calendar_link'); ?>" class="calendar-link" target="_blank"><span class="plus-icon"><?php get_template_part('library/images/inline', 'plus.svg'); ?></span></a>
<?php endif; ?>

</div>
							<?php endwhile; ?>

						

							<?php endif; ?>

						

					</div>

						</main>

				

			</div>

<?php get_footer(); ?>

    I used this function to re-order the posts in ascending chronological order based on the event date (ACF date picker field): 

    //Re-order Events archive posts in ascending chronological order

function wpex_order_events( $query ) {

  // exit out if it's the admin or it isn't the main query
  if ( is_admin() || ! $query->is_main_query() ) {
    return;
  }
  // order custom post type archives by metafield in ascending order
  if ( is_post_type_archive('events') ) {
    $query->set( 'orderby', 'meta_value');
    $query->set('meta_key', 'event_date');
     $query->set( 'order' , 'ASC' );

    return;
  }
}
add_action( 'pre_get_posts', 'wpex_order_events');
Viewing 5 replies - 1 through 5 (of 5 total)
  • csloisel

    (@csloisel)

    Well it seems like you have the query figured out, so is the problem that you want to avoid duplication of the date field on the page?

    Thread Starter bibliofille

    (@bibliofille)

    No, I’m trying to figure out how to separate the posts in the grid under an <h5> that outputs only the month and year.

    If I could attach a screenshot from the mockup, that’d be easier.

    csloisel

    (@csloisel)

    I would normally do something like this:

    
<?php

global $wp_query; // Declare use of global query for reference
$prev_date = false; // Store previous date outside of loop for reference

if ( have_posts() ) : while ( have_posts() ) : the_post();

	// Get the date value
	$date = get_field( 'event_date' );

	// Check if we are in a new month
	if ( $date !== $prev_date ) :

		// If not the first post in loop
		if ( $wp_query->current_post !== 0 ) :

			// Close previous month grid container ?>
			</div>

		<?php endif; ?>

		<?php // Print date header ?>
		<h5><?php echo $date; ?></h5>

		<?php // Start a new month grid container ?>
		<div class="month-grid-container">

	<?php endif; ?>

	<?php
	/**
	 * Do post output here
	 */
	?>

	<?php
	// Check if the last post in loop to close container
	if ( $wp_query->current_post + 1 === $wp_query->post_count ) : ?>
		</div>
	<?php endif; ?>

	<?php
	// Store date for reference
	$prev_date = $date; ?>

<?php endwhile; endif;
    Thread Starter bibliofille

    (@bibliofille)

    Thanks for the suggestion! Would I need to re-write my loop to work around this code or place it before or after my current loop?

    csloisel

    (@csloisel)

    The code I gave isn’t a drop in or replacement for your loop, it’s just to give you an idea of what the logic would look like. You will have to adapt it for your specific use case, for example I don’t know what containers you are using for your grid.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Group CPT posts by Custom Field’ is closed to new replies.