Adding pagination to custom post loop in page - wordpress

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).'">«</a>
<a class="previous page button" href="'.get_pagenum_link(($curpage-1 > 0 ? $curpage-1 : 1)).'">‹</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)).'">›</a>
<a class="last page button" href="'.get_pagenum_link($query->max_num_pages).'">»</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><?php the_title(); ?></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