How To: Breadcrumbs in WordPress

Published 3rd September 2009

In this tutorial I am going to show you how to do proper, full breadcrumbs in WordPress including nested categories and nested pages. Breadcrumbs are a pretty standard design pattern and can be very useful in a lot of website situations.

I’m aware there are already some good plugins for adding breadcrumbs in WordPress but I’m going to show you how to do it the good old fashioned way.

The PHP Code

Since I like to copy and paste I’ll post the full code first and then take a look at what it’s doing. You can just include this function in your theme’s “functions.php” file.

function get_breadcrumbs() { global $wp_query; if ( !is_home() ){ // Start the UL echo '&lt;ul class="breadcrumbs"&gt;'; // Add the Home link echo '&lt;li&gt;&lt;a href="'. get_settings('home') .'"&gt;'. get_bloginfo('name') .'&lt;/a&gt;&lt;/li&gt;'; if ( is_category() ) { $catTitle = single_cat_title( "", false ); $cat = get_cat_ID( $catTitle ); echo "&lt;li&gt; ". get_category_parents( $cat, TRUE, " " ) ."&lt;/li&gt;"; } elseif ( is_archive() && !is_category() ) { echo "&lt;li&gt; Archives&lt;/li&gt;"; } elseif ( is_search() ) { echo "&lt;li&gt; Search Results&lt;/li&gt;"; } elseif ( is_404() ) { echo "&lt;li&gt; 404 Not Found&lt;/li&gt;"; } elseif ( is_single() ) { $category = get_the_category(); $category_id = get_cat_ID( $category[0]-&gt;cat_name ); echo '&lt;li&gt; '. get_category_parents( $category_id, TRUE, " " ); echo the_title('','', FALSE) ."&lt;/li&gt;"; } elseif ( is_page() ) { $post = $wp_query-&gt;get_queried_object(); if ( $post-&gt;post_parent == 0 ){ echo "&lt;li&gt; ".the_title('','', FALSE)."&lt;/li&gt;"; } else { $title = the_title('','', FALSE); $ancestors = array_reverse( get_post_ancestors( $post-&gt;ID ) ); array_push($ancestors, $post-&gt;ID); foreach ( $ancestors as $ancestor ){ if( $ancestor != end($ancestors) ){ echo '&lt;li&gt; &lt;a href="'. get_permalink($ancestor) .'"&gt;'. strip_tags( apply_filters( 'single_post_title', get_the_title( $ancestor ) ) ) .'&lt;/a&gt;&lt;/li&gt;'; } else { echo '&lt;li&gt; '. strip_tags( apply_filters( 'single_post_title', get_the_title( $ancestor ) ) ) .'&lt;/li&gt;'; } } } } // End the UL echo "&lt;/ul&gt;"; } } `</pre> We then include the following code on any pages you want breadcrumbs to appear: <pre>` &lt;?php get_breadcrumbs(); ?&gt; `</pre> ### The CSS Code The CSS code is just adding some simple styling so that the links appear inline. This can be styled as you wish. <pre>` ul.breadcrumbs { list-style: none; padding: 0; margin: 0; font-size:12px; } ul.breadcrumbs li { float: left; margin: 0 5px 0 0; padding: 0; }

The Explanation

So what are we doing here? Well lets start at the start.

  • First off don’t show breadcrumbs if it’s the homepage. If it’s not we add our first link which is to the top level homepage.
  • We then have a simple set of elseif statements which cover us for all the different situations we might find ourselves in. Some are fairly self explanatory like the seach, 404 and archive sections.
  • If it is a category we simply find the category ID then get list the parents of the current category. WordPress helps us with this by providing a “get_category_parents()” function.
  • If we are on a single page it gets a bit more in-depth. We have to find the category ID but in a slightly different way to above. However once you get the category ID it’s just the same method as above plus the addition of the title of the page you are on.

Now pages are slightly more in depth but nothing too complex:

  • First off get the page title. Easy.
  • We then find the ancestors of the page and reverse the order of them. Thankfully WordPress has a get_post_ancestors() function making our life much easier. The next line just adds the current post to the array of ancestors.
  • Finally we use a “foreach” loop to cycle through all of the ancestors and output them. The if statement in the loop makes sure that the last ancestor (the current page) doesn’t have a link.

So there you have it. Fully customizable, valid breadcrumbs in WordPress.