Archive pagination not working

Question

I am trying to add pagination for my Archive. I want to show 12 posts per page and then show the 'next' / 'previous' buttons.

When I manually change the value of the $paged variable, the 1 into a 2 it works. When I click the Next button on the archive page, it loads a very weird theme page. The url looks like: '/page/2/'.

What am I doing wrong?

This is the code I wrote so far:

<?php
  global $paged,$wp_query;

    $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;

    $args = array(
        'post_type' => 'realisaties',
        'posts_per_page' => 12,
      'paged' => $paged,
        'order' => 'ASC'
    );

    $archive_query = new WP_Query($args);

    while ($archive_query->have_posts()) : $archive_query->the_post();

      $image = get_field('preview_afbeelding');

      if( !empty($image) ):

        $url = $image['url'];
        $title = $image['title'];
        $alt = $image['alt'];
        $caption = $image['caption'];

        // thumbnail
        $size = 'medium';
        $thumb = $image['sizes'][ $size ];
        $width = $image['sizes'][ $size . '-width' ];
        $height = $image['sizes'][ $size . '-height' ];

        if( $caption ): ?>
          <div class="wp-caption">
        <?php endif; ?>
        <div class="col-md-3">
          <?php echo get_the_title(); ?>
          <a href="<?php the_permalink() ?>" title="<?php echo $title; ?>">
            <img class="realisatie-img img-responsive" src="<?php echo $thumb; ?>" alt="<?php echo $alt; ?>" title="" width="<?php echo $width; ?>" height="<?php echo $height; ?>" />
            <br />
          </a>
        </div>

        <?php if( $caption ): ?>
        <h2> <?php echo get_the_title(); ?></h2>
        <p class="wp-caption-text"><?php echo $caption; ?></p>
        </div>
      <?php
      endif;
      endif;
    endwhile;
    ?>


<?php next_posts_link('Older Entries »', $archive_query->max_num_pages); ?>
<?php previous_posts_link('Newer Entries', $archive_query->max_num_pages); ?>
<?php wp_reset_query(); ?>
</div>
</div>

Answer 1

You can use below steps to display pagination. Step 1:- Include the following snippet in your functions.php file :-

function webim_pagination ( $pages = '', $range = 4 ) {
     $showitems = ($range * 2) + 1;
     global $paged;
     if( empty( $paged ) ) $paged = 1;
     if( $pages == '' ) {
         global $wp_query;
         $pages = $wp_query->max_num_pages;
         if(!$pages) {
             $pages = 1;
         }
     }   
     if(1 != $pages) {
         echo "<nav class=\"webim-page-pagination\"><ul class=\"page-numbers wow fadeInRight\"><li class=\"disabled\"><a href=\"#\">" . __('Page ', 'webim') . $paged . __(' of ', 'webim') . $pages . "</a></li>";
         if( $paged > 2 && $paged > $range + 1 && $showitems < $pages ) echo "<li><a href='" . get_pagenum_link( 1 ) . "'>&lArr; " . __('First', 'webim') . "</a></li>";
         if( $paged > 1 && $showitems < $pages ) echo "<li><a href='" . get_pagenum_link( $paged - 1 ) . "'>&larr; " . __('Previous', 'webim') . "</a></li>";
         for ( $i = 1; $i <= $pages; $i++ ) {
             if ( 1 != $pages && ( !( $i >= $paged + $range + 1 || $i <= $paged - $range - 1 ) || $pages <= $showitems )) {
                 echo ( $paged == $i ) ? "<li class=\"active\"><a href=\"#\">" . $i . "</a></li>" : "<li><a href='" . get_pagenum_link( $i ) . "' class=\"inactive\">" . $i . "</a></li>";      
             }
         }
         if ( $paged < $pages && $showitems < $pages ) echo "<li><a href=\"" . get_pagenum_link( $paged + 1 ) . "\">" . __('Next', 'webim') . " &rarr;</a></li>";
         if ( $paged < $pages-1 &&  $paged + $range - 1 < $pages && $showitems < $pages ) echo "<li><a href='" . get_pagenum_link( $pages ) . "'>" . __('Last', 'webim') . " &rArr;</a></li>";
         echo "</ul></nav>\n";
     }
}

Step 2:- Now call our pagination function whereever pagination is required. :-

<?php webim_pagination(); ?>

It is always better to have a function for reusable elements.

Answer 2

Pieter is right in his comment, using a custom WP_Query for it is not a good idea. In my opinion with you can achieve what you want without it.

You'll find more informations about it on : https://codex.wordpress.org/Plugin_API/Action_Reference/pre_get_posts#Changing_the_number_of_posts_per_page.2C_by_post_type

Your actual archive.php (or whatever with a multiple post loop page) code can be this :

<?php

    while (have_posts()) : the_post();

      $image = get_field('preview_afbeelding');

      if( !empty($image) ):

        $url = $image['url'];
        $title = $image['title'];
        $alt = $image['alt'];
        $caption = $image['caption'];

        // thumbnail
        $size = 'medium';
        $thumb = $image['sizes'][ $size ];
        $width = $image['sizes'][ $size . '-width' ];
        $height = $image['sizes'][ $size . '-height' ];

        if( $caption ): ?>
          <div class="wp-caption">
        <?php endif; ?>
        <div class="col-md-3">
          <?php echo get_the_title(); ?>
          <a href="<?php the_permalink() ?>" title="<?php echo $title; ?>">
            <img class="realisatie-img img-responsive" src="<?php echo $thumb; ?>" alt="<?php echo $alt; ?>" title="" width="<?php echo $width; ?>" height="<?php echo $height; ?>" />
            <br />
          </a>
        </div>

        <?php if( $caption ): ?>
        <h2> <?php echo get_the_title(); ?></h2>
        <p class="wp-caption-text"><?php echo $caption; ?></p>
        </div>
      <?php
      endif;
      endif;
    endwhile;
    ?>
<?php next_posts_link('Older Entries »'); ?>
<?php previous_posts_link('Newer Entries'); ?>
</div>
</div>

And you have to add in your theme in function.php file :

function wpse_185115_posts_per_page( $query ) {
    if ( is_admin() || ! $query->is_main_query() )
        return;

    if ( is_post_type_archive( 'realisaties' ) ) {
        $query->set( 'posts_per_page', 12 );
        return;
    }
}
add_action( 'pre_get_posts', 'wpse_185115_posts_per_page', 1 );

The last code update your main query (archive page for post type 'realisaties' in this example) to set the posts_per_page parameter of the main query to 12.