Wordpress Timeline Show post Monthly - php

Question

I am fetching data through custom post type and category. I have added 12 category Jan to Dec and Jan has 1 posts Feb have 2 post
What I am struggling to do on January post the 2 circle is showing on the left I want only one January Circle rest of the January post under the circle.
Can you please how can i put check on category?
here is the site http://novartis.portlandvault.com/timeline/
Thanks
<div id="timeline">
<?php
//Define your custom post type name in the arguments
$args = array('post_type' => 'timeline', 'order' => 'asc' );
//Define the loop based on arguments
$loop = new WP_Query( $args );
//Display the contents
while ( $loop->have_posts() ) : $loop->the_post();
$thumb = wp_get_attachment_url( get_post_thumbnail_id($post->ID, 'large') );
$category = get_the_terms($id, 'timeline_categories');
?>
<div class="timeline-item">
<div class="timeline-icon">
<div class="timeline-month">
<?php echo $category[0]->name;?>
</div>
</div>
<div class="timeline-content right">
<h2>
<?php the_title(); ?>
</h2>
<p>
<?php echo the_content(); ?>
</p>
<div class="timeline_img">
<img src="<?php echo $thumb; ?>" class="img-responsive">
</div>
</div>
</div>
<?php endwhile;?>
</div>
<!-- Timeline ends here -->

Answer 1

I am not sure using categories is the best way to do this. You are limiting yourself to one years worth of data. I would suggest actually using the post date to separate the posts, then your code could look something like this.
<div id="timeline">
<?php
//Define your custom post type name in the arguments
$args = array('post_type' => 'timeline', 'order' => 'asc' );
//Define the loop based on arguments
$loop = new WP_Query( $args );
//Display the contents
while ( $loop->have_posts() ) : $loop->the_post();
$thumb = wp_get_attachment_url( get_post_thumbnail_id($post->ID, 'large') );
$category = get_the_terms($post->ID, 'timeline_categories');
?>
<section id="<?php echo $post->ID; ?>">
<?php
if( $loop->current_post === 0 ) {
$current_quarter = $category[0]->name; ?>
<div class="quarterlyheading">
<?php echo $current_quarter; ?>
<div class="quarterlinebreak"><hr></div>
</div>
<?php } else {
$post_quarter = $category[0]->name;
if($current_quarter != $post_quarter) { ?>
<div class="quarterlyheading">
<?php echo $post_quarter; ?>
<div class="quarterlinebreak"><hr></div>
</div>
<?php }
}
$current_quarter = $post_quarter;
?>
<div class="timeline-item">
<?php
if( $loop->current_post === 0 ) {
$current_month = get_the_time('M'); ?>
<div class="timeline-icon">
<div class="timeline-month">
<?php echo $current_month; ?>
</div>
</div>
<?php } else {
$post_month = get_the_time('M');
if($current_month != $post_month) { ?>
<div class="timeline-icon">
<div class="timeline-month">
<?php echo $post_month; ?>
</div>
</div>
<?php }
}
$current_month = $post_month;
?>
<div class="timeline-content right">
<h2>
<?php the_title(); ?>
</h2>
<p>
<?php echo the_content(); ?>
</p>
<div class="timeline_img">
<img src="<?php echo $thumb; ?>" class="img-responsive">
</div>
</div>
</div>
</section>
<?php endwhile;?>
</div>