By: Prem Tiwari | Last Updated: | In: WordPress, WordPress Snippets
The 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. If you want to replace the “Older posts” and “Newer posts” with pagging and previous & next button.
Paste below codes to your functions.php file:
If you want to replace the Older posts with paging, then copy bellow code snippets and paste in functions.php file of your current theme. This code will replace the older post text with paging.
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 28 29 30 31 32 33 34 35 36 37 38 39 40 | function pagination($pages = '', $range = 4) { $showitems = ($range * 2)+1; global $paged; if(empty($paged)) $paged = 1; if($pages == '') { global $wp_query; $pages = $wp_query->max_num_pages; if(!$pages) { $pages = 1; } } if(1 != $pages) { echo "<div class=\"pagination\"><span>Page ".$paged." of ".$pages."</span>"; if($paged > 2 && $paged > $range+1 && $showitems < $pages) echo "« First"; if($paged > 1 && $showitems < $pages) echo "‹ Previous"; for ($i=1; $i <= $pages; $i++) { if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems )) { echo ($paged == $i)? "<span class=\"current\">".$i."</span>":"".$i.""; } } if ($paged < $pages && $showitems < $pages) echo "<a href=\"".get_pagenum_link($paged + 1)."\">Next ›</a>"; if ($paged < $pages-1 && $paged+$range-1 < $pages && $showitems < $pages) echo "Last »"; echo "</div>\n"; } } |
CSS Code
You can also customize the style of paging according to your theme color combination. Add bellow css code in your style.css page of your current theme.
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 28 29 30 31 32 33 | .pagination { clear:both; padding:20px 0; position:relative; font-size:11px; line-height:13px; } .pagination span, .pagination a { display:block; float:left; margin: 2px 2px 2px 0; padding:6px 9px 5px 9px; text-decoration:none; width:auto; color:#fff; background: #555; } .pagination a:hover{ color:#fff; background: #3279BB; } .pagination .current{ padding:6px 9px 5px 9px; background: #3279BB; color:#fff; } |
Call below function in your theme (typically near the bottom of index.php or category.php where it says “Older posts” or “Older entries”):
1 2 3 4 5 6 7 8 9 10 | <?php if (function_exists("pagination")) { pagination($additional_loop->max_num_pages); } ? |
Prem Tiwari is the founder of FreeWebMentor.com and also a professional developer who has vast experience in PHP and open source technologies. Apart from this, he is a blogger by hobby and also he has been a regular speaker of WordPress sessions in various IT Companies. View all posts by Prem Tiwari
