wordpress pagination style without wordpress plugin

wp-pagenavi is most popular. wordpress pagination style without wordpress plugin, We need to install wp-pagenavi wordpress plugin for pagination styling.  When we think wordpress pagination style then first thing came in mind which is. We need to install wp-pagenavi wordpress plugin for pagination styling. There are multiple pagination plugins available for pagination styling but wp-pagenavi is most popular.

wordpress pagination style without wordpress plugin

I always recommend wordpress theme developers to not to use the wordpress plugins as much possible because any wordpress plugin will install the extra unuseful code also.

wordpress pagination style without wordpress plugin

wordpress pagination style without wordpress plugin

Here in this article I am giving you the example about wordpress pagination without using any wordpress plugin.

Just open your functions.php file and put following code.


function wpapi_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 "</pre>
<div class="\&quot;wpapi_pagination\&quot;">Page ".$paged." of ".$pages."";
 if($paged > 2 && $paged > $range+1 && $showitems < $pages) echo "<a href="&quot;.get_pagenum_link(1).&quot;">« First</a>";
 if($paged > 1 && $showitems < $pages) echo "<a href="&quot;.get_pagenum_link($paged - 1).&quot;">‹ Previous</a>";

 for ($i=1; $i <= $pages; $i++)
 {
 if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems ))
 {
 echo ($paged == $i)? "<span class="\&quot;current\&quot;">".$i."</span>":"<a class="\&quot;inactive\&quot;" href="&quot;.get_pagenum_link($i).&quot;">".$i."</a>";
 }
 }

 if ($paged < $pages && $showitems < $pages) echo "<a href="\&quot;&quot;.get_pagenum_link($paged">Next ›</a>";
 if ($paged < $pages-1 &&  $paged+$range-1 < $pages && $showitems < $pages) echo "<a href="&quot;.get_pagenum_link($pages).&quot;">Last »</a>";
 echo "</div>
<pre>\n";
 }
}

Above function will give the wordpress pagination style like google search engine.

Then open style.css file from your wordpress theme file and put following code in that file.


.wpapi_pagination {
clear:both;
padding:20px 0;
position:relative;
font-size:11px;
line-height:13px;
}

.wpapi_pagination span, .wpapi_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;
}

.wpapi_pagination a:hover{
color:#fff;
background: #3279BB;
}

.wpapi_pagination .current{
padding:6px 9px 5px 9px;
background: #3279BB;
color:#fff;
}

Then finally where you want to show the wordpress pagination there in area put following code (index.php, etc..)


if (function_exists("wpapi_pagination")) {
 wpapi_pagination($additional_loop->max_num_pages);

 

wordpress pagination style without wordpress plugin

wordpress pagination style without wordpress plugin

If you are having any issues or question about adding the wordpress pagination without plugin then please write me.

 

 

6 Comments

Add a Comment

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