Create a Breadcrumb Trail

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

14 Comments

  1. Will Anderson February 22, 2009
  2. Will Anderson February 22, 2009
  3. Sarah February 22, 2009
  4. Will Anderson February 22, 2009
  5. Roger February 22, 2009
  6. Portland Web Design February 23, 2009
  7. Ken the tech March 1, 2009
  8. YoU March 9, 2009
  9. Sarah March 9, 2009
  10. YoU March 10, 2009
  11. ElShaddai Edwards March 12, 2009
  12. Sarah March 12, 2009
  13. Miklas March 17, 2009
  14. Jackie Peters October 21, 2010