The next page and previous page links in WordPress default to the blog page. Pagination lets your users navigate across numerous pages of material. I’m utilizing WordPress’s built-in paginate links in this article on How to Create WordPress Pagination Without Plugin.
Using the Custom Query with the Correct Paged Parameter
Using the Correct Paged Parameter in the Custom Query :
<?php
$custom_query_args = array(
// Custom query parameters go here
);
?>
The right paged
the argument must be sent to the array. You may do so by using get_query_var()
to retrieve the URL query variable used to identify the current page :
<?php get_query_var( 'paged' ); ?>
That parameter may then be appended to your custom query args array :
<?php
$custom_query_args['paged'] = get_query_var( 'paged' )
? get_query_var( 'paged' )
: 1;
?>
Note: If your page is a static front page, be sure to use page
instead of paged
as a static front page uses page
and not paged
. This is what a static top page should look like.
<?php
$custom_query_args['paged'] = get_query_var( 'page' )
? get_query_var( 'page' )
: 1;
?>
WordPress must be made to recognize the custom query for pagination capabilities to produce the right output – i.e. previous/next/page links relative to the custom query. This necessitates a “hack” in which the basic $wp query
object is replaced with the custom query object, $custom query
:
- The primary query object should be backed
up: $wp query
. - The primary query object is null:
$wp query = $wp query
. - Replace the custom query with the primary query object:
$custom query = $wp query
.
$temp_query = $wp_query;
$wp_query = NULL;
$wp_query = $custom_query;
Contains all code :
A simple build of a custom query loop with correctly working pagination in WordPress without plugin methods is as follows :
<?php
add_filter( 'storefront_before_footer','geekerhub_add_Pagination' );
function geekerhub_add_Pagination($true){
if ( get_query_var('paged') ) {
$paged = get_query_var('paged');
} elseif ( get_query_var('page') ) { //'page' is used instead of 'paged' in 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(); ?>
<?php //I've included an example of basic navigation.
// Enter your code below?>
<nav aria-label="Page navigation example">
<ul class="pagination justify-content-center">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1">Previous</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#">Next</a>
</li>
</ul>
</nav>
<?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;
}
?>