Create a Breadcrumb Trail

By Sarah | WordPress Coding & Design

Feb 22

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[] = ” »

Follow

About the Author

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.

Will Anderson February 22, 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.

Will Anderson February 22, 2009

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

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

Sarah February 22, 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!

Will Anderson February 22, 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.

Roger February 22, 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.

Portland Web Design February 23, 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. :)

Ken the tech March 1, 2009

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

YoU March 9, 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.

Sarah March 9, 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 :)

YoU March 10, 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).

ElShaddai Edwards March 12, 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?

Sarah March 12, 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>

Miklas March 17, 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?

Jackie Peters October 21, 2010

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

Comments are closed