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:

function write_breadcrumb() {
	$pid = $post->ID;
	$trail = "<a href='/'>Home</a>";

        return $trail;
}

We then call this by adding

<p>< ?php echo write_breadcrumb(); ?></p>

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.

function write_breadcrumb($pid = 0) {
	$trail = "<a href='/'>Home</a>";

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

        return $trail;
}

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.

if (is_page()) :
	$bcarray = array();
	$pdata = get_post($pid);
	$bcarray[] = " » ".$pdata->post_title;
	while ($pdata->post_parent) :
		$pdata = get_post($pdata->post_parent);
		$bcarray[] = " &raquo; <a href='".get_permalink($pdata->ID)."'>".$pdata->post_title."</a>\n";
	endwhile;
endif;

So in the above we use the get_post function to get the details of the page using its ID. The page we’re on is not linked as there’s no real point in linking the page you’re currently on. Then we check to see if there is a parent ID for this page, which is done in the while loop. We repeat the process within the loop then, get the data for the post, create a link to the parent page and then loop again to see if the parent page has a parent itself.

So if the page had no parent, then the post_parent would be 0 and the while loop wouldn’t execute, if it was just a child page, then the while loop would execute once and then stop, so this way we can check for all parent and grandparent pages.

The results are saved into an array, this is because we’re getting them in reverse order, so we need to store them in an array and then once we’re finished, we reverse the array results using array_reverse. So after our endwhile we reverse the array and then run through each result and add it to our original $trail variable ie.

$bcarray = array_reverse($bcarray);
foreach ($bcarray AS $listitem) :
	$trail .= $listitem;
endforeach;

Single Posts

For the single posts we want to display the category and parent categories in the breadcrumb trail. You could also store the post title however with long post titles, this may create quite a long breadcrumb trail. So I’ve omitted the post title from the trail. Luckily WordPress gives us a function to get the category and it’s parents so we don’t need to do anything as complex as above. This is done in a few lines of code:

if (is_single()) :
	$pdata = get_the_category($pid);
	$data = get_category_parents($pdata[0]->cat_ID, TRUE, ' » ');

	$trail .= " » ".substr($data,0,-8);
endif;

The first line uses the get_the_category() function to get the category details. From this we can get the category ID. Then the get_category_parents() function takes the category ID and generates a list of the category links. We then just append this to the $trail variable, however we need to add an opening list item to the $data variable, as it’s missing, and we need to remove the additional right angled quote from the end of the $data string, so a simple substr() works fine for this.

Final Code

So the final code so far gives us:

function write_breadcrumb() {
	$pid = $post->ID;
	$trail = "<a href='/'>Home</a>";

	if (is_front_page()) :
		// do nothing
	elseif (is_page()) :
		$bcarray = array();
		$pdata = get_post($pid);
		$bcarray[] = " &raquo; ".$pdata->post_title."\n";
		while ($pdata->post_parent) :
			$pdata = get_post($pdata->post_parent);
			$bcarray[] = " &raquo; <a href='".get_permalink($pdata->ID)."'>".$pdata->post_title."</a>\n";
		endwhile;
		$bcarray = array_reverse($bcarray);
		foreach ($bcarray AS $listitem) :
			$trail .= $listitem;
		endforeach;
	elseif (is_single()) :
		$pdata = get_the_category($pid);
		$data = get_category_parents($pdata[0]->cat_ID, TRUE, ' &raquo; ');

		$trail .= " &raquo; ".substr($data,0,-8);
	endif;

	return $trail;
}

And then to use this on the front page you can just call it as

<p>< ?php echo write_breadcrumb(); ?></p>

And this can be called anywhere on the front page. For the static Pages and single posts we need to put this within the loop.

Next week I’ll then explain how we can extend this to work for the category and archive pages.

Written by Sarah from Stuff By Sarah
Posted on February 22nd, 2009 and filed under WordPress Coding & Design
Do not forget to subscribe to our RSS feed for updates

564717http%3A%2F%2Fwww.bloggingtips.com%2F2009%2F02%2F22%2Fcreate-a-breadcrumb-trail%2FCreate+a+Breadcrumb+Trail2009-02-22+15%3A00%3A37Sarahhttp%3A%2F%2Fwww.bloggingtips.com%2F%3Fp%3D5647