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">
<?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' => __('&laquo;'),
'next_text' => __('&raquo;'),
'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!