Adding Detailed Breadcrumbs to the Thesis Theme

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

Written by

I'm a freelance web designer from a small town in Indiana. I love the Chicago Cubs, my wife, Coca Cola and dark chocolate...in that approximate order.

Bio Twitter Portfolio Contact

{ 22 comments… read them below or add one }

1 Hal Brown

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.

Reply

2 Adam Baird

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.

Reply

3 Adam Baird

The code has been updated to solve the parent/child category issue…enjoy

Reply

4 Lee

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.

Reply

5 Adam Baird

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

Reply

6 Lee

Adam, you were exactly right. I had the .breadcrumbs to float left.

Reply

7 ABaird

That’s usually how it goes!

Reply

8 Hal Brown
9 Gary

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/

Reply

10 Adam Baird

Awesome stuff Gary.

Reply

11 Tao Meow

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”

Reply

12 Adam Baird

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.

Reply

13 Adam Baird

Support added for nested pages…code has been updated.

Reply

14 Christopher

I am always a fan of breadcrumb navigation. This is an easy clean way of doing it, thanks for sharing!

Reply

15 Nitin

Hi Adam

Will it make sense to have rel=”nofollow” in the code.

If yes, can you tell me where to put that

Thanks

Reply

16 DigitalDoyle

Just what I was looking for.

Thanks Adam! Much appreciated!

Reply

17 Ciaran

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

Reply

18 James

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 ?

Reply

19 Christy

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!

Reply

20 Jonathan

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.

Reply

21 Adam Baird

You need to add “.custom” before “.breadcrumbs”

Reply

22 Jonathan

Silly me. Works like a charm. Thank you very much.

Reply

Please leave your thoughts below!