UThe default WordPress pagination only comes with the “Older posts” and “Newer posts” links at the bottom of the page when you want to navigate to the older entries.Thankfully, there are many available WordPress pagination plugins that do just that. Among these, Lester Chan’s WP-PageNavi is possibly the most popular one.
But if you prefer to
keep plugin overhead to a minimum, here’s a function you can use to add
WordPress pagination without a plugin.
The code is provided by
Kriesi and you can get his code and instructions. The pagination looks like this:
We would like to
provide an enhanced version of the pagination by introducing more useful
information such asPage X of Y and make the arrows more intuitive,
like this:
You can see a working example over at Sparklette.
Here’s our sauce for
the enhanced pagination, modified from
Kriesi’s code.
1.
Add the following function to your functions.php file:
2. function pagination($pages = '', $range = 4)
3. {
4. $showitems = ($range * 2)+1;
5.
6. global $paged;
7. if(empty($paged)) $paged = 1;
8.
9. if($pages == '')
10. {
11. global $wp_query;
12. $pages = $wp_query->max_num_pages;
13. if(!$pages)
14. {
15. $pages = 1;
16. }
17. }
18.
19. if(1 != $pages)
20. {
21. echo "<div class=\"pagination\"><span>Page ".$paged." of ".$pages."</span>";
22. if($paged > 2 && $paged > $range+1 && $showitems < $pages) echo "<a href='".get_pagenum_link(1)."'>« First</a>";
23. if($paged > 1 && $showitems < $pages) echo "<a href='".get_pagenum_link($paged - 1)."'>‹ Previous</a>";
24.
25. for ($i=1; $i <= $pages; $i++)
26. {
27. if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems ))
28. {
29. echo ($paged == $i)? "<span class=\"current\">".$i."</span>":"<a href='".get_pagenum_link($i)."' class=\"inactive\">".$i."</a>";
30. }
31. }
32.
33. if ($paged < $pages && $showitems < $pages) echo "<a href=\"".get_pagenum_link($paged + 1)."\">Next ›</a>";
34. if ($paged < $pages-1 && $paged+$range-1 < $pages && $showitems < $pages) echo "<a href='".get_pagenum_link($pages)."'>Last »</a>";
35. echo "</div>\n";
36. }
}
37.
To style it, add the following to your stylesheet (typically style.css).
38. .pagination {
39. clear:both;
40. padding:20px 0;
41. position:relative;
42. font-size:11px;
43. line-height:13px;
44. }
45.
46. .pagination span, .pagination a {
47. display:block;
48. float:left;
49. margin: 2px 2px 2px 0;
50. padding:6px 9px 5px 9px;
51. text-decoration:none;
52. width:auto;
53. color:#fff;
54. background: #555;
55. }
56.
57. .pagination a:hover{
58. color:#fff;
59. background: #3279BB;
60. }
61.
62. .pagination .current{
63. padding:6px 9px 5px 9px;
64. background: #3279BB;
65. color:#fff;
}
66.
Finally, call the function in your theme (typically near the
bottom of index.php or loop.php where it says "Older posts"
or "Older entries"):
67. <?php if (function_exists("pagination")) {
68. pagination($additional_loop->max_num_pages);
} ?>
EmoticonEmoticon