Internet
How to
Newspapers
Twitter
SEO advice
Categories: How to, Wordpress. Tags: ,

Breadcrumb navigation trails and WordPress

January 7, 2009 8 Comments

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:

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

which will generate this breadcrumb trail:

Home > Category > Sub-category

Perfect. As long as you don't mind editing the wordpress files directly ... (When doing this, make sure you keep a back up of the original in case you do it wrong).

Note, too, that this all only works if you assign posts to just one category. If you are adding them to several, your breadcrumb trail will look a right mess with this method - stick to the plugin!

This might all sound daunting, but (1) I made the changes first time with no problems and (2) it's a bit more understandable than all the other methods out there.

Example breadcrumb trail on a wordpress site

You can see the solution in action on my draft setting up your business site.

You might also like
  1. Adding page numbers: How to avoid duplicate titles and meta descriptions in pages 2 and higher of WordPress category and tag pages
  2. How to show the number of Twitter followers you have in WordPress
  3. Unique meta description and meta keyword tags in your WordPress themes
  4. Avoid duplicate content with paged comments in wordpress
  5. Open Graph: let people FaceBook “like” your WordPress (or other) website

Share this post

Follow me on Facebook or Twitter

8 Comments »

  • [...] Function. Δύο για την ακρίβεια, αλλά η δεύτερη αν και είναι ποιό σύντομη, δεν μπορεί να ανταποκριθεί σωστά στις ανάγκες μας [...]

  • Ray says:

    Hey Malcolm,

    Got a question about breadcrumbs.

    Say I have categorized a post in two different parent categories.

    eg.
    Music
    -Funk
    -Soul
    -Jazz (selected)

    Movies
    -Action
    -Adventure
    -Comedy
    -Documentary (selected)

    I would like there to be two breadcrumbs, which would look like this.

    Home > Music > Jazz
    Home > Movies > Documentary

    Maybe, "Home" would be negated... but you get the point!

    Any help here would be appreciated.

    Thanks!

    • 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).

  • Chris says:

    any ideas of how to add this breadcrumb, but one that shows pages and posts categories?

    e.g. home / page / sub-page

    or home / cat / sub-cat

    ??

  • Doog says:

    Hi,

    I see you're using the Arthemia Premium theme and have modified away from the breadcrumb... in favour of the categories.

    I'm having reat trouble finding out where the template has limited "the_category" to a single child.

    I see at the top of this post that you have achieved this as you are showing multiple categories.

    Any pointers appreciated!

    • In the original single.php file is a line near the top that shows a span with an id of map. In that is the following code:

      <a href="<?php echo get_option('home'); ?>/"><?php _e('Home','arthemia'); ?></a> » <?php the_category(', ') ?>

      I've just changed that to
      Categories: <?php the_category(', ') ?>. <?php the_tags() ?>

      Works for me as I put posts in multiple categories, so I just list them. And I'm not using any sub-categories on this blog.

Leave a comment!

Add your comment below, or trackback from your own site. You can also subscribe to these comments via RSS.

Be nice. Keep it clean. Stay on topic. No spam.

You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

This is a Gravatar-enabled weblog. To get your own globally-recognized-avatar, please register at Gravatar.