Advertise on Site! You can Advertise on our site. Find out More

wordpress pagination style without wordpress plugin

4 Flares Twitter 3 Facebook 0 Google+ 0 StumbleUpon 1 LinkedIn 0 Buffer 0 Filament.io 4 Flares ×

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.

 

 

4 Flares Twitter 3 Facebook 0 Google+ 0 StumbleUpon 1 LinkedIn 0 Buffer 0 Filament.io 4 Flares ×
  • mars

    this one doesn’t seem to work on a custom taxonomy page

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

  • http://den-i.net Den

    Nice one…gonna try to apply it my WP blog…thanks a bunch

    • http://wordpressapi.com Wordpress API

      Thanks for your replay.

  • http://interior-design-decorating.info Tifany Harlan

    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.

  • http://business-budgeting-software.info Rory Culotta

    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.

  • http://www.hottravelworld.com Enrique Sossaman

    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?

  • Pingback: WordPress Paginate Without Plugins - High Quality Bookmarks

4 Flares Twitter 3 Facebook 0 Google+ 0 StumbleUpon 1 LinkedIn 0 Buffer 0 Filament.io 4 Flares ×