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 (last updated: 05.04.2012)
function dimox_breadcrumbs() { $showOnHome = 0; // 1 - show breadcrumbs on the homepage, 0 - don't show $delimiter = '»'; // delimiter between crumbs $home = 'Home'; // text for the 'Home' link $showCurrent = 1; // 1 - show current post/page title in breadcrumbs, 0 - don't show $before = '<span class="current">'; // tag before the current crumb $after = '</span>'; // tag after the current crumb global $post; $homeLink = get_bloginfo('url'); if (is_home() || is_front_page()) { if ($showOnHome == 1) echo '<div id="crumbs"><a href="' . $homeLink . '">' . $home . '</a></div>'; } else { echo '<div id="crumbs"><a href="' . $homeLink . '">' . $home . '</a> ' . $delimiter . ' '; if ( is_category() ) { $thisCat = get_category(get_query_var('cat'), false); if ($thisCat->parent != 0) echo get_category_parents($thisCat->parent, TRUE, ' ' . $delimiter . ' '); echo $before . 'Archive by category "' . single_cat_title('', false) . '"' . $after; } elseif ( is_search() ) { echo $before . 'Search results for "' . get_search_query() . '"' . $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>'; if ($showCurrent == 1) echo ' ' . $delimiter . ' ' . $before . get_the_title() . $after; } else { $cat = get_the_category(); $cat = $cat[0]; $cats = get_category_parents($cat, TRUE, ' ' . $delimiter . ' '); if ($showCurrent == 0) $cats = preg_replace("#^(.+)\s$delimiter\s$#", "$1", $cats); echo $cats; if ($showCurrent == 1) 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>'; if ($showCurrent == 1) echo ' ' . $delimiter . ' ' . $before . get_the_title() . $after; } elseif ( is_page() && !$post->post_parent ) { if ($showCurrent == 1) 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); for ($i = 0; $i < count($breadcrumbs); $i++) { echo $breadcrumbs[$i]; if ($i != count($breadcrumbs)-1) echo ' ' . $delimiter . ' '; } if ($showCurrent == 1) echo ' ' . $delimiter . ' ' . $before . get_the_title() . $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.
Is there a way I can use this to replace the page title?
I would like the breadcrumb to be inserted as the page title (entry-title)
How would this be done ?
Thanks
No, that’s impossible.
I’m not sure, but isn’t that what this person is doing ?
http://www.code-tips.com/2011/06/wordpress-breadcrumb-navigation-on.html#comment-form
Looks like it.
thanks a lot! it works, it’s simple and easy to implement
Hello!~
Thank you so much for this great function! Works perfectly fine!
I read through ALL the comments and almost all of my questions were answered and I was able to modify the function :)
I only have ONE little problem :)
On my blog (which is my home.php) it is displayed like this:
Home » Blog »
However, I don’t want the » displayed after the Blog just for the home.php!
It should be displayed like this:
Home » Blog
For everything else it still should show the » after the “Blog”, e.g.
Home » Blog » Category X
Currently it looks like this:
global $post;$homeLink = get_bloginfo('url');
echo '<a href="' . $homeLink . '" rel="nofollow">' . $home . '</a> ' . $delimiter . ' <a href="http://www.zoomingjapan.com/blog/" rel="nofollow">Blog</a> ' . $delimiter . ' ';
I could remove the last delimiter, but then the » would disappear in front of everything else, too!
Could I try it with something like:
elseif ( is_home() ) {echo ....
If it’s possible, could you tell me how exactly to do it? I tried, but I keep getting errors as my syntax is wrong.
Thanks a lot in advance! :)
Try this:
global $post;
$divider = $delimiter;
if (is_home()) $divider = '';
$homeLink = get_bloginfo('url');
echo '<a href="' . $homeLink . '" rel="nofollow">' . $home . '</a> ' . $delimiter . ' <a href="http://www.zoomingjapan.com/blog/" rel="nofollow">Blog</a> ' . $divider . ' ';
Awesome, thank you!! :)
the subcategory is not working for me,
i mean Home » Subcategory » Post Title
what i can change the code
can any one help me, i am using the exact code above
I’ve pasted the code into my functions.php and then pasted the other code into my page and nothing is happening. I know this works because I’ve used it before. Any ideas on why this is happening?
In my Wordpress theme, I’ve created a custom hierarchal taxonomy and would like to show all the layers in your breadcrumbs function. I’ve found the
is_tax()function in the codex to test if a page being displayed is a taxonomy archive page. How would I implement this test in the if statement to properly display the taxonomies?Thanks!
thank you for creating something that works easily and instantly; no fuss no muss… much appreciated!
is there a way to display breadcrumbs like
Home » Category » Tag 1, Tag 2, Tag 3 » Post Title
Yes. Find these two rows:
echo get_category_parents($cat, TRUE, ' ' . $delimiter . ' ');echo $before . get_the_title() . $after;
and paste between them this row:
the_tags('', ', ', ' ' . $delimiter . ' ');Thank you….How about use this for image.php?
Category » Tag 1 » Tag 2 » Tag 3 » Post Title » Post Image Title
and (,) replaced by (») for all the separator
Hello again.
Thanks for helping me out the last time.
I have a question again and hope you are willing to help me out again.
My current function looks like this: http://pastebin.com/jx1kNUav
Is ist possible to show the search request?
E.g.: When I type a search, then the output looks currenty like this:
Home – Blog – Page
Instead of “page” I want it to display the term a person was looking for, e.g.:
Home – Blog – Cake and cookies
Is that possible? It was with the previous plugin for breadcrumbs I used.
Also, another small issue: Pagination.
If I look at the recent posts I see this:
Home » Blog
If I go to page 2, it looks like this:
Home » Blog Page 2
Is it possible to have a “delimiter” between “Blog” and “Page XY” as well?
Thank you so much in advance!! :)
Result of search request looks like this:
Home » Blog » Search results for "query", and not like you wrote.After this row:
if ( get_query_var('paged') ) {add this:
if (is_home()) echo ' ' . $delimiter . ' ';Thank you, that worked well :)
I think you misunderstood what I meant with “search result”. I think my explanation wasn’t very good.
Instead of the actual search result (so to say the text that somebody typed into the searchform) it just displays “Page” instead. I don’t even understand where this is coming from.
In the title tab it’s displayed properly (see this screenshot: http://i52.tinypic.com/soshs9.jpg)
No matter what I type into the searchform, the breadcrumbs always only outputs:
Home » Blog » Page
This is very strange and should not to be. I don’t know what’s the reason.
Well, the interesting .. or rather weird thing about this is that it DOES display the search results properly as long as the top search result is a normal post type. If it’s a static page instead, it shows “Page”.
I struggled with the same problem. Removing the following code seems to fix the problem.
} 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;
I don’t have any coding knowledge.. I am not a programmer. But I need something like this..
Home>>Category>>Category2>>Tag>>Tag2
I don’t want to display my post name on breadcrumbs and the Home is linked to my home page.. Any solution for me ?? Plz reply as soon as possible.!!
My site http://www.hackintruths.org is under construction.
Use this code.
Where to use this code ?? Can you plz send a step by step tutorial ??
Tutorial is in post above.
Thnx.. It’s working!! :) But not showing in google search
This totally saved me, many thanks.
Good, solid, well-written code! Nice work!
Hey, Thanks for your work on this code. i have had this working on other versions of my website, but now it only shows the breadcrumb for one page. You can see what i mean if you check out my site. The only thing that displays for breadcrumbs is:
“Home » Humidors » Custom Humidors » Soliloquy”.
Any help would be greatly appreciated and thanks again!
Dustin
Sorry, I can’t help anything.
all my content on Word Press is generated as as posts/categories. The breadcrumb works perfectly. However, it links back to the cat not the post page in the breadcrumb. Can you alter the breadcrumb to link to the posts rather than the categories?
Thanks!
I don’t understood that you want.
go to this page. http://shopgreengable.com/?p=191. Note that it’s a post (p=191). every post on my site is organized by categories and calls product categories.
You can see that I’m using your breadcrumbs on the site. However, if you hover over the links on the breadcrumb they click back to categories (cat=123). can you make it so the breadcrumb links back to the post pages and not categories?
So when you click Denim in the breadcrumb.. rather then being taken to the category denim, could it take you to the post page of denim? the navigation is calling the post pages.
Sorry, I have no idea how to do this.
My WP theme uses the same function, more or less for breadcrumbs. For SEO purposes my actual category names are a little bit different. When building the ‘Menu’ I was able to make use of the navigation label to give it a short name.
Is there a way (or maybe a logical function) that will enable me to do the same with this breadcrumb function?
Ex: is category-id=5 then use a different name and so on?
No, this not possible here.
Thank you for the plugin my friend, it works like a charm.
I wanted to make the ‘Home’ in the breadcrumbs bold or underlined, but have no idea how to do it in the CSS.
Change this:
<a href="' . $homeLink . '">on this:
<a href="' . $homeLink . '" class="homeLink">and then add the following style to your CSS file:
a.homeLink { font-weight: bold; }Worked like a charm mate. How do you insert markup like this on comments? :)
I’m using the
<code>tag and CSS.Hi, thanks for the great breadcrumbs code…
First, I tried to add category with title “Softwares” and “Windows” for subcategory on a post, so the breadcrumb results are :
If I wanna change/add new or another categories to this post, the breadcrumbs actually still show the old breadcrumb results like above (It’s happened sometimes like a bugs or something. I think the breadcrumb must following change or update the categories.
I don’t know actually b’coz I’m not a programmer, but I guess it’s like some bugs). Can u solve it?
If you didn’t understand with my opinion, perhaps you can try it on your localhost. Create a new post, give a one category or some categories, and subcategories, and even subsubcategories. Then change in two times or more and see the breadcrumbs results.
If you select several categories for a post, breadcrumbs will show just one of them.
Are possible to show several categories? Like tags on comments-1257 maybe…
I don’t know how to make this possible.
I just give input, but I do not know where to put it down. Maybe this code
can be used.Sorry…
i use Wordpress Breadcrumbs on my site. Thanks for Share
Worked perfectly, thank you.
It works perfectly and it is totally and simply customizable, thank you so much :)
I have pages that list a specific category of posts…
Right now I get Home > Archive of category “cat-name”
Is there a way to get Home > Page Name instead ?
I don’t want to sort anything by category…
Thanks in advance!
Sorry, that’s not possible in this function.
I am using your breadcrumb but when i click on parent category, it shows link of the sub-category in which i have the latest post.
For example if i click on Beauty (parent category)
It shows in breadcrumb Home >> Skin Care (sub category) which has the latest post in it.
This is strange, because breadcrumb must look like this:
Home >> Beauty >> Skin CareMay be some functions of your theme affect the functionality of breadcrumbs.
Great Work bro, helped me a lot…. but i have only one query my search box lies in the same line as bread crumbs and long post titles break off the search bar so how to do a Home >> Category >> and not Home >> Category >> post title
Find this piece of code:
$cat = get_the_category(); $cat = $cat[0];echo get_category_parents($cat, TRUE, ' ' . $delimiter . ' ');echo $before . get_the_title() . $after;and remove the last row from there.
Thanks, it is cool to find something easy and clean. I modified it a bit in order to show the category or the archive, according form where (which listing) the click to the article originates and that is what i needed. Thanks again
Works perfectly! You are great, Dmitriy!
And your english is not poor. I am not a native english speaker. But I can follow you just fine. Good work!
Thanks! ;)
Hi,
Dimox_breadcrumbs script is great, but I have important question. I would like to display a breadcrumb path only from the category number 1. At the moment the script is stirred once again Category 1 and Category 2.
My categories it will look like this:
world (category 1) > europe > list of countries
interest (category 2) > sport > list of disciplines
Is it possible to display only subcategories of Category 1 ???
Thank you in advance
Sorry, I can’t understand what you want.
How to or where to add “child_of=1″ in code for display only subcategories from category no 1
There is no such a possibility.
Hi, thanks for this! How would I include a custom taxonomy to the breadcrumb? Also, I have it in my index.php file and the breadcrumbs aren’t showing up—any thoughts?
Thanks again.
Sorry, don’t know, I’m not versed in taxonomies.
I can’t imagine why. Breadcrumbs must appear on every page excluding home page.