Adding a breadcrumb navigation menu is a great way to increase your page views and help your visitors find their way around your site.
Liked this post? Get free updates via RSS when we post or
Smart Blog Design Tips
Adding a breadcrumb navigation menu is a great way to increase your page views and help your visitors find their way around your site.
Liked this post? Get free updates via RSS when we post or
{ 22 comments… read them below or add one }
This is great, and I tried it on a practice site. I would like to use it, except there seems to be a bug in it. When I get three levels deep I get “title_li=” (no quotes) before the last name. This only happens when I click from the categories in the sidebar.
All else works well, so I don’t know that I’ve done anything wrong. But, maybe I did.
Do you think this could be a problem?
Thanks.
You’ve done nothing wrong. The only time this could be an issue is when you’ve a post is categorized in both a parent and child category. I generally wouldn’t recommend that, so the code isn’t built to handle it.
If you write a post in two categories that are both parent categories, the category with the lower id will be displayed in the breadcrumbs. This is a default WP thing that I can’t control.
The code has been updated to solve the parent/child category issue…enjoy
Looks great Adam. My only problem with it is that when the breadcrumbs are displayed on a category page, the breadcrumb text runs into the text ‘From the category archives:’
I’m sure there’s a way around this with CSS, I just haven’t found it yet.
Taking a quick look at your site I wonder if you’ve set the breadcrumbs to float left? That would probably achieve the result you have on archive pages…tough to say without being able to see your CSS
Adam, you were exactly right. I had the .breadcrumbs to float left.
That’s usually how it goes!
Found the answer here:
http://gregrickaby.com/2009/12/how-to-add-breadcrumbs-without-a-plugin.html
Hi Adam,
I took your code as inspiration for building a breadcrumb class for use within Thesis / other WP themes. Code and Tutorial at:
http://code.garyjones.co.uk/wordpress-breadcrumbs-class/
Awesome stuff Gary.
This is nice and simple. However, I have nested pages that I’m using in my navigation. What kind of code should be added to ensure that all the pages show up in the trail? Right now, a page that I have two levels down in my Thesis nav only shows a back link to “home”
That’s something I’ve actually considered adding. There isn’t a really simple way to do this with Wordpress. Thus, the code might get a bit hefty. That’s why I left it out of this particular tutorial. If I do write the code, I will update here.
Support added for nested pages…code has been updated.
I am always a fan of breadcrumb navigation. This is an easy clean way of doing it, thanks for sharing!
Hi Adam
Will it make sense to have rel=”nofollow” in the code.
If yes, can you tell me where to put that
Thanks
Just what I was looking for.
Thanks Adam! Much appreciated!
Thanks Adam…
How would you set it so that the breadcrumb doesn’t appear on the home page, just the other pages/posts?
How would I go about styling the breadcrumbs?
Many thanks
Ciaran
Is there a solution for pages two or three levels deep? The posts work fine, but when I use the parent feature for pages, it always defaults to Home / The current page I am on. How would I be able to get Home / parent / next parent / current page ?
I am updating my site using Thesis — this was the perfect solution for breadcrumbs as I’m tired of adding “heavy” plugins. Thank you so much!
Hi,
Thanks for the code. The breadcrumbs show beautifully.
However, I’m having trouble designing them. I added this to my custom.css code:
.breadcrumbs { padding:7px 0; font-size: 3px; }
But nothing’s changed. What am I doing wrong?
Thank you.
You need to add “.custom” before “.breadcrumbs”
Silly me. Works like a charm. Thank you very much.