WordPress Breadcrumbs: How to Use This Function?

Unfortunely, WordPress doesn’t have a default function to display a breadcrumb. We’ll see how to create this navigation technique, and display it on our posts, pages and categories archives.

Breadcrumb…What’s that?!?

Wikipedia says: Breadcrumbs or breadcrumb trail are a navigation technique used in user interfaces. Its purpose is to give users a way to keep track of their location within programs or documents. The term is taken from the trail of breadcrumbs left by Hansel and Gretel in the popular fairy tale.

Let’s Get Started

One more time, WordPress conditional tags will be very useful. With them, we’ll be able to know easily if the page displayed by a visitor is an article, a page, or a category archive.

Then, we’ll have to use the right functions to show the site’s hierarchy. Nothing difficult here, WordPress got all the functions we need to get links to homepage, articles and single pages.

I wrote a quite clean breadcrumb function, you just need to copy/paste it in the functions.php file from your WordPress theme. If this file doesn’t exists, just create one and paste the function on it.

function the_breadcrumb() {
	if (!is_home()) {
		echo '<a href="';
		echo get_option('home');
		echo '">';
		bloginfo('name');
		echo "</a> » ";
		if (is_category() || is_single()) {
			the_category('title_li=');
			if (is_single()) {
				echo " » ";
				the_title();
			}
		} elseif (is_page()) {
			echo the_title();
		}
	}
}

Now that we have the function, we just have to edit the file where we want our breadcrumb to appear – I think that archive.php, single.php and page.phpis a good choice – and call the function.

<?php the_breadcrumb(); ?>

That’s all. You just created an easy way for your readers to navigate through your blog sections.
Note, this script can be easily enhanced: For example, we should limit categories display and just show the first category.

And if you prefer installing a plugin instead of manually editing your theme files, you should have a look at the Breadcrumb NavXT plugin.