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 | function dimox_breadcrumbs() { $delimiter = '»'; $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.
Thank you for the code Dimox. It’s working well for me so far.
@Stanley, your are welcome.
Dimox after using the above codes the breadcrumbs for my single post shows like this :
Home » Health and Fitness » Eyes Vision » Orange Sunglasses For Better Personal Appearance
I want all the post pages to show like this :
Home » Health and Fitness » Eyes Vision »
Just like in articlesss article directory(http://articlesss.com/clothing-and-items-that-are-needed-for-nursing-mothers/)
Can you tell me what i need to tweak in the functions to display breadcrumbs that way.
Thank you Dimox
Replace all
the_title();(3 times) on//the_title();.Explained very well.
Thanks, Veera.
Similar post is expected from me very soon. possibly tomorrow.
so easy,, thx for sharing.
Thank you very much…
Excelente explicación, incluso para los que no tenemos el ingles como lengua nativa.
Gracias.
One problem: doesn’t work for a single post if the post is contained in multiple categories, because you’re using get_category_parents() which will list all the sub-categories and not just the one currently applicable.
Yes. But I always publish posts in only one category, therefore for me this is not a problem.
Very well done. I’ve looked (and tried) three other codes and your’s is the best, easiest and most complete bread crumb for WordPress.
I use a custom home page so I get Home > Home but I just changed the 2nd line in the function to $name = ‘You are here » Front Page’;
Thanks Dimox!
I’m glad. You are welcome.
Dimox,
Here’s a question as I’ve been testing out your code:
1) how to “strong” the last breadcrumb (current crumb)
2) special 404.php error page breadcrumb (”sorry, we’ll check into this”)
Looking forward to your help!
It’s necessary to make a row of change in the whole function. I will update the code as soon as I find a time (may be on this weekend).
Yes, I wanted to add this earlier, but forgot. Will be done soon.
Thanks for your comments.
I’ve updated the function. Now you can use
.currentclass for styling a current crumb.Hi Dimox – this is a great solution, very simple and lightweight to implement.
Can you suggest a tweak which would result in the breadcrumb just showing Home rather than Home > Home on the home page when using a custom home page?
Thanks
Hi, Michael. Thanks for comment. I will try to find a solution.
I use a custom home page so I get Home > Home but I just changed the 2nd line in the function to $name = ‘You are here » Front Page’;
Hi Dimox
I’ve been playing around with the code to find a solution to the issue I posted above. I just added an if loop to display only the home link (without delimiter) if the page is the front page. Then separated out the home link (with delimiter) as a separate string (I’ve called it $homelink) and echoed it out before the other breadcrumbs stuff for all the other types of page. This seems to work fine on my site and might be useful to others using a custom home page.
Unfortunately the code doesn’t seem to display properly in the comments here when added with the code button (at least not in preview), so I can’t post it here but I can email the code I have come up with you’d like to have a look?
I have made only one change, in this row:
if ( !is_home() || !is_front_page() || is_paged() ) {I’ve replaced the first
||on&&.The goal of this changing – do not display breadcrumbs on the homepage, because, IMHO, there is no need to show it there.
wonderful code! this has made my latest project so much easier – thank you!
if you could help me with this problem, I would really appreciate it…
I have a custom homepage…
when I go to my blog homepage, I would like to see
Home >> Name of Blog Home Page
I can get the ‘Home >>’ bit by removing !is_home() from the start of the function but it still won’t display current page name…
Ideally if on a blog archive page, I would like to see this too, e.g.
Home >> Name of Blog Home Page >> name of tag
Home >> Name of Blog Home Page >> name of category
etc etc…
I hope that makes sense!! Any ideas?
Thank you so much!
By only words it’s difficult to understand that you want to get .
Sorry!! ;o)
Here is my development site with your code:
http://www.loulouweb.co.uk/clients/cap/
(very much a WIP, not near finished!!!!!)
The breadcrumbs work brilliantly on all the pages…
The blog ‘home’ is this page (a subpage under ‘About APASSION’):
http://www.loulouweb.co.uk/clients/cap/about-apassion/the-apassion-blog
Breadcrumbs only shows:
Home >>
But I would like:
Home >> The APASSION blog
Month archive:
http://www.loulouweb.co.uk/clients/cap/2010/07
Breadcrumbs only shows:
Home >> 2010 >> July
But I would like:
Home >> The APASSION blog >> 2010 >> July
so that people can click back to the main blog “home” page in the breadcrumbs as well as the site homepage…
…thank you for your help, I do appreciate that you are probably very busy ;o)
May be try to replace this row:
echo '<a href="' . $home . '">' . $name . '</a> ' . $delimiter . ' ';on the following:
echo '<a href="' . $home . '">' . $name . '</a> ' . $delimiter . ' <a href="http://www.loulouweb.co.uk/clients/cap/about-apassion/the-apassion-blog">The APASSION blog</a> ' . $delimiter . ' ';Hi Dimox,
I modded your code a bit to let it work on WordPress Mu as site-wide breadcrumbs. Anyone interested in the solution feel free to use it and thanks to Dimox for a great function!
http://seoserpent.com/wpmu-sitewide-breadcrumbs-2010
Thanks for the addition, this will be helpful for WP MU users.
Thank you very much
It is working great. Thanks!!!
Hello Dimox
When a post is in multiple categories, do you think it’s possible to display only the category which was searched… not the default category for a post ?
If you can get that working this piece of code will be unbeatable.
Regards, Jacinta.
Sorry, I don’t know how to do this.
Just what I was looking for, great work!
Thanks very much Dimox.
Thanks Dimox! This is (as others have pointed out) the best code to display breadcrumbs in Wordpress without a plugin out there IMO.
Thanks for response, I’m very pleased =)
Hey Dimox,
Thanks alot for this piece of code, it is exactly what I was looking for!
One question though the breadcrumbs seem to begin at a new paragraph/line (enter), I have tried to find this myself but couldn’t see a reason why it’s doing this.
Any idea?
HTML code of breadcrumbs contains the
<div></div>tag, which makes a new paragraph.Thanks Dimox!
One final question though.. the date displayed is english but I want the months to display in dutch.
I have already adjusted the settings in the admin panel and in the wordpress locale yet it keeps displaying in english any idea what I am doing wrong?
Thanks!
Sorry, I don’t know a reason, but it exactly not in my function.
Hi Dimox,
Thanks a ton for such a wonderful article. It solved my problem which I was facing with Breadcrumb Navigation XT.
You rock ;)
BR,
Shubhamoy
Hi Shubhamoy,
You are welcome ;0) Share, please, that is the problem with Breadcrumb Navigation XT? Just interesting.
Simple and effective. Thanks.
Thanks for posting this :-)
Great job for the plugin, but i have a little problem with safari. I’ve been creating my wordpress themes locally with xampp. And when i’m trying to do a cross browser check, it seems that my themes is ruined up (only) on safari after adding the function and breadcrumb.
my question is:
1.Do anyone of you have the same problem too, or it’s just me?
2.Did editing locally on xampp affecting that problem or?
Really sorry for my bad english..
I have no such a problem. May be you doing something wrong.
My bad. Pure div problem.
Thanx man, i really like your breadcrumbs.
Great tutorial!
Any idea on how to add breadcrumbs to post excerpts? I would like to add a breadcrumb trail leading home from the post page within the excerpt. In other words, not only would visitors see a breadcrumb trail on the actual post pages, but the correct trail to that post could also be seen in the excerpts displayed on the site index. Hope I’m making sense.
I not see the sense in such breadcrumbs.
Thanks a lot, Dimox. I wasn’t quite confortable with Yoast nor Navxt so I tried yours and it’s perfect, really simple to use too.
There is a problem with the monthy archives, it displays the wrong dates.
I don’t see such a problem.
It was definitely a problem, but I have a feeling it may have been a glitch with my theme, which was originall written for a much older version of WordPress. I went through and revamped all the code in my theme up to current WordPress “methods” and now your breadcrumbs work.
Bingo.
Awesome function! Many thanks!
thanks bro :)
Thanks! ^_^ I was using yoast breadcrumbs plugin but this works fine with a few tiny modifications
Is there a way to truncate the current post title? (I have a few long post titles that are causing havoc on my wordpress beadcrumb styling)