I don't use a plugin such as WP-PageNavi to paginate my posts, but a simple custom function that I'd like to share with you. Let's see the details.
The custom function is as follows:
function create_pagination($pages = '', $range = 2) {
$show_items = ($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 id="pagination">';
echo '<span class="pagination-where">Page ' . $paged . ' of ' . $pages . '</span> ';
if($paged > 2 && $paged > $range+1 && $show_items < $pages) echo "<a href='".get_pagenum_link(1)."'>«</a>";
if($paged > 1 && $show_items < $pages) echo "<a href='".get_pagenum_link($paged - 1)."'>‹</a>";
for ($i=1; $i <= $pages; $i++)
{
if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems ))
{
echo ($paged == $i)? '<strong>'.$i."</strong>":"<a href='".get_pagenum_link($i)."' class=\"inactive\">".$i."</a>";
}
}
if ($paged < $pages && $show_items < $pages) echo "<a href='".get_pagenum_link($paged + 1)."'>›</a>";
if ($paged < $pages-1 && $paged+$range-1 < $pages && $show_items < $pages) echo "<a href='".get_pagenum_link($pages)."'>»</a>";
echo "</div>\n";
}
}
And here are the custom CSS styles:
#pagination {
margin: 0;
text-align: center;
clear: both;
width: 100%;
font-family: Georgia, serif;
}
#pagination a:link,
#pagination a:visited,
#pagination strong {
display: inline-block;
text-decoration: none;
width: 32px;
height: 32px;
text-align: center;
line-height: 32px;
border: 1px solid #ccc;
-moz-transition: all 500ms ease-in;
-webkit-transition: all 500ms ease-in;
-o-transition: all 500ms ease-in;
-ms-transition: all 500ms ease-in;
transition: all 500ms ease-in;
}
#pagination a:link,
#pagination a:visited,
#pagination strong {
margin-right: 0.5em;
}
#pagination a:link,
#pagination a:visited {
color: #000;
}
#pagination strong,
#pagination a:hover {
background: #ccc;
color: #444;
}
#pagination .pagination-where {
display: block;
height: 32px;
line-height: 32px;
text-align: center;
margin-bottom: 0.5em;
}
You can use this function in your theme as follows:
<!-- end of the Loop --> <?php create_pagination(); ?>
I hope you find it useful.