Creating Breadcrumb Function for Wordpress

We published this a long time ago…

Some of the content in this post might be out of date, and some images and links may no longer work.

Discover who we are and how we may be able to help you today:

Whilst working on my first proper WordPress theme, I needed a nice simple breadcrumb plugin or function for my pages. As so often is the case, most of the existing plugins or functions were unnecessarily complicated and/or bloated; so I decided to write my own.

If you haven’t got any knowledge of PHP, it’s probably worth brushing up on it here before you dive into this.

Below is the final code that will end up in the functions.php file of your WordPress theme:

function get_breadcrumb() {

	global $post;

	$trail = '

';
	$page_title = get_the_title($post->ID);

	if($post->post_parent) {
		$parent_id = $post->post_parent;

		while ($parent_id) {
			$page = get_page($parent_id);
			$breadcrumbs[] = '' . get_the_title($page->ID) . ' » ';
			$parent_id = $page->post_parent;
		}

		$breadcrumbs = array_reverse($breadcrumbs);
		foreach($breadcrumbs as $crumb) $trail .= $crumb;
	}

	$trail .= $page_title;
	$trail .= '

';

	return $trail;

}

Let’s go into it in a little more detail.

function get_breadcrumb() {

	global $post;

	$trail = '

';
	$page_title = get_the_title($post->ID);

Here, we are opening the get_breadcrumb() function which we’ll be calling from the page where the breadcrumb is to be displayed. $post needs to be declared as a global variable in the function so we can access the details of the page such as title and parent ID. $trail is the variable that will be returned from the function, so the first thing we want to save to it is the opening <p> tag. This can obviously be changed to whatever you want or omitted entirely depending on how you have your CSS set up.

$page_title is the variable where the current page title will be stored.

if($post->post_parent) {
	$parent_id = $post->post_parent;

	while($parent_id) {
		$page = get_page($parent_id);
		$breadcrumbs[] = '' . get_the_title($page->ID) . ' » ';
		$parent_id = $page->post_parent;
	}

	$breadcrumbs = array_reverse($breadcrumbs);
	foreach($breadcrumbs as $crumb) $trail .= $crumb;
}

In this if loop, we are checking that the current page has a parent. $post->post_parent gets the ID of said parent which is then stored in the $parent_id variable.

The while loop repeats until there are no more parents in the hierarchy. get_page($parent_id) gets the information of the parent page and stores it in the $page variable, in a similar fashion to the $post variable with the current page. The next line appends the permalink and title of the page active in the loop as well as a delimiter (») to the $breadcrumbs array. The final line in the while loop updates $parent_id to the page currently active in the loop’s parent.

Now we’ve got all of the parents stored in an array, they’re going to be stored backwards: [0] => 'Parent »' [1] => 'Grandparent »' [2] => 'Greatgrandparent »' and so on. Simply pass $breadcrumbs through the array_reverse() function, and they’re in a more breadcrumb like order. The next foreach loop takes each item from the reversed array and appends it to the $trail variable we started earlier.

At this point, our $trail variable should contain, an opening <p> tag with a class of ‘breadcrumb’, and all the parents of the current page. Now all that remains is to append the current page title and a closing <p> tag.

	$trail .= $page_title;
	$trail .= '

';

	return $trail;
}

In this final part of the code, all that happens is the current page title and a closing <p> tag are appended to the outputted $trail variable. The final line before the curly bracket returns the $trail variable when the function is called.

Now the function is completed, it needs to be called from whatever page you want it to be displayed on. Simply add the following code anywhere on a page in your WordPress theme and hey presto, a simple breadcrumb with links.

It’s worth noting, if you’d rather not use echo in your page theme, you can swap return with echo in the final line of the function, and then just call get_breadcrumb(); by itself in the page theme.