Skip to content

Instantly share code, notes, and snippets.

@besimhu
Created March 15, 2015 15:02
Show Gist options
  • Save besimhu/760eca84a48c98515b4d to your computer and use it in GitHub Desktop.
Save besimhu/760eca84a48c98515b4d to your computer and use it in GitHub Desktop.
You don't need a pagination plugin to handle pagination.
/**
* Wordpress Pagination
* http://codex.wordpress.org/Function_Reference/paginate_links
*/
<div class="pagination-wrap">
<?php
// pagination
global $wp_query;
$big = 999999999; // need an unlikely integer
echo paginate_links( array(
'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
'current' => max( 1, get_query_var('paged') ),
'total' => $wp_query->max_num_pages,
'show_all' => False,
'end_size' => 2,
'mid_size' => 2,
'prev_next' => True,
'prev_text' => __('&laquo;'),
'next_text' => __('&raquo;'),
'type' => 'list'
) );
?>
</div>
//=================================
// PAGINATION
//=================================
// Wrapper that holds the pagination in place.
.pagination-wrap {
margin: rem(30px 0 30px);
text-align: center;
}
// Unordered List for Pagination.
.page-numbers {
@extend %cf;
display: inline-block;
width: auto;
margin: 0 auto;
// Individual pagination items.
li {
list-style: none;
float: left;
width: rem(25px);
height: rem(25px);
text-align: center;
overflow: hidden;
margin: 0 2px 2px;
color: $color-grey-dark;
@include mq(medium) {
width: rem(30px);
height: rem(30px);
margin: 0 5px 2px;
}
// Common styles for numbers and current page.
a, .current {
display: block;
height: inherit;
width: inherit;
@include font(os, 600);
font-size: rem(12px);
border-radius: 3px;
text-decoration: none;
line-height: rem(23px);
color: $color-black;
border: 1px solid $color-grey-medium;
@include mq(medium) {
font-size: rem(14px);
line-height: rem(28px);
}
// Hover State
&:hover,
&:focus {
background: $color-black;
border-color: $color-black;
color: #fff;
}
}
// Numbers
a {
background: #fff;
// Previous and Next Labels
&.prev,
&.next {
font-size: rem(15px);
line-height: rem(20px);
@include mq(medium) {
font-size: rem(20px);
line-height: rem(25px);
}
}
}
// Current Pagination item you are on.
.current {
display: block;
width: inherit;
height: inherit;
background: $color-black;
border-color: $color-black;
color: #fff;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment