Bootstrap WordPress Pagination Using WP-Pagenavi

If you’re using a WordPress theme based on twitter bootstrap then you will want to integrate it’s elegant pagination component. You can do this by adding a new paging function or using WP-Pagenavi.

bootstrap wordpress pagination

bootstrap wordpress pagination

WP-Pagenavi. I’m a big fan of this plugin and use it in most of my WP projects. I even featured it in one of my previous posts as one of the most useful WordPress plugin.

The default HTML output upon activation shows this.

<div class="wp-pagenavi">
	<span class="pages">Page 1 of 5</span>
	<span class="current">1</span>
	<a class="page larger" href="/page/2/">2</a>
	<a class="page larger" href="/page/3/">3</a>
	<a class="page larger" href="/page/4/">4</a>
	<a class="page larger" href="/page/5/">5</a>
	<span class="extend">...</span>
	<a class="nextpostslink" href="/page/2/">»</a>
	<a class="last" href="/page/5/">Last »</a>
</div>

While Bootstrap’s block looks like this:

    <div class="pagination">
    <ul>
    <li><a href="#">Prev</a></li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">Next</a></li>
    </ul>
    </div>

One way of integrating it with Twitter Bootstrap is by overriding it with jQuery but I prefer using the built-in wp_pagenavi filter.

Just include this piece of code in your theme’s function.php file:

//attach our function to the wp_pagenavi filter
add_filter( 'wp_pagenavi', 'ik_pagination', 10, 2 );
 
//customize the PageNavi HTML before it is output
function ik_pagination($html) {
	$out = '';
 
	//wrap a's and span's in li's
	$out = str_replace("<div","",$html);
	$out = str_replace("class='wp-pagenavi'>","",$out);
	$out = str_replace("<a","<li><a",$out);	
	$out = str_replace("</a>","</a></li>",$out);
	$out = str_replace("<span","<li><span",$out);	
	$out = str_replace("</span>","</span></li>",$out);
	$out = str_replace("</div>","",$out);
 
	return '<div class="pagination pagination-centered">
			<ul>'.$out.'</ul>
		</div>';
}

For Bootstrap 3 the class goes inside the UL so make it this way:

return '<ul class="pagination pagination-centered">'.$out.'</ul>';
Don’t forget to disable the default pagenavi css under www.casinobonuses.io/ dashboard settings.

The code above should output this:

<div class="pagination">
    <ul>
		<li><span class="pages">Page 1 of 5</span></li>
		<li><span class="current">1</span></li>
		<li><a class="page larger" href="/blog/page/2/">2</a></li>
		<li><a class="page larger" href="/page/3/">3</a></li>
		<li><a class="page larger" href="/page/4/">4</a></li>
		<li><a class="page larger" href="/page/5/">5</a></li>
		<li><span class="extend">...</span></li>
		<li><a class="nextpostslink" href="/page/2/">»</a></li>
		<li><a class="last" href="/page/5/">Last »</a></li>
	</ul>
</div>
To center align just add this class: pagination-centered

WP-Pagenavi gives visitors a better user experience while browsing your WordPress site and gives plenty of flexibility which makes it a must use plugin.

Reply with a comment and share this article with your friends if you found it useful.

Like, Tweet and Share!

9 Responses to “Bootstrap WordPress Pagination Using WP-Pagenavi”

  1. Dan

    Thanks!!! Works like a charm 😀

  2. Mario

    Thank you very much man. I was looking for this solution. Helped me a lot!

    keep on the good work

  3. bumpingbell

    How about with bootstrap 3?

  4. Elece

    Hi,
    It looks Bootstrap 3.x changed the class “pagination” from the to . I’m not coder, so I tried changing the last three lines:

    return ‘
    ‘.$out.’
    ‘;

    and it worked again. Thanks Caleb!

  5. V_RocKs

    Not sure if it is a 3.0 thing or not, but it seems the pagination class must be inside the UL tag for me and not on the DIV tag (which can be eliminated).

  6. Nik

    It works for v3 removing the “” and adding the “pagination” class to the “”. However the “current” class is still applied to the “” element instead of the “”

  7. amin

    In the name of Allah,Thanks for sharing, if you want to show active item you need to add this line to ik_pagination function::

    $out = str_replace("<span class='current'","<li class='active'><span",$out);  
    
Comments are closed.
Published Last updated