Wordpress Breadcrumbs Without a Plugin

301109'

389 Comments

Written by Dimox

Breadcrumbs is an important element of a web site navigation, which boosts his usability. Especially it concerns to a sites with a complex structure. Unfortunatelly, I don’t use breadcrumbs on my sites, may be because their structure is very simple or because I could not find a way of making breadcrumbs, suitable for me.

I have seen a different ways of a breadcrumbs implementation on WordPress sites, but not one of them I does not like, because all of them does not display a full chain of links. So I have created my version of WordPress breadcrumbs without a plugin.

Yes, there is a ready plugins for WordPress breadcrumbs, but I prefer to use a short code snippets, which doing the same.

Features of my version of WordPress breadcrumbs

Displays a full chain of links to the current page. For example, if the current post is in a second level category, so breadcrumbs will looks like this:

Home » Category » Subcategory » Post Title

But all, what I have seen, displays only such an option (excluding plugins):

Home » Subcategory » Post Title

The same applies to pages and subpages. For example, for a 3rd level page breadcrumbs will looks like this:

Home » Page Level 1 » Page Level 2 » Page Level 3
Breadcrumbs is appearing on a following types of WordPress pages:
- paged navigation (like sitename.com/page/2/);
- category archive;
- tag archive;
- daily archive;
- monthly archive;
- yearly archive;
- author archive;
- single post page;
- single page;
- attachment page;
- search results;
- 404 error page.
adding a page number (if archive page is second or more);
custom symbol of delimiter;
custom text for a ‘Home’ link;
current crumb styling.

WordPress breadcrumbs function code

function dimox_breadcrumbs() {
 
  $delimiter = '&raquo;';
  $home = 'Home'; // text for the 'Home' link
  $before = '<span class="current">'; // tag before the current crumb
  $after = '</span>'; // tag after the current crumb
 
  if ( !is_home() && !is_front_page() || is_paged() ) {
 
    echo '<div id="crumbs">';
 
    global $post;
    $homeLink = get_bloginfo('url');
    echo '<a class="' . $homeLink . '">' . $home . '</a> ' . $delimiter . ' ';
 
    if ( is_category() ) {
      global $wp_query;
      $cat_obj = $wp_query->get_queried_object();
      $thisCat = $cat_obj->term_id;
      $thisCat = get_category($thisCat);
      $parentCat = get_category($thisCat->parent);
      if ($thisCat->parent != 0) echo(get_category_parents($parentCat, TRUE, ' ' . $delimiter . ' '));
      echo $before . 'Archive by category "' . single_cat_title('', false) . '"' . $after;
 
    } elseif ( is_day() ) {
      echo '<a class="' . get_year_link(get_the_time('Y')) . '">' . get_the_time('Y') . '</a> ' . $delimiter . ' ';
      echo '<a class="' . get_month_link(get_the_time('Y'),get_the_time('m')) . '">' . get_the_time('F') . '</a> ' . $delimiter . ' ';
      echo $before . get_the_time('d') . $after;
 
    } elseif ( is_month() ) {
      echo '<a class="' . get_year_link(get_the_time('Y')) . '">' . get_the_time('Y') . '</a> ' . $delimiter . ' ';
      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 '<a class="' . $homeLink . '/' . $slug['slug'] . '/">' . $post_type->labels->singular_name . '</a> ' . $delimiter . ' ';
        echo $before . get_the_title() . $after;
      } else {
        $cat = get_the_category(); $cat = $cat[0];
        echo get_category_parents($cat, TRUE, ' ' . $delimiter . ' ');
        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 . ' ');
      echo '<a class="' . get_permalink($parent) . '">' . $parent->post_title . '</a> ' . $delimiter . ' ';
      echo $before . get_the_title() . $after;
 
    } elseif ( is_page() && !$post->post_parent ) {
      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[] = '<a class="' . get_permalink($page->ID) . '">' . get_the_title($page->ID) . '</a>';
        $parent_id  = $page->post_parent;
      }
      $breadcrumbs = array_reverse($breadcrumbs);
      foreach ($breadcrumbs as $crumb) echo $crumb . ' ' . $delimiter . ' ';
      echo $before . get_the_title() . $after;
 
    } elseif ( is_search() ) {
      echo $before . 'Search results for "' . get_search_query() . '"' . $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 '</div>';
 
  }
} // end dimox_breadcrumbs()

Simply paste this function into a functions.php file of your theme and then paste the following code in a place of your theme, where breadcrumbs must appearing:

<?php if (function_exists('dimox_breadcrumbs')) dimox_breadcrumbs(); ?>

All that remains to do for now, is to design your breadcrumbs with CSS. You can use #crumbs for styling breadcrumbs block and #crumbs .current for styling a current crumb.

You can also look at breadcrumbs video tutorial, which show you how to install this function on TwentyTen WordPress theme.

Function works on WordPress 3.0 or higher.

Category: WordPress

Tagged with: breadcrumbs, function, WordPress

Next post

Previous post

Cоmmеnts (389):

376

January 26, 2012 at 5:07 pm
Ken said:

Great code works for the most part.

Couple things I noticed:
When doing a search and the first item that is returned in the query is a “page” the breadcrumb reads “Home » Page” instead of “Home » Search results for “about”. Any idea what is causing it to return the post format?

Second is that when the search result comes back as nothing found the bread crumb result is just “Home » ” is there a way to make it read ‘Home » Search results for “searched item” or ‘Home » Nothing Found’?

Reply
- 377
  
  January 27, 2012 at 12:58 am
  Dimox said:
  
  When doing a search and the first item that is returned in the query is a “page” the breadcrumb reads “Home » Page” instead of “Home » Search results for “about”. Any idea what is causing it to return the post format?
  
  May be reason in your theme or in some plugin you using.
  
  Second is that when the search result comes back as nothing found the bread crumb result is just “Home » ” is there a way to make it read ‘Home » Search results for “searched item” or ‘Home » Nothing Found’?
  
  Unfortunately, I don’t know how to make this. WordPress has no a conditional tag for situation when nothing found.
  
  Reply
378

@

January 30, 2012 at 4:19 pm
RadekJ said:

Man, you’re a star, works like a gem! Thanks a mil!

Reply
379

February 3, 2012 at 7:43 am
Bob Bunting said:

Hi Dimox,

Thanks for this code!

A while back I had used it for one of my sites, and it seemed to have worked just fine.

Now, I’m trying to use it on another site and all that the code displays (everytime) is “Home>>About Us:”…no matter which page I have selected….it never changes to display the currently selected page. The only exception being that the breadcrumb display goes blank when the Home page is selected.

Any ideas as to what might be wrong and/or how I can fix it?

Thanks

Bob

Reply
- 380
  
  February 3, 2012 at 8:38 am
  Dimox said:
  
  I think the reason somewhere in your theme.
  
  Reply
381

February 3, 2012 at 10:39 am
Bob Bunting said:

Yes, you’re right!

The problem seems to be with the them…since when I changed to a different theme, the code seems to work just fine again.

So…what do you think might be the problem with the other them and/or how I can fix the problem?

Thanks for your continued support…appreciate it.

Bob

Reply
- 382
  
  February 3, 2012 at 10:51 am
  Dimox said:
  
  I don’t imagine that’s the problem.
  
  Reply
383

February 3, 2012 at 10:57 am
Bob Bunting said:

Sorry Dimox…I don’t get it!

I thought you said (in your earlier post) that the problem was with the theme…..and then when I ask you what might be the problem with the theme…..you say that there might not be a problem with the theme?

So where could the problem be?

Reply
- 384
  
  February 3, 2012 at 12:20 pm
  Dimox said:
  
  I mean I don’t know where exactly might be a problem in your theme.
  
  Reply
386

February 9, 2012 at 10:09 am
Bob Bunting said:

Hi Dimox,

What do I need to do in order to force “Home” to be displayed, when on the Home page?

By default, nothing shows up in the breadcrumb section when the Home page is selected.

Thanks.

BB

Reply
- 388
  
  February 10, 2012 at 12:50 am
  Dimox said:
  
  Answer is here.
  
  Reply
387

@

February 9, 2012 at 2:47 pm
Jonathan said:

Any chance of updating this code to work with custom post types? I have been using it for years but not I have created some custom post types and it causes a PHP error on those posts. I have searched high and low for