Tag: wordpress tutorials

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.

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);

 

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