WordPress Pagination Without a Plugin (WP-PageNavi alternative)

Almost every blogger, who maintains a blog on WordPress, familiar with the WP-PageNavi plugin, which displays the pagination like on the image above.
But not everyone knows (including me until recently), what WordPress has a built-in function (starting from version 2.1) which implements virtually the same functional. And compared with the WP-PageNavi plugin this function very small in size.
Here’s what this function looks like:
function wp_corenavi() { global $wp_query, $wp_rewrite; $pages = ''; $max = $wp_query->max_num_pages; if (!$current = get_query_var('paged')) $current = 1; $a['base'] = str_replace(999999999, '%#%', get_pagenum_link(999999999)); $a['total'] = $max; $a['current'] = $current; $total = 1; //1 - display the text "Page N of N", 0 - not display $a['mid_size'] = 5; //how many links to show on the left and right of the current $a['end_size'] = 1; //how many links to show in the beginning and end $a['prev_text'] = '« Previous'; //text of the "Previous page" link $a['next_text'] = 'Next »'; //text of the "Next page" link if ($max > 1) echo '<div class="navigation">'; if ($total == 1 && $max > 1) $pages = '<span class="pages">Page ' . $current . ' of ' . $max . '</span>'."\r\n"; echo $pages . paginate_links($a); if ($max > 1) echo '</div>'; }
This code must be placed in the functions.php file of your template. The function have just five options, they are separated by line breaks.
To show the navigation, paste the following code in your template:
<?php if (function_exists('wp_corenavi')) wp_corenavi(); ?>
As a result the HTML code will looks like this:
<div class="navigation"> <span class="pages">Page 7 of 27</span> <a class='prev page-numbers' href='http://site.name/page/6/'>« Previous</a> <a class='page-numbers' href='http://site.name/page/1/'>1</a> <span class='page-numbers dots'>...</span> <a class='page-numbers' href='http://site.name/page/4/'>4</a> <a class='page-numbers' href='http://site.name/page/5/'>5</a> <a class='page-numbers' href='http://site.name/page/6/'>6</a> <span class='page-numbers current'>7</span> <a class='page-numbers' href='http://site.name/page/8/'>8</a> <a class='page-numbers' href='http://site.name/page/9/'>9</a> <a class='page-numbers' href='http://site.name/page/10/'>10</a> <span class='page-numbers dots'>...</span> <a class='page-numbers' href='http://site.name/page/27/'>27</a> <a class='next page-numbers' href='http://site.name/page/8/'>Next »</a> </div>
As you can see it contains all the necessary classes to stylize navigation with CSS (the current page, dots, links to previous and next page).
I’ve tested this function on WordPress 2.3.3 and 3.1 and also tested variants with active and inactive permalinks. Everything works as expected. I think it will work also in a new versions of WordPress.
How can I create wp page navi like this http://i39.tinypic.com/adohm0.jpg
and like this http://i44.tinypic.com/313fvhs.jpg
That’s not possible with this function.
So…is there anyone here has any ideas or reference sources to create a paginated like that?
Hello, how can I paginate the comments? My links does not work. It always show the last page. I see that yours is working.
http://dimox.net/wordpress-comments-pagination-without-a-plugin/
Hi Dimox,
I am again visiting your website and would like your help in this regard.
I am simply pulling post from tags on homepage see here
posts content
then called corenavi funtion directly after ends the loop
and paste this code in function.php
function wp_corenavi() {
global $wp_query, $wp_rewrite;
$pages = ”;
$max = $wp_query->max_num_pages;
if (!$current = get_query_var(‘paged’)) $current = 1;
$a[‘base’] = str_replace(999999999, ‘%#%’, get_pagenum_link(999999999));
$a[‘total’] = $max;
$a[‘current’] = $current;
$total = 1; //1 – display the text “Page N of N”, 0 – not display
$a[‘mid_size’] = 5; //how many links to show on the left and right of the current
$a[‘end_size’] = 1; //how many links to show in the beginning and end
$a[‘prev_text’] = ‘« Previous’; //text of the “Previous page” link
$a[‘next_text’] = ‘Next »’; //text of the “Next page” link
if ($max > 1) echo ”;
if ($total == 1 && $max > 1) $pages = ‘Page ‘ . $current . ‘ of ‘ . $max . ”.”\r\n”;
echo $pages . paginate_links($a);
if ($max > 1) echo ”;
but don’t know why pagination is not working, Could you please guide me what did i mistake?
Looking forward to your positive response!
Warmly,
Syed
one thing more I am currently using wordpress Version 3.4.1
Thanks.
Syed
more simple is to use the paginate_links function
http://codex.wordpress.org/Function_Reference/paginate_links
My function uses paginate_links.
Thank You very much for your useful example :)
Hello,
I like your code and its really nice but I am trying to implement my CSS but its not working. Can you help me with this. My code is, so who I can use these class on your code.
<div class="row">
<ul class="pagination">
<li><a href="#"><i class="ti-arrow-left"></i></a></li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#"><i class="fa fa-ellipsis-h"></i></a></li>
<li><a href="#"><i class="ti-arrow-right"></i></a></li>
</ul>
</div>
</div>