I love Bootstrap. I also love WordPress.
One issue I came across in my WordPress theme development using Bootstrap was the pagination styling. It wasn’t complete, and some edits needed to be made in order for it to look right.
Here’s what I came up with.
WordPress (ver 3.4.1) Pagination:
<div class="pagination pagination-centered"> <?php global $wp_query; $big = 999999999; // need an unlikely integer echo paginate_links( array( 'base' => str_replace( $big, '%#%', get_pagenum_link( $big ) ), 'format' => '?paged=%#%', 'show_all' => False, 'end_size' => 1, 'mid_size' => 2, 'prev_next' => True, 'prev_text' => __('«'), 'next_text' => __('»'), 'current' => max( 1, get_query_var('paged') ), 'total' => $wp_query->max_num_pages, 'type' => 'list' ) ); ?> </div>
The CSS needed for it to look right with Bootstrap (ver 2.1.1):
.pagination .dots { float: left; padding: 0 14px; line-height: 40px; text-decoration: none; background-color: white; border: 1px solid #dddddd; border-left-width: 0; } .pagination ul > .current > a, .pagination ul > .current > span { background-color: #f5f5f5; } .pagination ul > .current > a, .pagination ul > .current > span { color: #999999; cursor: default; }
That’s it! Pretty simple, and you’ll have those pagination links looking just the way you want them to as a bootstrap component within wordpress!
6 replies on “WordPress Pagination With Bootstrap”
I forgot to ask if you can give an example for breadcrumbs navigation also with WordPress and Bootstrap?
Since WP doesn’t have a standard breadcrumb widget, it would depend on which plugin you are using. I can see how a new plugin might be developed for this, though.
Thank you so much. I’m developing a theme and after a simple clicking test seems to work perfectly.
Don’t know why but I’m getting an error.
Can you describe the error you are having?
I see WP had converted some of the special characters in the PHP. The code has been fixed.