Add Twitter Bootstrap Pagination to your WordPress Theme

Hi. I’ve been focusing a lot of my efforts on integrating Twitter’s Bootstrap with WordPress themes. Here is one of the easiest integrations so far! Thanks a heaping ton to this article: How to Build a WordPress Post Pagination Without a Plugin. The base code is super light weight, and it works on index.php, category.php, & archive.php right out of the box.
I’ll assume you’ve already got Twitter Bootstrap CSS & Javascript installed for WordPress in your own special way. So, next…
1). Visit the above link and cut & paste the code into your functions.php
Or, better yet, link to a separate file to keep things clean. The articles instructions are straight forward. I’ve also Found & Replaced “kriesi” with “bootstrap” (1 change).
2). Hack in the Bootstrap markup.
Bootstrap Pagination is explained here. The markup looks something like this:

<div class="pagination">
	<li class="disabled"><a href="#">Prev</a></li>
	<li class="active"><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="#">Next</a></li>

So we just have to crawl through our PHP code to discover how to recreate this structure.
We need to add the <ul> tag immediately after the <div class=”pagination”> (and the closing tag immediately before). And we need to surround all the pagination elements, i.e. <a> and <span>, with <li>...</li>. Lastly, add the class active to the <li> surrounding <span class="current">.
*The disabled class is not necessary because the base code already makes those elements invisible.

Here is my finished product…


function bootstrap_pagination($pages = '', $range = 2)
$showitems = ($range * 2)+1;

global $paged;
if(empty($paged)) $paged = 1;

if($pages == '')
global $wp_query;
$pages = $wp_query->max_num_pages;
$pages = 1;

if(1 != $pages)
echo "<div class='pagination pagination-centered'><ul>";
if($paged > 2 && $paged > $range+1 && $showitems < $pages) echo "<li><a href='".get_pagenum_link(1)."'>&laquo;</a></li>";
if($paged > 1 && $showitems < $pages) echo "<li><a href='".get_pagenum_link($paged - 1)."'>&lsaquo;</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)."'>&rsaquo;</a></li>";
if ($paged < $pages-1 && $paged+$range-1 < $pages && $showitems < $pages) echo "<li><a href='".get_pagenum_link($pages)."'>&raquo;</a></li>";
echo "</ul></div>\n";


Bonus Footage

You may have noticed on the linked instructions that there is a very simple template tag to implement your new feature — <?php bootstrap_pagination();?>. I like to use this tag at the bottom of my list of posts. So here’s a slight modification that I insert at the top of my list of posts which is only displayed on ‘paged’ pages.

<?php $paged = $wp_query->get( 'paged' );
if ( ! $paged || $paged < 2 ) { /* do nothing */ }
else { bootstrap_pagination(); }


18 Responses to “Add Twitter Bootstrap Pagination to your WordPress Theme”

  • Andreas Norman says: Sep 24, 2012 at 12:21 am

    This code somehow broke admin for me. Whenever I save or post something I get a blank screen. Removing this code fixes that. I have no idea why though :)

    • doug says: Sep 24, 2012 at 6:41 am

      I'm sorry to hear that! I'm not sure what could be causing that. All I can suggest, at this point, is to try the above linked tutorial on its own just to see if that works -- I don't usually trouble shot this level of php. Wish I could be more help.

      • Andreas Norman says: Nov 15, 2012 at 8:57 am

        Turns out I did a crappy job at copying your code and some characters got lost in the process. It works now :)

  • Insert a Paged Blog Loop anywhere in your WordPress theme | says: Mar 12, 2013 at 10:22 am

    [...] Note that the <?php bootstrap_pagination();?> function has already been discussed here. [...]

  • tuan says: Jul 16, 2013 at 12:32 am

    Thank you, You saved my time.

  • Evgeny says: Aug 3, 2013 at 8:18 am

    Hi! Everythig works perfectly but sadly there is not such things as shown in the bootstrap website, the « and », before and after numbers. Don't you know how to add them?

  • Evgeny says: Aug 3, 2013 at 9:50 am

    I found, it this: if ($paged > 1) { $first_page_text = "«"; echo ''.$first_page_text.''; } But it works in another code, I don't know where to put it in this code.

  • Evgeny says: Aug 3, 2013 at 10:16 am

    Sorry, it was no right thing, there: $prevposts = get_previous_posts_link('«'); next_posts_link('»');

  • Pagination in WordPress | kulturbanause® blog says: Sep 27, 2013 at 2:35 am

    […] Add Twitter Bootstrap Pagination to your WordPress Theme […]

  • Ben Carter says: Feb 27, 2014 at 3:23 am

    Hi, real nice function here, thanks for your work! However, I've just run into an issue when trying to use this on a 'page', the pagination just doesn't appear. $q->found_posts is displaying as it should and it displays the first 10 results. The exact same code works absolutely fine if I use this on my taxonomy.php file. Any ideas why it wouldn't seem to work on a 'page'?

    • Doug says: May 6, 2014 at 5:54 pm

      I'm not sure I understand the expected behavior here. If you start a query loop on any type of template, it should paginate the list of entries generated. I haven't tested on Pages, but works for posts, categories, tags, custom post types. etc.

  • Anh Tran says: Apr 30, 2014 at 8:42 am

    Looks like you're reinvent the wheel "paginate_links" function. I'm wondering if there's better way to do that.

  • OOPThemes says: May 12, 2014 at 9:01 am

    Thanks Admin Nice, clean and helpful, however I have created a snippet for pagination to use in my theme and also shared it on github. feel free to contribute.

  • Andrew Johnson says: Aug 4, 2014 at 6:20 am

    Great tutorial! Thanks for sharing. The pagination is working great for me, but with one minor problem. I'm curious is anyone else is experiencing the same issue? I'm noticing that on some instances, the pagination is displaying two more pages than actually exist. To see what I mean, check out this link: There are 4 pages listed, when in reality there are only two pages worth of content. Do you know how I can fix this? Any help would be much appreciated! Thanks again for the tutorial. Great work!

  • David says: Sep 23, 2014 at 2:10 am

    Hi Doug, The code is of immense help. There are other pagination scripts that show how to add a pagination but there doesn't seem to be enough tutorials on pagination along with bootstrap. Thanks a ton for sharing the same!

  • Hasan Zahran says: Nov 23, 2014 at 5:34 am

    great article :) but just one note to be compatible with new bootstrap just change this echo ""; Thanks again :)

  • Luis says: Feb 23, 2016 at 2:54 pm

    Works perfect! thanks!

Leave a Comment