Add Twitter Bootstrap Pagination to your WordPress Theme

Doug Support 18 Comments

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">
<ul>
	<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>
</ul>
</div>

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…


&lt;?php

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-&gt;max_num_pages;
if(!$pages)
{
$pages = 1;
}
}

if(1 != $pages)
{
echo "&lt;div class='pagination pagination-centered'&gt;&lt;ul&gt;";
if($paged &gt; 2 &amp;&amp; $paged &gt; $range+1 &amp;&amp; $showitems &lt; $pages) echo "&lt;li&gt;&lt;a href='".get_pagenum_link(1)."'&gt;&amp;laquo;&lt;/a&gt;&lt;/li&gt;";
if($paged &gt; 1 &amp;&amp; $showitems &lt; $pages) echo "&lt;li&gt;&lt;a href='".get_pagenum_link($paged - 1)."'&gt;&amp;lsaquo;&lt;/a&gt;&lt;/li&gt;";

for ($i=1; $i &lt;= $pages; $i++)
{
if (1 != $pages &amp;&amp;( !($i &gt;= $paged+$range+1 || $i &lt;= $paged-$range-1) || $pages &lt;= $showitems ))
{
echo ($paged == $i)? "&lt;li class='active'&gt;&lt;span class='current'&gt;".$i."&lt;/span&gt;&lt;/li&gt;":"&lt;li&gt;&lt;a href='".get_pagenum_link($i)."' class='inactive' &gt;".$i."&lt;/a&gt;&lt;/li&gt;";
}
}

if ($paged &lt; $pages &amp;&amp; $showitems &lt; $pages) echo "&lt;li&gt;&lt;a href='".get_pagenum_link($paged + 1)."'&gt;&amp;rsaquo;&lt;/a&gt;&lt;/li&gt;";
if ($paged &lt; $pages-1 &amp;&amp; $paged+$range-1 &lt; $pages &amp;&amp; $showitems &lt; $pages) echo "&lt;li&gt;&lt;a href='".get_pagenum_link($pages)."'&gt;&amp;raquo;&lt;/a&gt;&lt;/li&gt;";
echo "&lt;/ul&gt;&lt;/div&gt;\n";
}
}

?&gt;

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.

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

Comments 18

    1. Post
      Author
  1. Pingback: Insert a Paged Blog Loop anywhere in your WordPress theme | Lanexa.net

  2. 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?

  3. Pingback: Pagination in WordPress | kulturbanause® blog

  4. 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’?

    1. Post
      Author

      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.

  5. 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: http://www.beerbitty.com/recipes/red-meat/

    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!

  6. 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!

Leave a Reply

Your email address will not be published. Required fields are marked *