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.

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.

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 "<div class=\"wpapi_pagination\"><span>Page ".$paged." of ".$pages."</span>";
 if($paged > 2 && $paged > $range+1 && $showitems < $pages) echo "<a href='".get_pagenum_link(1)."'>&laquo; First</a>";
 if($paged > 1 && $showitems < $pages) echo "<a href='".get_pagenum_link($paged - 1)."'>&lsaquo; 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=\"current\">".$i."</span>":"<a href='".get_pagenum_link($i)."' class=\"inactive\">".$i."</a>";
 }
 }

 if ($paged < $pages && $showitems < $pages) echo "<a href=\"".get_pagenum_link($paged + 1)."\">Next &rsaquo;</a>";
 if ($paged < $pages-1 &&  $paged+$range-1 < $pages && $showitems < $pages) echo "<a href='".get_pagenum_link($pages)."'>Last &raquo;</a>";
 echo "</div>\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 WPAPI

I am from India, Pune. I am WordPress and Drupal Architect and consultant. I worked on many technologies like Ruby on Rails, Flex, PHP, jQuery etc... Senior Technical Lead at Smartsourcing Global Pvt Ltd in Princeton, NJ, USA. I contributed to many wordpress plugins and Drupal Modules. I contributed to Drupal core also. Connect to purab on LinkedIn or Follow @purab on Twitter or Follow me on or Write Mail to purabdk@gmail.com or Chat with me on Skype : purabdk

This article has 8 comments

  1. Pingback: true-luv.com » Blog Archive » Paginação de Posts

  2. Tifany Harlan Reply

    Hello, this is my first time i visit here. I found so many interesting in your blog especially on how to determine the topic. keep up the good work.

  3. Rory Culotta Reply

    I’ve just started off a blog, the knowledge you give on this site has aided me extremely. Thank you for all your time & work.

  4. Enrique Sossaman Reply

    I REALLY liked your post and blog! It took me a minute bit to find your site…but I bookmarked it. Would you mind if I posted a link back to your post?

  5. Pingback: WordPress Paginate Without Plugins - High Quality Bookmarks

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>