PureNews

PureNews is an amazingly sleek and powerful news theme with unlimited color variations.

View full feature list Check out the live demo Buy this theme today

Create a Breadcrumb Trail

Posted by on 22nd Feb 2009 | 14 comments

Adding a breadcrumb trail to your WordPress site is fairly easy to do. Yes, before anyone mentions it, there are plugins out there to do this for you, but you won’t learn from those unless you actually open them up and change things. So for those of you who actually want to learn how you can easily extend the functionality of WordPress (or for those who just want to copy the final code..!) read on ;)

This week I’m going to explain how to add in a new function to our functions.php theme file, to allow you to create a breadcrumb trail for your front page, posts and pages. For our front page we just want to show the home link (you may want to show nothing at all which is also fine). For our static Pages we want to show the page and any parent pages, and the home link, and for the posts we want the home link and the categories and parent categories (note this method only works with one category, so if you put posts in multiple categories you’ll only get the first one showing in the breadcrumb trail).

The Opening Code

So we just need to construct this step by step. The basic function will begin as:

[sourcecode language="php"]function write_breadcrumb() {
$pid = $post->ID;
$trail = “Home“;

return $trail;
}[/sourcecode]

We then call this by adding

[sourcecode language="php"]

< ?php echo write_breadcrumb(); ?>

[/sourcecode]

This would give us an ordered list with one list item of the home link (note you may need to change your home link if WordPress is installed within a directory on your site).

Next we start checking which page is calling the function, so first let’s check if it’s the front page by using the is_front_page() condition (this will then work for both blogs and CMS sites with a static front page). eg.

[sourcecode language="php"]function write_breadcrumb($pid = 0) {
$trail = “Home“;

if (is_front_page()) :
// do nothing
endif;

return $trail;
}[/sourcecode]

As mentioned, all we need is the Home link on the front page. In theory we could remove this by simply changing the $trail variable to be a non breaking space ( ).

Static Pages

The next job is to get it to work for static pages. This is where the $pid variable comes in, because we can get the post ID in the function using the $post->ID value (note, the breadcrumb trail needs to be within the WordPress loop to work). We then take this ID and get the page name for it. Then we also check to see if it has a parent, if it does we get the details for that, again we check if that has a parent, and continue until the parent page is at the top of the tree ie.

[sourcecode language="php"]if (is_page()) :
$bcarray = array();
$pdata = get_post($pid);
$bcarray[] = ” » “.$pdata->post_title;
while ($pdata->post_parent) :
$pdata = get_post($pdata->post_parent);
$bcarray[] = ” » Home“;

if (is_front_page()) :
// do nothing
elseif (is_page()) :
$bcarray = array();
$pdata = get_post($pid);
$bcarray[] = ” » “.$pdata->post_title.”\n”;
while ($pdata->post_parent) :
$pdata = get_post($pdata->post_parent);
$bcarray[] = ” »

A PHP Developer using WordPress to power both blogging and commercial CMS sites. I've written and released a couple of plugins for WordPress and am currently writing plugins for use on commercial websites.

14 comments - Leave a reply
  • Posted by Will Anderson on 22nd Feb 2009

    This is a really great writeup of WordPress Breadcrumbs. I have a couple of suggestions for improvements though if I may.

    If you have WordPress installed in a subdirectory, the Home link might not take you where you'd expect. I would suggest replacing line 3 with the following:

    <code>$trail = 'Home';</code>

    This will ALWAYS take you to the WordPress home page.

    Also, rather than hard coding the & raquo; It would probably be better to assign it to a variable at the beginning and then use the variable throughout the rest of the function. That way if you decide to use another character as a separator you only have to change one line.

  • Posted by Will Anderson on 22nd Feb 2009

    Sorry, the code didn't work out as expected. Here it is properly escaped.

    <code>$trail = 'Home</code>

  • Posted by Sarah on 22nd Feb 2009

    Hi Will, yeah the getbloginfo() will work, but it will save on an extra db call by just hardcoding it in. Of course either is fine and probably unnoticeable unless your site is very busy. For the rightangled quote, to be honest the best method is to use a list (which I'll be uploading in a file as a different method next week). I had this originally, unfortunately WordPress broke half my code so the addition of a right angled quote was a last minute thing!

  • Posted by Will Anderson on 22nd Feb 2009

    You have a good point with the extra db call. Since this is presumably going in functions.php I guess hard coding the URL wouldn't be the end of the world.

  • Posted by Roger on 22nd Feb 2009

    Thanks for this post – tried it out and got my breadcrumb working perfectly! Did a few tweaks here and there and I'm so pleased with the result. Really am glad I stumbled upon this post.

  • Posted by Portland Web Design on 23rd Feb 2009

    Wow, excellent documentation on the process. Most people I know that are set up on WordPress are strictly using pre-built themes and plugins since they're not technically apt. Great resource for the custom developer or newbie tweaker. :)

  • Posted by Ken the tech on 1st Mar 2009

    Thanks! You give me the idea of breadcrumb and of course the solution. Nice tutorial :)

  • Posted by YoU on 9th Mar 2009

    Love the tutorial!

    PS. I'm not a coder, is there any way to add post title after the category name? You omit this part because of it may create a long breadcrumb trail.

  • Posted by Sarah on 9th Mar 2009

    Sure, to add the post title at the end, on line 23 of the final code above, remove the substr() line (just remove the whole line), and replace it with

    <code>$pdata = get_post($pid);

    $trail .= "<a href='".get_permalink($pid)."'>".$pdata->post_title."
    "; </code>

    and that should do what you need :)

  • Posted by YoU on 10th Mar 2009

    Thank you very much Sarah! It works like a charm!

    I added the code just after the line 23 (instead of remove it) and it showed the post title after the category name.

    I implement the style to make it like an apple.com one, you can have a look at it on my test bed (at the bottom).

  • Posted by ElShaddai Edwards on 12th Mar 2009

    Thank you for this post – I am looking forward to digging into the code!

    I am currently working with your Page Menu Editor plugin and have alternate (less verbose) page titles defined for my nav menus – will the breadcrumb function above use the alternate titles as defined in your plugin, or will it use the default WP page titles? If the latter, is there any way to use the alternate titles in a breadcrumb?

  • Posted by Sarah on 12th Mar 2009

    To specifically get the menu labels from my page menu editor you would use the following to access the specific page menu label:

    <code>get_post_meta($pid, 'menulabel', true)</code>

    So on the final code above you could replace line 10 with

    <code>$bcarray[] = " » ".get_post_meta($pid, 'menulabel', true)."
    ";</code>

  • Posted by Miklas on 17th Mar 2009

    Is there a way to get the breadcrumb in reverse order? So it reads "posttitle <- subcategory <- category <- home"</b> instead of the usual left to right?

  • Posted by Jackie Peters on 21st Oct 2010

    Thanks for posting! This worked better than anything else I've looked at.
    My recent post DYMO 2 Cents Campaign