Adding pagination to custom post loop in page

Question

I have created a custom page template (testimonials-page.php) and in that template I am loading custom post type 'testimonials' using the following loop:

<?php query_posts(array(
'posts_per_page' => 5,
'post_type' => 'testimonials',
    'orderby' => 'post_date',
    'paged' => $paged
 )
 ); ?>

  <?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>

    <div id="post-<?php the_ID(); ?>" class="quote">
    <?php echo get_the_post_thumbnail($id, array($image_width,$image_height)); ?>
    <?php the_content(); ?>
    </div>
    <?php endwhile; ?>
    <?php wp_reset_query(); ?>

How do I add pagination to that? I installed the WP Paging plugin, and while that plugin works great when I call the pagination into category.php using:

<p><?php wp_paging(); ?></p>

Inserting the same thing into testimonial-page.php results in broken formatting and links that 404 on me.

Answer 1

Firstly, never EVER use query_posts unless your intention is to modify the default Wordpress Loop.

Instead, switch to WP Query.

Here's something I wrote for a theme I did for a client using all built-in Wordpress functions. It's been working pretty well for me so far, so I'll integrate it into your code as best as I can:

global $paged;
$curpage = $paged ? $paged : 1;
$args = array(
    'post_type' => 'testimonials',
    'orderby' => 'post_date',
    'posts_per_page' => 5,
    'paged' => $paged
);
$query = new WP_Query($args);
if($query->have_posts()) : while ($query->have_posts()) : $query->the_post();
?>
<div id="post-<?php the_ID(); ?>" class="quote">
<?php
echo get_the_post_thumbnail($post->ID, array($image_width,$image_height));
the_content();
?>
</div>
<?php
endwhile;
    echo '
    <div id="wp_pagination">
        <a class="first page button" href="'.get_pagenum_link(1).'">&laquo;</a>
        <a class="previous page button" href="'.get_pagenum_link(($curpage-1 > 0 ? $curpage-1 : 1)).'">&lsaquo;</a>';
        for($i=1;$i<=$query->max_num_pages;$i++)
            echo '<a class="'.($i == $curpage ? 'active ' : '').'page button" href="'.get_pagenum_link($i).'">'.$i.'</a>';
        echo '
        <a class="next page button" href="'.get_pagenum_link(($curpage+1 <= $query->max_num_pages ? $curpage+1 : $query->max_num_pages)).'">&rsaquo;</a>
        <a class="last page button" href="'.get_pagenum_link($query->max_num_pages).'">&raquo;</a>
    </div>
    ';
    wp_reset_postdata();
endif;
?>

Jan 2018 Edit:

Also consider using paginate_links, since it's also built into Wordpress, and has more robust options and capabilities.

Answer 2

Try this code for custom loop with pagination:

<?php
if ( get_query_var('paged') ) {
    $paged = get_query_var('paged');
} elseif ( get_query_var('page') ) { // 'page' is used instead of 'paged' on Static Front Page
    $paged = get_query_var('page');
} else {
    $paged = 1;
}

$custom_query_args = array(
    'post_type' => 'post', 
    'posts_per_page' => get_option('posts_per_page'),
    'paged' => $paged,
    'post_status' => 'publish',
    'ignore_sticky_posts' => true,
    //'category_name' => 'custom-cat',
    'order' => 'DESC', // 'ASC'
    'orderby' => 'date' // modified | title | name | ID | rand
);
$custom_query = new WP_Query( $custom_query_args );

if ( $custom_query->have_posts() ) :
    while( $custom_query->have_posts() ) : $custom_query->the_post(); ?>

        <article <?php post_class(); ?>>
            <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
            <small><?php the_time('F jS, Y') ?> by <?php the_author_posts_link() ?></small>
            <div><?php the_excerpt(); ?></div>
        </article>

    <?php
    endwhile;
    ?>

    <?php if ($custom_query->max_num_pages > 1) : // custom pagination  ?>
        <?php
        $orig_query = $wp_query; // fix for pagination to work
        $wp_query = $custom_query;
        ?>
        <nav class="prev-next-posts">
            <div class="prev-posts-link">
                <?php echo get_next_posts_link( 'Older Entries', $custom_query->max_num_pages ); ?>
            </div>
            <div class="next-posts-link">
                <?php echo get_previous_posts_link( 'Newer Entries' ); ?>
            </div>
        </nav>
        <?php
        $wp_query = $orig_query; // fix for pagination to work
        ?>
    <?php endif; ?>

<?php
    wp_reset_postdata(); // reset the query 
else:
    echo '<p>'.__('Sorry, no posts matched your criteria.').'</p>';
endif;
?>

Source:

• WordPress custom loop with pagination