Pagination for Wordpress with page numbers and a cool sass loop.
.pagination {
display: block;
clear: both;
padding: 20px 0;
position: relative;
font-size: 11px;
line-height: 13px;
text-align: center;
}
.pagination span, .pagination a {
display: inline-block;
margin: 2px 2px 2px 0;
padding: 6px 9px 5px 9px;
text-decoration: none;
width: auto;
color: #000;
background: #c1c1c1;
}
.pagination a:hover, .pagination .current {
color: #e3e3e3;
background: #000;
}
<?php if (function_exists("pagination")) { pagination($additional_loop->max_num_pages); } ?>
function 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=\"pagination\"><span>Page ".$paged." of ".$pages."</span>";
if ($paged > 2 && $paged > $range+1 && $showitems < $pages) echo "<a href='".get_pagenum_link(1)."'>« First</a>";
if ($paged > 1 && $showitems < $pages) echo "<a href='".get_pagenum_link($paged - 1)."'>‹ 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 ›</a>";
if ($paged < $pages-1 && $paged+$range-1 < $pages && $showitems < $pages) echo "<a href='".get_pagenum_link($pages)."'>Last »</a>";
echo "</div>\n";
}
}
$paginationColors: $yellow, $fuschia, $blue, $green;
.pagination {
display: block;
clear: both;
padding: 20px 0;
position: relative;
font-size: 11px;
line-height: 13px;
text-align: center;
span, a {
display: inline-block;
margin: 2px 2px 2px 0;
padding: 6px 9px 5px 9px;
text-decoration: none;
width: auto;
color: #000;
background: #e0d3b1;
}
@each $color in $paginationColors {
$a: length($paginationColors);
$b: index($paginationColors, $color);
$c: "#{$a}n+#{$b+1}";
a:nth-child(#{$c}):hover, .current:nth-child(#{$c}) { background: #{$color}; }
}
}