Web Design Web Development

WordPress Pagination With Bootstrap

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">
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' => __('&laquo;'),
'next_text' => __('&raquo;'),
'current' => max( 1, get_query_var('paged') ),
'total' => $wp_query->max_num_pages,
'type' => 'list'
) );

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!

By Tim Bunch

Tim Bunch is a Web Developer from Rockaway Beach, Oregon. As a web standards fanatic, he passionately pursues best practices. He also actively engages people on a wide range of topics in a variety of social media networks. Tim is also an avid Wordpress developer, music maker, coffee drinker, and child raiser. @timbunch

6 replies on “WordPress Pagination With Bootstrap”

Leave a Reply