Wordpress Breadcrumbs Without a Plugin
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 TitleBut all, what I have seen, displays only such an option (excluding plugins):
Home » Subcategory » Post TitleThe 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.
- paged navigation (like
-
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 | function dimox_breadcrumbs() { $delimiter = '»'; $name = 'Home'; //text for the 'Home' link $currentBefore = '<span class="current">'; $currentAfter = '</span>'; if ( !is_home() && !is_front_page() || is_paged() ) { echo '<div id="crumbs">'; global $post; $home = get_bloginfo('url'); echo '<a href="' . $home . '">' . $name . '</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 $currentBefore . 'Archive by category ''; single_cat_title(); echo ''' . $currentAfter; } 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 $currentBefore . get_the_time('d') . $currentAfter; } elseif ( is_month() ) { echo '<a href="' . get_year_link(get_the_time('Y')) . '">' . get_the_time('Y') . '</a> ' . $delimiter . ' '; echo $currentBefore . get_the_time('F') . $currentAfter; } elseif ( is_year() ) { echo $currentBefore . get_the_time('Y') . $currentAfter; } elseif ( is_single() && !is_attachment() ) { $cat = get_the_category(); $cat = $cat[0]; echo get_category_parents($cat, TRUE, ' ' . $delimiter . ' '); echo $currentBefore; the_title(); echo $currentAfter; } 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 $currentBefore; the_title(); echo $currentAfter; } elseif ( is_page() && !$post->post_parent ) { echo $currentBefore; the_title(); echo $currentAfter; } 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 $currentBefore; the_title(); echo $currentAfter; } elseif ( is_search() ) { echo $currentBefore . 'Search results for '' . get_search_query() . ''' . $currentAfter; } elseif ( is_tag() ) { echo $currentBefore . 'Posts tagged ''; single_tag_title(); echo ''' . $currentAfter; } elseif ( is_author() ) { global $author; $userdata = get_userdata($author); echo $currentBefore . 'Articles posted by ' . $userdata->display_name . $currentAfter; } elseif ( is_404() ) { echo $currentBefore . 'Error 404' . $currentAfter; } 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>'; } } |
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.
Function works on WordPress 2.5 or higher.
Very Useful and thank you very much
Wow you just made my night and it works great! I’ve been looking for something straight forward like this. Thanks!
Thanks for the code…exactly what I was looking for. Great work!
Great article! Very helpful and already in at my site. Thanks for this posting. It works very well!
Thanks for this code, it’s exactly what I needed.
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?
I found a workaround… this is fantastic! Thank you SO much!
Thank you, thank you, thank you!!!
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 :)
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
Try this – http://pastie.org/1090480
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!
Unfortunately, function is not ready for now for use on WordPress 3.0+.
Thank You very much!!! It’s work!! It’s work!!!
Hi, thanks for the nice function.
I am trying to adapt it to my needs but I guess my PHP knowledge is not strong enough .
On the single page I would like the last breadcrumb to be a link back and not the post name.
something like
home > category > return (has to be active, i.e. a link back to previous crumb, in my case the category)
thanks
Massimo
I not see a sense in such a link. You can just click on category link and this will be the same.
LOL! you are right … the fact is that I use it on a classified ads web site and the ad title is the post title but i prefer something standard there rather than the post title (some can be weird too!).
I guess I could also simply avoid that crumb on the single page. How would I do that then?
In this code:
} elseif ( is_single() ) {
$cat = get_the_category(); $cat = $cat[0];
echo get_category_parents($cat, TRUE, ' ' . $delimiter . ' ');
echo $currentBefore;
the_title();
echo $currentAfter;
remove the following:
echo $currentBefore;
the_title();
echo $currentAfter;
Hi Dimox!
I have one question:
For a link like this one: site.com/cars/?author_name=george (where ‘cars’ is a category) is it possible to have the author name in the breadcrumb?
eg. Archive by category ‘Cars’ & author ‘George’
Thank you for this neat function,
Victor
Paste this code:
if(isset($_GET['author_name'])) {
global $author;
$userdata = get_userdata($author);
echo '& author ' . $userdata->display_name;
}
after these rows:
single_cat_title();
echo '&#39;' . $currentAfter;
Thanks Dimox, that works like a charm.
I’m back :)
On single post pages that reside in certain categories instead of
“Home » Category » Subcategory » Post Name”
it only shows
“Home » Subcategory » Post Name”
Maybe the problem is in the code below?
elseif ( is_single() ) {
$cat = get_the_category(); $cat = $cat[0];
echo get_category_parents($cat, TRUE, ‘ ‘ . $delimiter . ‘ ‘);
echo $currentBefore;
the_title();
echo $currentAfter;
}
I guess that it grabs the first category (alphabetically – empiric observation) a post is found in and not the child category.
Is there a workaround?
Or maybe the problem is somewhere else.
Sorry, I don’t know how to solve this problem.
Hi dimox., im back.., last time i post this question
. Right now i just wondering how to add image attachment page description in your breadcrumb, what i mean is like this :
If in single post :
home >> category >> single post title ( just like it was )
how to do in image attachment :
home >> title of single post >> title of image attachment
here where i found these kind of breadcrumb :
http://www.lincah.com/2010-kicherer-mercedes-benz-sls-supersport-edition-black/2010-kicherer-mercedes-benz-sls-supersport-edition-black-front-angle-view
can you help me adding this to your breadcrumb so i can have similar breadcrumb result.
Thanks
I’ve made it for you =)
See the post, I’ve updated the function.
Great stuff! Thanks for the code ;)
Hi,
How would I replace
»with an image?Thank you
nevermind:
$delimiter = ‘
Cheers
Hi very neat code :) will this work with wp 3.0.1 ?
Thank you
Will work, but excluding custom post types.
Thank you Dimox.
You said that some functionality in the code will not work in wordpress 3.0,
Can you please post the code for wordpress 3.0 or tell us what to delete in the function?
Great work!
Thank you.
I can’t make the code for WordPress 3.0, because it’s hard for me.
One more question please:
How can I limit the number of child crumbs?
I.E, if I have: home > category > subCategory > subSub category
I want just: home > category > subcategory
This is not possible.
What about limiting the characters of the end child?
let’s say I have a long post title, and I want to limit the characters in the crumbs?
Can’t help anything.
replace the_title()
with
trim(substr(the_title(), 0, $maxLength))
Change $maxLength with number of characters. Untested.
Thanks, i’ll check and report back.
my mistake… I should try sleeping more.
around line 1030 replace
the_title()with
echo trim(substr(get_the_title($page->ID), 0, $maxLength));Tested. Remember to replace $maxLength with your desired number of characters.
Thanks man!
there is no line 1030…
Hi Dimox, thank you for the great code, it works fine. One last thing: In the “single page mode” I would like the last breadcrumb not to be shown.
Home » Category » Subcategory
instead of your
Home » Category » Subcategory » Post Title
How and where can I modify the code?
When deleting the code like in your comment/answer 105 there still the delimter “»” remains at the end.
Sorry, I don’t know how to remove it.
Hello,
Can you help me rewrite this code for displays a full chain of links to the current page?
http://pastie.org/1124683
Thanks you very much !
thx. easy come. easy go.
Hi,
Any idea when your breadcrumb will works with custom post types?
Don’t know. I’ve tried to make this, but it’s too hard for me for now.
This may help you.
http://wordpress.org/support/topic/pagination-with-custom-post-type-listing?replies=25
This is not what we need.