John Davidson

Message:

I'm trying to create an archive page for my blog posts that is sorted by the date that is added through an ACF datepicker-field.

This is what I have so far:

$args = array(

'post_type'         =>  'post',

'posts_per_page'    =>  -1,

'orderby'           =>  'meta_value',

'order'             =>  'DESC',

'meta_key'          =>  'datum_artikel',

'meta_value'        =>  date('Ymd',strtotime("today")),

'meta_compare'      =>  '<='

);



$query = new WP_Query( $args );



if ( $query->have_posts() ) {

    echo "<div class='posts'>";



        while ( $query->have_posts() ) {

            $query->the_post();



            $f = get_fields();

            $link = ($f['bericht_doorverwijzen'] ?? '' ? $f['bericht_doorverwijzen'] : get_the_permalink());

            $img_id = get_post_thumbnail_id();



            $date = $f['datum_artikel'];



            echo "<div class='post w-1/3'>";

                echo "<div class='postWrapper'>";



                    if(!empty($img_id)) {

                        $img = Images::get_image_resized($img_id, 397, 230, true);

                        echo "<a href='".$link."' title='Ga naar ".get_the_title()."'>";

                            echo '<picture class="img">';

                                echo '<img src="'.$img[0].'" alt="'.get_post_meta($img_id, '_wp_attachment_image_alt', true).'"/>';

                            echo '</picture>';

                        echo "</a>";

                    }



                    echo "<div class='content'>";

                        echo "<h2><a href='".$link."' title='Ga naar ".get_the_title()."'>".get_the_title()."</a></h2>";

                        if(!empty($date)) {

                            echo "<p class='date'>". $date ."</p>";

                        }

                        echo the_excerpt_max_charlength($charlength = 130);

                    echo "</div>";

                echo "</div>";

            echo "</div>";

        }

    echo "</div>";

}

wp_reset_postdata();

I found some examples online but none of them seem to work with my code. How can I add the name of the month between the posts when the month changes and can I create an extra navigation with all the months and an anchor so it jumps to the right posts?

---

My Answer:
To add the name of the month between the posts when the month changes, you can keep track of the current month while looping through the posts and compare it with the month of the current post. If they are different, you can output the name of the month before displaying the post.

Here's an updated version of your code with the month name added between posts when the month changes:

php
$args = array(
'post_type' => 'post',
'posts_per_page' => -1,
'orderby' => 'meta_value',
'order' => 'DESC',
'meta_key' => 'datum_artikel',
'meta_value' => date('Ymd',strtotime("today")),
'meta_compare' => '<='
);

$query = new WP_Query( $args );

if ( $query->have_posts() ) {
echo "

";

$current_month = '';
while ( $query->have_posts() ) {
$query->the_post();

$f = get_fields();
$link = ($f['bericht_doorverwijzen'] ?? '' ? $f['bericht_doorverwijzen'] : get_the_permalink());
$img_id = get_post_thumbnail_id();

$date = $f['datum_artikel'];
$post_month = date('F', strtotime($date));

if ($post_month != $current_month) {
echo "

$post_month

";
$current_month = $post_month;
}

echo "

";
echo "

";

if(!empty($img_id)) {
$img = Images::get_image_resized($img_id, 397, 230, true);
echo "";
echo '';
echo '';
echo '';
echo "";
}

echo "

";
echo "

".get_the_title()."

";
if(!empty($date)) {
echo "

".$date."

";
}
echo the_excerpt_max_charlength($charlength = 130);
echo "

";
echo "

";
echo "

";
}

echo "

";
}
wp_reset_postdata();


To create an extra navigation with all the months and an anchor so it jumps to the right posts, you can modify the code to store the posts in an array indexed by month and then loop through the array to output the navigation links.

Here's an example of how you can modify the code to create a navigation with all the months:

php
$posts_by_month = array();

while ( $query->have_posts() ) {
$query->the_post();

$f = get_fields();
$link = ($f['bericht_doorverwijzen'] ?? '' ? $f['bericht_doorverwijzen'] : get_the_permalink());
$img_id = get_post_thumbnail_id();

$date = $f['datum_artikel'];
$post_month = date('F', strtotime($date));

$posts_by_month[$post_month][] = array(
'title' => get_the_title(),
'link' => $link,
'date' => $date,
'excerpt' => the_excerpt_max_charlength($charlength = 130)
);
}

echo "

";
foreach ($posts_by_month as $month => $posts) {
echo "$month";
}
echo "

";

foreach ($posts_by_month as $month => $posts) {
echo "

$month

";
foreach ($posts as $post) {
echo "

";
echo "

";
// Output post content here
echo "

";
echo "

";
}
}


This code will create a navigation with links to each month and anchor tags for jumping to the corresponding posts.