Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save paulmiller3000/bba48b4ce56cd647b413ba657bd3733d to your computer and use it in GitHub Desktop.
Save paulmiller3000/bba48b4ce56cd647b413ba657bd3733d to your computer and use it in GitHub Desktop.
<?php
/**
* WordPress pagination with consecutive page numbers, arrows, and an ellipses
* Style rules tested with Elementor on the Twenty-Twenty theme. YMMV.
* Example:
* « Previous 1 2 3 4 … 436 Next »
*
* PHP Code Source: https://wordpress.stackexchange.com/a/327711
*/
?>
<style>
.custom-pagination-container {
display: flex;
}
.pagination {
flex-grow: 1;
flex-shrink: 1;
justify-content: center;
order: 1;
font-size: 15px;
}
.pagination a,
.pagination .current {
margin: 0;
}
.pagination a:hover {
background: none;
}
.pagination .next,
.pagination a,
.pagination .prev,
.pagination span {
display: inline-block;
float: none;
}
.pagination .dots {
vertical-align: sub;
margin-bottom: 0;
}
</style>
<div class='custom-pagination-container'>
<div class='pagination'>
<?php
// Pagination with consecutive page numbers and ellipsis
// Source: https://wordpress.stackexchange.com/a/327711
global $wp_query;
$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' => $wp_query->max_num_pages,
'next_text' => 'Next &raquo;',
'prev_text' => '&laquo; Previous'
) );
?>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment