WordPress Pagination Without a Plugin (WP-PageNavi alternative)

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/'>&laquo; 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 &raquo;</a>

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.

Cоmmеnts (66):
  1. 1

    How can I create wp page navi like this http://i39.tinypic.com/adohm0.jpg

    and like this http://i44.tinypic.com/313fvhs.jpg

  2. 4

    Hello, how can I paginate the comments? My links does not work. It always show the last page. I see that yours is working.

  3. 6
    syedtaqi said:

    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!


  4. 7
    syedtaqi said:

    one thing more I am currently using wordpress Version 3.4.1


  5. 8

    more simple is to use the paginate_links function


  6. 10

    Thank You very much for your useful example :)

  7. 11
    Xaib Aslam said:

    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>

Соmmеnt раgеs: « 1 2
Lеаvе а Соmmеnt

© 2009–2022 Dimox.net  •  Privacy Policy