Breadcrumb navigation

The following description will show you how to add a breadcrumb navigation to WordPress without an extra plugin.

On pages you will see the hierachy if you are on a sub page which allows you to quickly navigate to a parent page.

On blog posts the category will be displayed and also the tags which were added to the post. If you click this information you get to the respective archive of the category or tag.

Technical implementation

To implement this you don’t need a plugin, just some additional code in the theme. First I added the following function to the functions.php of the theme. This will output the navigation if applicable – only on single posts or on pages if they have at least one ancestor:

function the_breadcrumb() {
    if(!is_home()) {
        if(is_single()) {
            echo '<div class="breadcrumb">';
            the_category(' ');
            the_tags(' (', ', ' ,')');
            echo ' » ';
            the_title();
            echo '</div>';
        } elseif(is_page()) {
            $ancestors = get_ancestors(get_the_ID(), 'page');
            $count = count($ancestors);
            if($count > 0) {
                echo '<div class="breadcrumb">';
                while($count > 0) {
                    $page_data = get_page( $ancestors[$count-1] );
                    echo '<a href="'.get_permalink($page_data->ID).'">'.
                        get_the_title($page_data->ID).'</a> » ';
                    $count--;
                }
                echo the_title();
                echo '</div>';
            }
        }
    }
}

This function will then be inserted at the appropriate position (in my case the templates for pages and posts):

<?php the_breadcrumb(); ?>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
...
</article>

For the layout there is an additional CSS class in style.css:

.breadcrumb {
    margin-bottom: 1.5em;
    padding-bottom: 0.5em;
    border-bottom: 1px solid #c0c0c0;
}