How to Add a Paging Navigation Menu in WordPress

The paging navigation menu is an essential element of a website. Today, I will share with you the WordPress code that I have used for a long time to add a paging navigation.

Put the following code in functions.php:

function par_pagenavi($range = 9){
global $paged, $wp_query;
if ( !$max_page ) {$max_page = $wp_query->max_num_pages;}
if($max_page > 1){if(!$paged){$paged = 1;}
if($paged != 1){echo “<a href='” . get_pagenum_link(1) . “‘ class=’extend’ title=’First Page’> First </a>”;}
previous_posts_link(‘ Prev ‘);
if($max_page > $range){
if($paged < $range){for($i = 1; $i <= ($range + 1); $i++){echo “<a href='” . get_pagenum_link($i) .”‘”;
if($i==$paged)echo ” class=’current'”;echo “>$i</a>”;}}
elseif($paged >= ($max_page – ceil(($range/2)))){
for($i = $max_page – $range; $i <= $max_page; $i++){echo “<a href='” . get_pagenum_link($i) .”‘”;
if($i==$paged)echo ” class=’current'”;echo “>$i</a>”;}}
elseif($paged >= $range && $paged < ($max_page – ceil(($range/2)))){
for($i = ($paged – ceil($range/2)); $i <= ($paged + ceil(($range/2))); $i++){echo “<a href='” . get_pagenum_link($i) .”‘”;if($i==$paged) echo ” class=’current'”;echo “>$i</a>”;}}}
else{for($i = 1; $i <= $max_page; $i++){echo “<a href='” . get_pagenum_link($i) .”‘”;
if($i==$paged)echo ” class=’current'”;echo “>$i</a>”;}}
next_posts_link(‘ Next ‘);
if($paged != $max_page){echo “<a href='” . get_pagenum_link($max_page) . “‘ class=’extend’ title=’Last Page’> Last </a>”;}}
}

Add the following css style to your style.css:

.page_navi{overflow:hidden;width:100%;text-align:center}
.page_navi a{height:36px;border:1px solid #DDD;-webkit-border-radius:12px;-moz-border-radius:12px;border-radius:12px;color:#888;text-decoration:none; line-height:36px; margin:2px; padding:3px 8px}
.page_navi a:hover,.page_navi a.current{border:1px solid #FFBB76;color:#FF7200;font-weight:bolder}

Add the following calling code in the place that needs to be displayed (such as index.php, archive.php, category.php, search.php of the theme):

<div class=”page_navi”><?php par_pagenavi(9); ?></div>

Related Article
How to add user defined upload avatar function in WordPress

Friends who use WordPress to build a website should know that WordPress itself does not have the function of uploading Read more

How to get the number of articles and comments of the current logined user in WordPress

When developing WordPress Theme user center, I want to get the number of articles and comments of current logged in Read more

WordPress tips: get statistics of the number of pictures in the article

As far as I know, WordPress has no function to count the number of pictures in the article, so to Read more

WordPress details optimization to automatically add ALT and title information to the article image

Friends who know a little bit about SEO optimization should understand that image ALT and image title optimization are very Read more

Leave a Reply

Your email address will not be published. Required fields are marked *

*
To prove you're a person (not a spam script), type the security word shown in the picture.
Anti-spam image