Skip to main content

Insert a Paged Blog Loop anywhere in your WordPress theme

[code]
<?php
$temp = $wp_query;
$wp_query = null;
$wp_query = new WP_Query();
$wp_query->query(‘post_type=post&posts_per_page=5′.’&paged=’.$paged); ?>

have_posts()) : $wp_query->the_post();?>


[/code]
Note that the <?php bootstrap_pagination();?> function has already been discussed in our post “Add Twitter Bootstrap Pagination to your WordPress Theme“.

I won’t spend too much time explaining this one. Just know that this will start an independent loop of your choice anywhere you want in your theme templates. And it correctly incorporates wp’s pagination feature, which can be tricky. I primarily use this code in a template I call blog.php. Many clients want either a static home page, or magazine-style home page, but still want a blog-reel displayed elsewhere (a la the common index.php). My blog.php template featuring the above code can be easily added to any internal page of their choice. Of course, there are countless ways to customize the query parameters.

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:
[code]

[/code]

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…

[code]
<?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->max_num_pages;
if(!$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”;
}
}

?>
[/code]

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.
[code]<?php $paged = $wp_query->get( ‘paged’ );
if ( ! $paged || $paged < 2 ) { /* do nothing */ }
else { bootstrap_pagination(); }
?>[/code]