1

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>
  • Your problem is your custom query and most probably the way you have registered your custom post type. You should not be using a custom query on archive pages to replace the main query. They are really troublesome as you can see – Pieter Goosen Apr 23 '15 at 10:57
0

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.

0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.