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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | 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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <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.
hey i was thinking; isnt there another alternative just like this but without being related to Wordpress (WP)????? thanks
Each CMS has its own navigation system.
Very good solution. Thank you.
And how i can remove the “page-numbers dots” and the first/last page link?
The only way is to show all pages. Then you need to add this option:
$a['show_all'] = 1;It seems not to work in 3.2.1.
I have tested on 3.2.1. For me it works.
Great function :)
Many Thanks
Great work, it’s exactly what I was searching for. Thank you.
BTW, can I include this in a commercial wp theme?
Yes, you can.
Great work..awesome..finally i found it thank you…..
Hi, thanks for this. Is there a specific format to the loop that comes before the code?
No, everything is standard.
Thx for this.
How can we separate the prev/next to the page numbers?
That not possible.
I like your code, great idea
Большое спасибо :)
Hello,
I was searching this, thanks for tutorial
hey buddy………………you are doing great………
i appreciate your work ..
hey my friend, how can i edit it with css?
I actually still need a fix for the search feature.
Searching for two terms, like green dress, shows up correctly in the url for the first search page: green+dress.
On the second search page the url shows “greendress,” returning a 404 page error.
The reason of this is not in my function. I have no such a problem.
To fix the problem, you should just change this line:
if( !empty($wp_query->query_vars['s']) ) $a['add_args'] = array( ’s’ => get_query_var( ’s’ ) );
to this:
if( !empty($wp_query->query_vars['s']) ) $a['add_args'] = array( ’s’ => str_replace( ‘ ‘, ‘+’, str_replace( ‘%20′, ‘+’, get_query_var( ’s’ ) ) ) );
Hi, thanks for your code :)…
I’m creating a theme, but the first/last page links doesn’t show up…
I only got something like this: http://oi54.tinypic.com/2e4d8qt.jpg
How can I solve this?
The function does not contain these links.
Can you please inform me what the style sheet is for “dots” ?
Actually if possible to give css that would be easier to style this.
Thanks!”
OK, I figured it out.
To alter the style sheets to dots
.navigation span {
}
hi! this works great, but I have a small problem when it comes to category paging. it works wonderfully on my index with its respective paging (/?paged=2 or all the way up to /?paged=10)… HOWEVER, when I try to go to page 2 in a category (/?cat=5&paged=2) I’m getting a page not found message. any clues? thanks!
I don’t know what’s the reason. I have no such a problem.
Re: Italo
Make sure that your category.php file is on server. You may be missing a template file and that’s why the page isn’t showing up.
Hi,
is there any difference if i implement the code directly instead of using the WP PageNavi plugin?
I think with this code there will be fewer requests to the database.
Hey Dimox,
great work! But the pagination dont work on the search resulotion pages. Any idea?
I’ve updated the function. Now this problem is fixed.
Sorry but when i am change
if( !empty($wp_query->query_vars['s']) ) $a['add_args'] = array( ’s’ => get_query_var( ’s’ ) );
to this:
if( !empty($wp_query->query_vars['s']) ) $a['add_args'] = array( ’s’ => str_replace( ‘ ‘, ‘+’, str_replace( ‘%20′, ‘+’, get_query_var( ’s’ ) ) ) );
I get this…
Parse error: syntax error, unexpected ‘-’, expecting ‘)’ in /www/htdocs/w009ad63/www/rockmartin/wordpress/wp-content/themes/rockmartin/functions.php on line 48
Copy the code of whole function from the post above.
I have added this to my functions.php and where I need it to appear in my templates. However, when I click on the links for page 2, 3, 4 etc. the URL changes, but I’m still on Page 1. What am I doing wrong?
Possibly you need to use this trick.
I am shocked to know about this as my simple philosophy is not to use any extension unless the functionality is provided in the system itself. I am going to discard page-navi extension right away and try this trick.
You have found a new fan :)
Thanks for this useful information.
Right. Women like this … and I like this, too :D
My theme so far has been a lot of use of ideas from you.
However, if pleasure, may I request you to make a post about the Related Posts Thumbnails by Tags?
I have a problem, the current page stay to “1″
This problem can be while using query_posts. See comment #36.
Do you know the file that this function is located in the WordPress Core? I can’t seem to find it
The function
paginate_links()is located in/wp-includes/general-template.php.Hello Dimox,
Bit difficult to explain, but let’s say I’m on page 2 and wanted to get back to the homepage.
Both clicking on ‘1′ or ‘previous’ return me to page 1 instead of the homepage.
Do you know what’s causing this perhaps?
Don’t know. For me page 1 = homepage. When I’m clicking on ‘1′ or ‘previous’ WordPress redirecting me on the homepage.
I would like to add a ’show all’ link to this. I have added the code
$a['show_all'] = 1;to your function but it does not add the link or change the output in anyway. How would I go about accomplishing this?$a['show_all']is not ’show all’ link. Read the description of this parameter in WordPress Codex:Ok cool, so how would I manipulate this to show all the posts on one page? is that even possible?
No.
Privet Russian :)
I’m just trying to use this function in my theme, however I have an issue. I want to start paging from the last page till first one.
What I’m trying to say is, for example, it will start (assume I have 20 pages) from 20 and it will decrease to 1.
Can we do that with this function?
Regards,
Doğan Kutbay
No, that’s not possible.
Dimox, it is possible. You know why, because its just php and you can reverse anything.
And also I dont know is it good to put links here but this website has done the thing that I’m saying. Check this out >> http://izismile.com/ go bottom you’ll see that they have succeeded it. 600»599»598 etc.
Spasibo !
Hello,
I want to add multiple pages to one post. so will this be used for that also?
What “multiple pages to one post” means?
very nice tutorail :D