How to add Bootstrap Breadcrumbs to your WordPress Theme

Another 5 minute integration…
First of all, I’m assuming you already have Bootstrap css/js linked up to your theme correctly.
Secondly, 99.9% percent of this function was created by Dimox in his post WordPress Breadcrumbs Without a Plugin. So go ahead & get your source material from him.
Lastly, All I did was swap the Bootstrap markup into his php file. Click here for the Bootstrap markup, which looks like this:
[code]

[/code]
Compare the html portions of Dimox’s php file with my modifications below:
[code]
<?php

function dimox_breadcrumbs() {

$showOnHome = 0; // 1 – show breadcrumbs on the homepage, 0 – don’t show
$delimiter = ‘<span class=”divider”>/</span>’; // delimiter between crumbs
$home = ‘Home’; // text for the ‘Home’ link
$showCurrent = 1; // 1 – show current post/page title in breadcrumbs, 0 – don’t show
$before = ‘<li class=”active”><span class=”current”>’; // tag before the current crumb
$after = ‘</span></li>’; // tag after the current crumb

global $post;
$homeLink = get_bloginfo(‘url’);

if (is_home() || is_front_page()) {

if ($showOnHome == 1) echo ‘<ul class=”breadcrumb”><li><a href=”‘ . $homeLink . ‘”>’ . $home . ‘</a></li></ul>’;

} else {

echo ‘<ul class=”breadcrumb”><li><a href=”‘ . $homeLink . ‘”>’ . $home . ‘</a> ‘ . $delimiter . ‘</li> ‘;

if ( is_category() ) {
$thisCat = get_category(get_query_var(‘cat’), false);
if ($thisCat->parent != 0) echo get_category_parents($thisCat->parent, TRUE, ‘ ‘ . $delimiter . ‘ ‘);
echo $before . ” . single_cat_title(”, false) . ” . $after;

} elseif ( is_search() ) {
echo $before . ‘Search results for “‘ . get_search_query() . ‘”‘ . $after;

} elseif ( is_day() ) {
echo ‘<li><a href=”‘ . get_year_link(get_the_time(‘Y’)) . ‘”>’ . get_the_time(‘Y’) . ‘</a> ‘ . $delimiter . ‘</li> ‘;
echo ‘<li><a href=”‘ . get_month_link(get_the_time(‘Y’),get_the_time(‘m’)) . ‘”>’ . get_the_time(‘F’) . ‘</a> ‘ . $delimiter . ‘</li> ‘;
echo $before . get_the_time(‘d’) . $after;

} elseif ( is_month() ) {
echo ‘<li><a href=”‘ . get_year_link(get_the_time(‘Y’)) . ‘”>’ . get_the_time(‘Y’) . ‘</a> ‘ . $delimiter . ‘</li> ‘;
echo $before . get_the_time(‘F’) . $after;

} elseif ( is_year() ) {
echo $before . get_the_time(‘Y’) . $after;

} elseif ( is_single() && !is_attachment() ) {
if ( get_post_type() != ‘post’ ) {
$post_type = get_post_type_object(get_post_type());
$slug = $post_type->rewrite;
echo ‘<li><a href=”‘ . $homeLink . ‘/’ . $slug[‘slug’] . ‘/”>’ . $post_type->labels->singular_name . ‘</a>’;
if ($showCurrent == 1) echo ‘ ‘ . $delimiter . ‘</li> ‘ . $before . get_the_title() . $after;
} else {
$cat = get_the_category(); $cat = $cat[0];
$cats = get_category_parents($cat, TRUE, ‘ ‘ . $delimiter . ‘</li> ‘);
if ($showCurrent == 0) $cats = preg_replace(“#^(.+)\s$delimiter\s$#”, “$1″, $cats);
echo $cats;
if ($showCurrent == 1) echo $before . get_the_title() . $after;
}

} elseif ( !is_single() && !is_page() && get_post_type() != ‘post’ && !is_404() ) {
$post_type = get_post_type_object(get_post_type());
echo $before . $post_type->labels->singular_name . $after;

} elseif ( is_attachment() ) {
$parent = get_post($post->post_parent);
$cat = get_the_category($parent->ID); $cat = $cat[0];
echo get_category_parents($cat, TRUE, ‘ ‘ . $delimiter . ‘</li> ‘);
echo ‘<li><a href=”‘ . get_permalink($parent) . ‘”>’ . $parent->post_title . ‘</a>’;
if ($showCurrent == 1) echo ‘ ‘ . $delimiter . ‘</li> ‘ . $before . get_the_title() . $after;

} elseif ( is_page() && !$post->post_parent ) {
if ($showCurrent == 1) echo $before . get_the_title() . $after;

} elseif ( is_page() && $post->post_parent ) {
$parent_id = $post->post_parent;
$breadcrumbs = array();
while ($parent_id) {
$page = get_page($parent_id);
$breadcrumbs[] = ‘<li><a href=”‘ . get_permalink($page->ID) . ‘”>’ . get_the_title($page->ID) . ‘</a>’;
$parent_id = $page->post_parent;
}
$breadcrumbs = array_reverse($breadcrumbs);
for ($i = 0; $i < count($breadcrumbs); $i++) {
echo $breadcrumbs[$i];
if ($i != count($breadcrumbs)-1) echo ‘ ‘ . $delimiter . ‘</li> ‘;
}
if ($showCurrent == 1) echo ‘ ‘ . $delimiter . ‘</li> ‘ . $before . get_the_title() . $after;

} elseif ( is_tag() ) {
echo $before . ‘Posts tagged “‘ . single_tag_title(”, false) . ‘”‘ . $after;

} elseif ( is_author() ) {
global $author;
$userdata = get_userdata($author);
echo $before . ‘Articles posted by ‘ . $userdata->display_name . $after;

} elseif ( is_404() ) {
echo $before . ‘Error 404’ . $after;
}

if ( get_query_var(‘paged’) ) {
if ( is_category() || is_day() || is_month() || is_year() || is_search() || is_tag() || is_author() ) echo ‘ (‘;
echo __(‘Page’) . ‘ ‘ . get_query_var(‘paged’);
if ( is_category() || is_day() || is_month() || is_year() || is_search() || is_tag() || is_author() ) echo ‘)’;
}

echo ‘</ul>’;

}
} // end dimox_breadcrumbs()

?>
[/code]
Blindly copying & pasting this in place of his should work hassle-free, but where’s the opportunity to learn?!?!

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]