HOW TO BUILD A WORDPRESS POST PAGINATION WITHOUT PLUGIN
WordPress only comes bundled with the “next page” and “previous page” links to navigate between different blog overview pages. If you happen to have a blog with a lot of posts or simply want to offer a better user experience I would recommend to remove those links and replace them with a pagination like most people (including me) are using in their templates.
Why should you use them?
Because they are easier to navigate and the user instantly knows how many posts and pages are available. Its simply good user experience :)
Because they are easier to navigate and the user instantly knows how many posts and pages are available. Its simply good user experience :)
Using a plugin for this task may be an overkill since you really only need to add a few lines of php and css to your theme.
Now I show you how to add custom pagination into twentytwelve theme.
In Function.php
{
// Sets how many pages to show (leave it alone)
$pages = '';
// Sets how many buttons you want to show in the pagination area
$range = 3;
$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 '<ul class="pagination">';
if($paged > 2 && $paged > $range+1 && $showitems < $pages) echo '<li><a href="'.get_pagenum_link(1).'">«</a></li>';
if($paged > 1 && $showitems < $pages) echo '<li>' . previous_posts_link('« Previous Entries') . '</li>';
for ($i=1; $i <= $pages; $i++)
{
if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems ))
{
echo ($paged == $i)? '<li class="current">'.$i.'</li>':'<li><a href="'.get_pagenum_link($i).'" class="inactive" >'.$i.'</a></li>';
}
}
if ($paged < $pages && $showitems < $pages) echo '<li>' . next_posts_link('Next »','') . '</li>';
if ($paged < $pages-1 && $paged+$range-1 < $pages && $showitems < $pages) echo '<li><a href="'.get_pagenum_link($pages).'">»</a></li>';
echo '</ul>';
}
}
In style.css
.paginationBox {
clear: both;
display: block;
float: left;
margin: 1em 0 2em 0;
}
ul.pagination {
margin: 0px auto 0px auto;
padding: 0px 0px 10px 0px;
position: relative;
font-size: 80%;
line-height: 1em;
list-style-type: none;
}
.pagination li {
float: left;
vertical-align: middle;
background-color: #fff;
margin-right: 1px;
}
.pagination span,
.pagination a {
float: left;
border: 1px #ededed solid;
padding: 3px 9px 4px 9px;
text-decoration: none;
width: auto;
color: #999;
}
.pagination a:hover,
.pagination a:focus {
color: #fff;
background-color: #777;
border-color: #777;
}
.pagination .current{
padding: 3px 9px 4px 9px;
color: #fff;
background-color: #777;
border: 1px #777 solid;
}