How to Integrate Breadcrumb Navigation without a plug-in

There are plenty of WordPress extensions that generate breadcrumb navigation. But you can actually create custom breadcrumb navigation with only a handful of lines of code in the template, opening up greater control and, potentially, less overhead. This approach to breadcrumbs builds on the get_post_ancestors function.

To start with, here is a basic implementation of breadcrumbs that only deals with pages and includes a breadcrumb for “home” (the front page of theblog) at the beginning of the list. Depending on the design of a particular template, some checks may need to placed around this code. In this example, it will be assumed that this code will be placed in the header.php template file, that the crumbs should appear only on pages, and that it should not show up on the front page. The current page and front page link will also be assigned special CSS classes for styling purposes.

if (is_page() && !is_front_page()) {

echo ‘<ul id=”breadcrumbs”>';

echo ‘<li class=”front_page”><a href=”‘.get_bloginfo(‘url’).'”>Home</a></li>';

$post_ancestors = get_post_ancestors($post);

if ($post_ancestors) {

$post_ancestors = array_reverse($post_ancestors);

foreach ($post_ancestors as $crumb)

echo ‘<li><a href=”‘.get_permalink($crumb).'”>’.get_the_title($crumb).'</a></li>';

}

echo ‘<li class=”current”><a href=”‘.get_permalink().'”>’.get_the_title().'</a></li>';

echo ‘</ul>';

}

If the WordPress implementation has a static front page and has been assigned a “blog” page, one might want to show the breadcrumb path to the blog page. This can be accomplished by adding is_home() to the conditional check at the top:

if ((is_page() && !is_front_page()) || is_home()) {

if ((is_page() && !is_front_page()) || is_home()) {
   ...

The next evolution of this code involves the inclusion of breadcrumbs for individual category archives as well as individual posts. Note that WordPress allows posts to be assigned to multiple categories; to avoid making our breadcrumb trail unweildly, the script will simply grab the first category assigned to the post. For the sake of simplicity, the example will be assumed that hierarchical categories are not in play.

if ((is_page() && !is_front_page()) || is_home() || is_category() || is_single()) {
   echo '<ul id="breadcrumbs">';
   echo '<li><a href="'.get_bloginfo('url').'">Home</a></li>';
   $post_ancestors = get_post_ancestors($post);
   if ($post_ancestors) {
      $post_ancestors = array_reverse($post_ancestors);
      foreach ($post_ancestors as $crumb)
          echo '<li><a href="'.get_permalink($crumb).'">'.get_the_title($crumb).'</a></li>';
   }
   if (is_category() || is_single()) {
      $category = get_the_category();
      echo '<li><a href="'.get_category_link($category[0]->cat_ID).'">'.$category[0]->cat_name.'</a></li>';
   }
   if (!is_category())
      echo '<li><a href="'.get_permalink().'">'.get_the_title().'</a></li>';
   echo '</ul>';
}

There are many ways to extend the breadcrumb navigation further. For instance, a developer might want breadcrumbs for different types of archives (tags, months, etc), or may incorporate hierarchical categories. While this article won’t walk through every possible implementation, the samples above should provide you with a solid framework to work with.

Related Entries

Leave a Reply