Custom WP_Query with Pagination loop
<?php
//Wordpress Docs Link - http://codex.wordpress.org/Function_Reference/paginate_links
//Protect against arbitrary paged values
$paged = ( get_query_var( 'paged' ) ) ? absint( get_query_var( 'paged' ) ) : 1;
$args = array(
'category_name' => $filterBy, // Only apply if filtering by category
'orderby' => 'post_date',
'order' => 'DESC',
'post_type' => 'post',
'post_status' => 'publish',
'suppress_filters' => true,
'paged' => $paged,
'posts_per_page' => 6 //Number of posts to display per page
);
$serviceposts = new WP_Query( $args );
if ( $serviceposts->have_posts() ) :
while ( $serviceposts->have_posts() ) : $serviceposts->the_post(); ?>
<div class="col-md-4 col-sm-4">
<?php get_template_part( 'article-template' ); ?>
</div>
<?php
endwhile;
//PAGINATION OUTPUT
$big = 999999999; // need an unlikely integer
echo paginate_links( array(
'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
'format' => '?paged=%#%',
'current' => max( 1, get_query_var('paged') ),
'total' => $serviceposts->max_num_pages,
'prev_text' => '<< Older',
'next_text' => 'Newer >>'
) );
endif;
wp_reset_postdata();
/* ============================================================
PAGINATION
============================================================ */
.pagination {
text-align: center;
width: 100%;
}
.pagination .page-numbers {
background-color: #413636;
color: #fff;
font-size: 14px;
padding: 8px 0px 7px;
min-width: 34px;
display: inline-block;
border-radius: 34px;
text-align: center;
font-weight: 500;
line-height: 19px;
text-decoration: none;
margin: 20px 3px 50px;
}
.pagination .page-numbers:hover,
.pagination .page-numbers:focus,
.pagination .page-numbers.current {
background-color: #F15D2F;
}
.pagination .page-numbers.next,
.pagination .page-numbers.prev {
padding-left: 16px;
padding-right: 16px;
}