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.

 

 

Written by Purab Kharat

I am Purab , a Blogger. I worked as WordPress and Drupal Architect and consultant. I worked on many technologies like Wordpress, Drupal, Ruby on Rails, Flex, PHP, jQuery etc... Senior Technical Lead at Smartsourcing Global Pvt Ltd in Princeton, NJ, USA. I contributor of many wordpress plugins and Drupal Modules. I am core developer of Drupal. Connect to purab on LinkedIn or Follow @purab on Twitter or Follow me on Google+ or Write Mail to purabdk@gmail.com or Chat with me on Skype : purabdk

This article has 3 comments

Leave a Comment

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>