Today we are going to change the WordPress pagination to WordPress numbered pagination. That means we are going to have number based pagination in WordPress. It works for all custom post types as well as all the blog post as well.
We will just create a simple function that will override the inbuilt WordPress pagination functionality and use the number based pagination that we will create. We will take step by step process and learn how to create number based pagination in WordPress using bootstrap and little but of custom css.
Lets get started.
What we are going to do ?
- Create a function inside
functions.php - Call the function on the theme index template.
How to Create WordPress Numbered Pagination Using Bootstrap ?
Firstly we will create a hook that will override current pagination function in WordPress.
Lets create one
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
function cih_numeric_pagination() { gloal $wp_query; $posts_limit = 999999999 // Most be inside integer rage $pages = paginate_links(array( 'base'=>str_replace($posts_limit, '%#%', esc_url(get_page_num($big))), 'format'=>'?paged=%#%', 'current'=> max(1,get_query_var('paged')), 'total' => $wp_query->max_num_pages, 'type' => 'array', 'prev_text' => '<i class="fa fa-angle-left"></i>', 'next_text' => '<i class="fa fa-angle-right"></i>', )); if(is_array( $pages )) { $paged = ( get_query_var('paged') == 0 ) ? 1 : get_query_var('paged'); echo '<div class="pagination-wrap"><ul class="pagination">'; foreach($pages as $page) { echo "<li>$page</li>"; } echo "</ul></div>"; } } |
After you have copied the code inside your functions.php, its time to call it in your index page or archive page or wherever you want. Make sure page is using bootstrap framework to see the changes.
In my case it would be inside index.php for similar type of files.
If you run into any problem, feel free to leave the comment.
Leave a Reply