Intended as a quick reference/snipppet for WP pagination.
- Go to the Reading tab.
2)Change the Blog pages show at most from the default 10 to any number *less than 10.
Last active
March 1, 2017 16:02
-
-
Save theJasonJones/47eef8f323cdcfb65a9dc183eae7a947 to your computer and use it in GitHub Desktop.
Bootstrap pagination
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| //"Normal" looking pagination with borders and smaller font | |
| @red : #ed174f; | |
| @red-hover : darken(@red, 8%); | |
| ul.pagination{ | |
| @media( max-width: @screen-xs-max ){ padding-left: 15px; } | |
| li { | |
| a { color: @red; | |
| &:hover { background-color: @red-hover; color: #FFF; } | |
| } | |
| } | |
| & > .active > span { background-color: @red; color: #FFF; border-color: @red; | |
| &:hover { background-color: @red-hover; color: #FFF; border-color: #FFF; } | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function bootstrap_pagination($pages = '', $range = 6){ | |
| $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'><ul class='pagination pagination-lg'>"; | |
| if( $paged == 1): | |
| echo '<li class="disabled"><span aria-hidden="true">«</span></li>'; | |
| else: | |
| echo '<li> <a href="/blog/page/1/" aria-label="Previous"> <span aria-hidden="true">«</span> </a> </li>'; | |
| endif; | |
| 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><a href='".get_pagenum_link($paged - 1)."'>‹</a></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='active'><span class='current'>".$i."</span></li>":"<li><a href='".get_pagenum_link($i)."' class='inactive' >".$i."</a></li>"; | |
| } | |
| } | |
| // if ($paged < $pages && $showitems < $pages){ | |
| // echo "<li><a href='".get_pagenum_link($paged + 1)."'>›</a></li>"; | |
| // } | |
| // if ($paged < $pages-1 && $paged+$range-1 < $pages && $showitems < $pages){ | |
| // echo '<li><a href="'.get_pagenum_link($pages).'">»</a></li>'; | |
| // } | |
| if ($paged < $pages){ | |
| echo "<li><a href='".get_pagenum_link($paged + 1)."'>›</a></li>"; | |
| } | |
| if( $paged != $pages){ | |
| echo '<li><a href="'.get_pagenum_link($pages).'">»</a></li>'; | |
| } | |
| else{ | |
| echo '<li class="disabled"><span aria-hidden="true">»</span></li>'; | |
| } | |
| echo "</ul></div>\n"; | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php | |
| $paged = ( get_query_var('paged') ) ? get_query_var('paged') : 1; | |
| if( isset($_POST['tag']) ){ | |
| $custom_args = array( | |
| 'post_type' => 'post', | |
| 'posts_per_page' => -1, | |
| 'tag' => $tagged | |
| ); | |
| } | |
| else{ | |
| $custom_args = array( | |
| 'post_type' => 'post', | |
| 'posts_per_page' => 6, | |
| 'cat' => $cat, | |
| 'paged' => $paged | |
| ); | |
| } | |
| $custom_query = new WP_Query( $custom_args ); | |
| ?> | |
| <?php if ( $custom_query->have_posts() ) : ?> | |
| <!-- the loop --> | |
| <?php | |
| $c = 0; | |
| while ( $custom_query->have_posts() ) : $custom_query->the_post(); ?> | |
| <div class="col-xs-12 col-sm-6"> | |
| <div class="blog-wrapper"> | |
| <?php if( get_the_post_thumbnail() ): ?> | |
| <div class="img-wrap" style="background-image:url(<?php echo get_the_post_thumbnail_url( get_the_ID(), 'large'); ?>)"></div> | |
| <?php endif; ?> | |
| <div class="blog-content"> | |
| <div class="date"><?php the_time('F j, Y'); ?></div> | |
| <h2 class="title"><?php echo the_title() ?></h2> | |
| <div class="blurb"><?php echo pk_trim_excerpt( get_the_content() ) ?></div> | |
| <a href="<?php echo get_the_permalink( get_the_ID() ) ?>" class="main-btn">Read Article</a> | |
| </div> | |
| </div> | |
| </div> | |
| <?php pk_brkpnt(($c+1),array('xs'=>1,'sm'=>2,'md'=>2,'lg'=>2)); ?> | |
| <?php $c++; endwhile; ?> | |
| <!-- end of the loop --> | |
| <!-- pagination here --> | |
| <div class="row"> | |
| <div class="col-xs-12"> | |
| <?php | |
| if ( function_exists( bootstrap_pagination ) ) { | |
| bootstrap_pagination( $custom_query->max_num_pages, 4 ); | |
| } | |
| ?> | |
| </div> | |
| </div> | |
| <?php wp_reset_postdata(); ?> | |
| <?php else: ?> | |
| <p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p> | |
| <?php endif; ?> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // | |
| // Pagination (multiple pages) | |
| // -------------------------------------------------- | |
| .pagination { | |
| display: inline-block; | |
| padding-left: 0; | |
| margin: @line-height-computed 0; | |
| border-radius: @border-radius-base; | |
| > li { | |
| display: inline; // Remove list-style and block-level defaults | |
| > a, | |
| > span { | |
| position: relative; | |
| float: left; // Collapse white-space | |
| padding: @padding-base-vertical @padding-base-horizontal; | |
| line-height: @line-height-base; | |
| text-decoration: none; | |
| color: @pagination-color; | |
| background-color: @pagination-bg; | |
| border: 1px solid @pagination-border; | |
| margin-left: -1px; | |
| } | |
| &:first-child { | |
| > a, | |
| > span { | |
| margin-left: 0; | |
| .border-left-radius(@border-radius-base); | |
| } | |
| } | |
| &:last-child { | |
| > a, | |
| > span { | |
| .border-right-radius(@border-radius-base); | |
| } | |
| } | |
| } | |
| > li > a, | |
| > li > span { | |
| &:hover, | |
| &:focus { | |
| color: @pagination-hover-color; | |
| background-color: @pagination-hover-bg; | |
| border-color: @pagination-hover-border; | |
| } | |
| } | |
| > .active > a, | |
| > .active > span { | |
| &, | |
| &:hover, | |
| &:focus { | |
| z-index: 2; | |
| color: @pagination-active-color; | |
| background-color: @pagination-active-bg; | |
| border-color: @pagination-active-border; | |
| cursor: default; | |
| } | |
| } | |
| > .disabled { | |
| > span, | |
| > span:hover, | |
| > span:focus, | |
| > a, | |
| > a:hover, | |
| > a:focus { | |
| color: @pagination-disabled-color; | |
| background-color: @pagination-disabled-bg; | |
| border-color: @pagination-disabled-border; | |
| cursor: @cursor-disabled; | |
| } | |
| } | |
| } | |
| // Sizing | |
| // -------------------------------------------------- | |
| // Large | |
| .pagination-lg { | |
| .pagination-size(@padding-large-vertical; @padding-large-horizontal; @font-size-large; @border-radius-large); | |
| } | |
| // Small | |
| .pagination-sm { | |
| .pagination-size(@padding-small-vertical; @padding-small-horizontal; @font-size-small; @border-radius-small); | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $red : #ae1e2c; | |
| $dark-red: #8b1823; | |
| $hover-red : #db0318; | |
| $pagination-bg: #FFF; | |
| .pagination { | |
| display: inline-block; | |
| padding-left: 0; | |
| margin: $line-height-computed 0; | |
| border-radius: $border-radius-base; | |
| width: 100%; | |
| > li { | |
| display: inline; // Remove list-style and block-level defaults | |
| // Collapse white-space | |
| > a, | |
| > span { margin-right: 1.5%; position: relative; float: left; font-family: $header-font; @include font-size(22px); line-height: 30px; padding: 15px 20px; line-height: $line-height-base; text-decoration: none; color: $pagination-color; background-color: $pagination-bg; border: 1px solid $pagination-border; margin-left: -1px; } | |
| &:first-child { | |
| > a, | |
| > span { | |
| margin-left: 0; | |
| border-left-radius: $border-radius-base ; | |
| } | |
| } | |
| &:last-child { | |
| > a, | |
| > span { | |
| border-right-radius: $border-radius-base; | |
| } | |
| } | |
| } | |
| > li > a, | |
| > li > span { | |
| &:hover, | |
| &:focus { | |
| color: $pagination-hover-color; | |
| background-color: $pagination-hover-bg; | |
| border-color: $pagination-hover-border; | |
| } | |
| } | |
| > .active > a, | |
| > .active > span { | |
| &, | |
| &:hover, | |
| &:focus { | |
| z-index: 2; | |
| color: $pagination-active-color; | |
| background-color: $pagination-active-bg; | |
| border-color: $pagination-active-border; | |
| cursor: default; | |
| } | |
| } | |
| > .disabled { | |
| > span, | |
| > span:hover, | |
| > span:focus, | |
| > a, | |
| > a:hover, | |
| > a:focus { | |
| color: $pagination-disabled-color; | |
| background-color: $pagination-disabled-bg; | |
| border-color: $pagination-disabled-border; | |
| cursor: $cursor-disabled; | |
| } | |
| } | |
| } | |
| ul.pagination{ | |
| @media( max-width: $screen-xs-max ){ padding-left: 15px; } | |
| li { | |
| a, a:focus { color: $red; border-radius: 3px; background-color: #FFF !important; border-color: transparent; | |
| &:hover { background-color: $hover-red; color: $hover-red; } | |
| } | |
| } | |
| & > .active > span { background-color: $red; color: #FFF; border-color: $red; border-radius: 3px; border-color: $hover-red; | |
| &:hover { background-color: $hover-red; color: #FFF; border-color: #FFF; } | |
| } | |
| & > .disabled span { border-color: transparent; } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment