Wordpress Breadcrumbs Without a Plugin

301109'

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 href="' . $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 href="' . get_year_link(get_the_time('Y')) . '">' . get_the_time('Y') . '</a> ' . $delimiter . ' ';
      echo '<a href="' . 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 href="' . 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 href="' . $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 href="' . 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 href="' . 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 (384):

50

@

May 16, 2010 at 7:44 am
abz said:

Bravo my friend!

Excellent work! Thank you for this piece of code. Works like a treat.

Keep up the good work!

:)

Reply
51

May 16, 2010 at 9:44 am
azrain said:

that is very useful breadcrumb function. been searching for quite some times. nice work, Dimox! :D

Reply
53

May 27, 2010 at 12:18 pm
Andrew said:

I ran into a problem when I wanted to exclude certain pages from the bread crumb navigation. It was an easy fix, but I had to hard code it. Here is what I did.

Find this line of code where the bread crumbs are added to the array:

$breadcrumbs[] = ‘<a>ID) . ‘”>’ . get_the_title($page->ID) . ‘‘;}

And then simply wrap them in a the following conditional statement so your code looks like this

if($page->ID != 249 && $page->ID != 23) {
$breadcrumbs[] = ‘<a>ID) . ‘”>’ . get_the_title($page->ID) . ‘‘;}
$parent_id = $page->post_parent;
}

The part where it saids $page->ID != 249 is the page id that I am hiding. You can add multiple pages with the && operator. The code looks kinda weird in the comment box, its not showing all the html but I think you can get the idea.

Reply
54

May 28, 2010 at 12:49 pm
Michael Caputo said:

Hey there,
just wondering if theres anyone who has modified this function to work with Custom Post types, and Taxonomies.

Any help would be appreciated!

Reply
- 65
  
  June 16, 2010 at 2:46 am
  Carlo Fardella said:
  
  Hi Michael,
  
  Not to sure if this snippet will help you, but it did the job for me:
  
  } elseif ( is_page() && $post->post_parent || get_post_type() == 'info') {
  
  I simply included get_post_type() == ‘info’, where info is the name of my custom post type.
  
  Hope it helps,
  C
  
  Reply
55

June 1, 2010 at 10:31 am
Suzette said:

Thank you for this function! The other breadcrumb functions I found did not do multi-levels, but this one does it beautifully! Thank you for sharing this!

Reply
56

June 1, 2010 at 9:46 pm
abdul chalik said:

great..thanks dimox

Reply
57

June 3, 2010 at 8:10 am
Arnoud said:

Great plugin!

I’m working with Wordpress 3.0 RC1 now, and I’m having trouble getting the post_type (custom category) in the $cat.
Any ideas how to replace the ‘get_category_parents’ ??
} elseif ( is_single() && $post->post_type ) { $cat = get_the_category(); $cat = $cat[0]; echo get_category_parents($cat, TRUE, ' ' . $delimiter . ' '); }

Reply
58

June 8, 2010 at 4:49 am
Arnoud said:

Please, does anyone know how to get the category parent if this is a custom post_type?

Reply
- 59
  
  June 8, 2010 at 7:05 am
  Michael Caputo said:
  
  I’m still looking as well!!
  
  Reply
62

June 11, 2010 at 3:31 am
Elisabeth Irgens said:

Wonderful! Thank you for sharing.

Reply
63

@

June 14, 2010 at 4:46 pm
Carlos said:

Good work my friend, but how can I avoid link in breadcrumb? I try to change this line of code

$breadcrumbs[] = '<a>ID) . '">' . get_the_title($page->ID) . '';

to this

$breadcrumbs[] = get_permalink($page->ID) . '">' . get_the_title($page->ID) ;

but I didn´t have a good result; Can You help me? Thanks a lot!

Reply
- 64
  
  June 15, 2010 at 12:27 am
  Dimox said:
  
  You have to make row of changes in the function, because there is several link codes.
  
  Reply
66

June 16, 2010 at 7:32 am
abdullah.okm said:

Very nice post.Keep it up!

Reply
67

June 21, 2010 at 3:59 am
Arnoud said:

Will this plugin be updated to work with Wordpress 3.0 custom post types?

Reply
- 68
  
  June 21, 2010 at 6:34 am
  Dimox said:
  
  Will be necessarily.
  
  Reply
  - 70
    
    June 28, 2010 at 9:50 pm
    Arnoud said:
    
    Can’t wait for it… I’m now using manual breadcrumbs on the custom post_type pages. Would be great to have it all covered by the Dimox breadcrumbs dynamically.
    
    Reply
69

June 28, 2010 at 6:50 pm
AJ said:

Everything works great. You’re just missing a closing bracket at the end. :) thanks!

Reply
71

June 29, 2010 at 6:57 pm
iwanttobelieve said:

Hi!

I just want to know how you do all the numbering of comments as well as this comment textarea’s buttons. Btw, does your comment numbering method support paging?

Please advise, thanks!

Reply
- 72
  
  June 29, 2010 at 7:58 pm
  Dimox said:
  
  I’m using this plugin.
  
  Reply
73

June 29, 2010 at 9:49 pm
iwanttobelieve said:

How about the buttons in your comment’s textarea? Thanks!

Reply
- 74
  
  June 29, 2010 at 9:55 pm
  Dimox said:
  
  http://dimox.net/jquery-comment-preview-wordpress-plugin/
  
  Reply
75

July 5, 2010 at 10:41 am
arun chandran said:

thanks..glad to meet your code………..

Reply
80

@

July 15, 2010 at 12:28 pm
Jackie said:

working beautifully :)
Thanks a whole bunch

Reply
81

July 16, 2010 at 8:27 pm
Bruce D. Campbell said:

Hi Dimox,

I would really like to a demonstration of your breadcrumbs code. In general I can understand best by seeing something in action. Some coders provide and some don’t.

Also I am using your Spectrum template however I wanted to modify both the top and sidebar menu.

For the top I would like use drop down menu and for side an accordion menu. Is it possible? Any suggestions?

I love the design and it fits my page eCurrentHawaii.com Thanks for your great work.

Reply
- 82
  
  July 17, 2010 at 2:50 am
  Dimox said:
  
  Spectrum template is not mine.
  
  Reply
83

July 19, 2010 at 7:41 am
Jennifer R said:

Very great way to add the beadcrumb to the Wordpress site but could I have a question that was it works well in WP 3.0 version?

Reply
- 84
  
  July 19, 2010 at 8:48 am
  Dimox said:
  
  Does not works with a custom post types and taxonomies.
  
  Reply
85

July 22, 2010 at 11:17 am
Michelle said:

Really useful, just wanted to say thankyou :)

Reply
86

July 23, 2010 at 12:15 am
ashok said:

Very Useful and thank you very much

Reply
87

July 28, 2010 at 1:28 am
linda said:

Wow you just made my night and it works great! I’ve been looking for something straight forward like this. Thanks!

Reply
88

July 29, 2010 at 4:50 am
Mina said:

Thanks for the code…exactly what I was looking for. Great work!

Reply
89

July 29, 2010 at 12:57 pm
Stefan said:

Great article! Very helpful and already in at my site. Thanks for this posting. It works very well!

Reply
90

July 30, 2010 at 1:19 am
Scott Bush said:

Thanks for this code, it’s exactly what I needed.

Reply
91

August 1, 2010 at 11:12 pm
Nathan said:

This is great, but for some reason I don’t get a breadcrumb that tells me I’m on the main page. So, for the about page I’ll get Home / About, but I need to have just Home on the home page. Is there any way to do that?

Reply
- 92
  
  August 1, 2010 at 11:20 pm
  Nathan said:
  
  I found a workaround… this is fantastic! Thank you SO much!
  
  Reply
  - 158
    
    @
    
    October 9, 2010 at 12:54 pm
    blahblah said:
    
    What’s the workaround? I can’t figure it out.
    
    Reply
93

August 4, 2010 at 5:43 am
Tobias said:

Thank you, thank you, thank you!!!

Reply
94

@

August 9, 2010 at 11:03 am
Lee H said:

You Sir, are my hero. I’ve tried many breadcrumb plugins that came close to my needs but all the bloated code made my brain hurt when trying to edit. Your solution has a small footprint and is easy to implement my changes.
Thanks so much :)

Reply
95

August 13, 2010 at 7:11 am
max said:

Dear admin, I just want to add my blog description in HOME.. how is the way to do that.., here is for example :
> If i am in Homepage then the code will shown :
Home >> Description of my blog
> If iam in page 2 of my blog then the code will shown :
Home >> Description of my blog >> Page 2

Thats all i wanna ask.. i hope you could provide me with the solution that you have.. thanks.

Max

Reply
- 96
  
  August 13, 2010 at 8:30 am
  Dimox said:
  
  Try this – http://pastie.org/1090480
  
  Reply
97

August 18, 2010 at 9:12 am
Ethan said:

Dimox,

You have written a fantastic breadcrumb program! Thank you for sharing it with the WordPress community.

One question for you… when ever I try to display the breadcrumb on a custom post type page I get this error: “Catchable fatal error: Object of class WP_Error could not be converted to string in /xx/public_html/wp-content/themes/xx/functions.php on line 379″

Any thoughts on how I could correct this?

Thanks again!

Reply
- 99
  
  August 18, 2010 at 10:45 pm
  Dimox said:
  
  Unfortunately, function is not ready for now for use on WordPress 3.0+.
  
  Reply
  - 155
    
    @
    
    October 3, 2010 at 11:42 pm
    Kimi said:
    
    Are you sure? i followed your code and it worked well with wp 3.0.1
    
    Thank you for really great share!
    
    Reply
    - 156
      
      October 4, 2010 at 2:29 am
      Dimox said:
      
      It will not work, if you will use custom post types. In another cases all right.
      
      Reply

Wordpress Breadcrumbs Without a Plugin

Features of my version of WordPress breadcrumbs

WordPress breadcrumbs function code

Cоmmеnts (384):

Lеаvе а соmmеnt

Tag Cloud