Create a div each month in wordpress loop - html

Question

I'm trying to create a list of posts that has a seperator displaying each month.
It's supposed to look something like this:
January 2018
- blog post
- blog post
Febuary 2018
- blog post
etc....
The code i'm using is a simple loop. I've tried to get the seperator working using the the_date() function and change its date format. But it still triggers for each day.
<?php
$args = array(
'post_type' => 'post',
'posts_per_page' => -1
);
$the_query = new WP_Query($args); if($the_query->have_posts()): while($the_query->have_posts()): $the_query->the_post();
?>
<?php if(!the_date('F Y','','',false) == ''){ ?>
<div class="seperator">
<?php the_time('F Y'); ?> //echo month and year
</div>
<?php } ?>
<div class="post"> //the post content </div>
<?php endwhile; endif; wp_reset_query(); ?>
I don't really know what code to use to make it only trigger each month.

Answer 1

You should try something like this:
<?php
$args = array(
'post_type' => 'post',
'posts_per_page' => -1,
'orderby' => 'date',
'order' => 'DESC'
);
$the_query = new WP_Query($args); if($the_query->have_posts()): while($the_query->have_posts()): $the_query->the_post();
if ($lastMonth && the_date('mm') !== $lastMonth) {
// new month
}
$lastMonth = the_date('mm');
?>
This way, in each iteration you're setting the month of publication in the lastMonth variable. The next iteration, you're checking if the month of publication is equal to the previous one. If not, you're in a new loop and you can insert your seperator.