Breadcrumb navigation trails and WordPress

This post shows you to use one line of PHP to show a breadcrumb trail in wordpress - dispensing with complicated code and breadcrumb plugins. You will have to make a few minor changes to one core wordpress file.

What is a breadcrumb trail

Breadcrumb trails are those URLs you see at the top of many large sites' pages that look like this:

Home > Category > Sub category > Title of page you're on

You can see them in action on, for instance, the wordpress site - the top left bit that says:

WordPress â€º Support Â» How-To and Troubleshooting

Why you might want a breadcrumb trail

If you have a large site with many categories and sub categories, you might find it useful to have a breadcrumb trailÂ - especially if you are using wordpress as a CMS for instance. Breadcrumbs are useful as:

They give users an easy way to get to higher level pages.

They help users understand where on the site they are.

And they also help them understand what a site is about.

You don't really need one on a small blog - I just list the relevant categories under the main title of each page, and this is sufficient as I don't have lots of sub categories.

How to add a breadcrumb trail in WordPress: plug ins etc

There are several ways to do this. However, many only add the breadcrumb trail on category pages - you really need them on individual posts as well. Current methods that do this include:

This plug in does most of what you need. But plug ins aren't fun are they ...

This method works, but I think if you have categories only - if you have sub-categories, it doesn't include both parent and child categories.

There are various other bits of code you can find in a google search.

My new method for breadcrumb trails in WordPress

Anyway, if your site is organised so that each post is in only one category, then there is an existing wordpress function, the_category, that will generate a breadcrumb trail automatically.

This code:

<a href="home.com">Home</a> &gt; <?php the_category(' ',multiple) ?>

would generate this:

Home > Category,Sub-category

There's one small flaw however - there's no space before or after the comma. If wordpress could solve this, you could generate breadcrumb trails incredibly easily.

There is a solution ... If you go here and follow the 'this diff' link towards the bottom to here. Then all (cough, ahem) you need to do is edit your category-template.php file in the wp-includes directory.

You need to replace the bits in pink with the bits in green - the easiest way is to open the file in a simple text editor, and then count the lines down to the relevant line numbers. Lines 204 are lower than you think due to some comments that you should ignore. NB The line numbers given are for wordpress 2.6. If you've upgraded to 2.7, the changes are the same, but the line numbers are different. It's easiest to search for the code you need - but be aware that some of the spacing has also changed from wordpress 2.6 to 2.7, so "function the_category($separator" becomes "function the_category( $separator". Anyway, you'll find it all eventually!

Anyway, basically, edit the file as shown. And then you can use this in your article/post templates:

Beyond my wordpress abilities I'm afraid. With my user experience hat on, I would say that 2 breadcrumbs sounds a little confusing ... I would try to think of another solution! (EG list the categories the page is in in a non-breadcrumb style).

Ever watched a recorded TV programme and wished you could see what the reaction was on Twitter? Now you can!
Together with the brilliant developers at Raak, I've (beta) launched Tweet Rewinder.
It's a mobile web app ...