Breadcrumbs for WordPress Themes with Bootstrap 3

Previously, I have used the Yoast breadcrumbs for this blog. Bootstrap 3 also offers some nice breadcrumbs and I want to explain how to use them in a WordPress theme. I’m using the Roots theme but this should work in every theme that uses Bootstrap 3.

The Code

We need to insert two pieces of code. The PHP function that creates the breadcrumbs and a function call to insert the breadcrumbs. The breadcrumb function looks like this:

function custom_breadcrumb() {
  if(!is_home()) {
    echo '<ol class="breadcrumb">';
    echo '<li><a href="'.get_option('home').'">Home</a></li>';
    if (is_single()) {
      echo '<li>';
      the_category(', ');
      echo '</li>';
      if (is_single()) {
        echo '<li>';
        the_title();
        echo '</li>';
      }
    } elseif (is_category()) {
      echo '<li>';
      single_cat_title();
      echo '</li>';
    } elseif (is_page() && (!is_front_page())) {
      echo '<li>';
      the_title();
      echo '</li>';
    } elseif (is_tag()) {
      echo '<li>Tag: ';
      single_tag_title();
      echo '</li>';
    } elseif (is_day()) {
      echo'<li>Archive for ';
      the_time('F jS, Y');
      echo'</li>';
    } elseif (is_month()) {
      echo'<li>Archive for ';
      the_time('F, Y');
      echo'</li>';
    } elseif (is_year()) {
      echo'<li>Archive for ';
      the_time('Y');
      echo'</li>';
    } elseif (is_author()) {
      echo'<li>Author Archives';
      echo'</li>';
    } elseif (isset($_GET['paged']) && !empty($_GET['paged'])) {
      echo '<li>Blog Archives';
      echo'</li>';
    } elseif (is_search()) {
      echo'<li>Search Results';
      echo'</li>';
    }
    echo '</ol>';
  }
}

When using the Roots theme, you add this function to lib/custom.php.
Now, you can use the breadcrumbs in your theme with:

<?php
  if ( function_exists('custom_breadcrumb') ) {
    custom_breadcrumb();
  }
?>

Again for Roots, I placed it in base.php inside <div class="main ...>:

<div class="main <?php echo roots_main_class(); ?>" role="main">
  <?php
    if ( function_exists('custom_breadcrumb') ) {
      custom_breadcrumb();
    }
  ?>
  <?php include roots_template_path(); ?>
</div><!-- /.main -->

The resulting breadcrumbs should look like this:
bootstrap-3-breadcrumbs

Older Versions of Bootstrap

The above code works with Bootstrap 3.0.0. You probably have to preplace some HTML elements in older versions. For example, compare the resulting breadcrumbs in version 3.0.0 with the breadcrumbs for Bootstrap 2.3.2:

Bootstrap 3.0.0 breadcrumbs:

<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Library</a></li>
  <li class="active">Data</li>
</ol>

Bootstrap 2.3.2 breadcrumbs:

<ul class="breadcrumb">
  <li><a href="#">Home</a> <span class="divider">/</span></li>
  <li><a href="#">Library</a> <span class="divider">/</span></li>
  <li class="active">Data</li>
</ul>

As you can see, the dividers have to be declared in older versions which is not necessary in Bootstrap 3.0.0.

The code for my theme is stored in a GitHub repository so have a look if you are interested.

15 Responses to “Breadcrumbs for WordPress Themes with Bootstrap 3”

  1. Gavin Jaynes

    Awesome – thanks. To stop the home page saying ( home/home ) I changed line 20 to this:

    } elseif (is_page() && (!is_front_page()) ) {

    Reply
  2. Onse

    I believe that the check for “isset($_GET[‘paged’]) && !empty($_GET[‘paged’])” is redundant. Citing the manual for PHP’s empty-function: “A variable is considered empty if it does not exist or if its value equals FALSE” [1]

    [1]=PHP: empty – Manual, http://php.net/empty – retrieved 28.12.2013.

    Reply
  3. Ash Hitchcock

    Hi, the following line is missing the last closing bracket:
    } elseif (is_page() && (!is_front_page()) {

    should be …

    } elseif (is_page() && (!is_front_page())) {

    Reply
  4. Tanbin Islam Siyam

    Hello, found your solution in Brew theme. I have added following lines to check custom post type archive.

    elseif (is_post_type_archive()) {
    $obj = get_post_type_object( get_query_var(‘post_type’) );
    echo”. $obj->labels->name;
    echo”;
    }

    Reply
  5. Tim Fetter

    Perfect! Thanks so much.

    Reply
  6. Andreas

    Hi Martin, thanks for that great piece of code. After tinkering with several breadcrumbs plugins this is what I needed – though have some trouble with custom taxonomies… – any idea?

    Reply
  7. Daniel

    Hi,
    great snippet! I just want to show a modification, to show a page’s parent, if existing.

    i changed:

    } elseif (is_page() && (!is_front_page())) {
    echo ”;
    the_title();
    echo ”;

    to:

    } elseif (is_page() && (!is_front_page())) {
    if ( $post->post_parent ) {
    echo ”;
    echo ‘post_parent) . ‘”>’ . get_the_title($post->post_parent) . ‘‘;
    echo ”;
    }
    echo ”;
    the_title();
    echo ”;

    Maybe someone’s looking for this solution.

    Reply
    • Mike

      Hey Daniel!

      I had a look at your parent code, which would be really handy to add in, but the line:
      echo ‘post_parent) . ‘”>’ . get_the_title($post->post_parent) . ‘‘;
      Isn’t right.. Could you please check it out and maybe post up the correct code?

      Cheers mate!
      Mike

      Reply
  8. Matt

    Hi Guys. I also wanted the post parent link with your breadcrumb function! And i came up with this solution before i found your page :
    pass $post into the function like this :

    here is the function:

    function custom_breadcrumb($postdata) {
    // skip lines
    } elseif (is_page()) {
      if ( is_page() && $postdata->post_parent > 0 ) { 
      $parent_id = $postdata->post_parent;
      $ptitle    = get_the_title($parent_id);
      $plink     = get_permalink($parent_id);
      echo '<a href="'.$plink.'" rel="nofollow">'.$ptitle.'</a>';
    }
    echo ''; the_title(); echo '';
    } elseif (is_tag()) {
    // continue function
    

    I use a custom variation of brew master wp starter theme, which has your breadcrumb function built in.
    http://danvswild.com/brew/

    Matt

    Reply
    • Martin Körner

      Hi Matt, sorry that it took me so long to get back to your comment. I fixed the displaying of your code (and hope that it’s correct now).

      Reply

Leave a Reply to Tanbin Islam Siyam

Click here to cancel reply.