Adding Breadcrumbs to your site

Breadcrumbs are a navigational technique displaying all visited pages leading from the home page to the currently viewed page. All pages are linked for easy backwards navigation. Typically this is placed near the top of a web page. So for example, if you

look to the top of this page you will see the breadcrumb navigation menu that leads a path back to the homepage.

Some WordPress themes provide inbuilt Breadcrumbs in their theme but some themes also don't provide breadcrumb. But we need breadcrumbs in our site for better SEO performance.

There are loads of WordPress plugins out there that can handle breadcrumbs for you, but they are not always the best option as they can often get things wrong and end up being more hassle than they are worth. The following code will have breadcrumbs working on your site in no time.

Simply paste the code below into your theme’s functions.php file:

<?php
function the_breadcrumb() {
    global $post;
    echo '<ul id="breadcrumbs">';
    if (!is_home()) {
        echo '<li><a href="';
        echo get_option('home');
        echo '">';
        echo 'Home';
        echo '</a></li><li class="separator"> / </li>';
        if (is_category() || is_single()) {
            echo '<li>';
            the_category(' </li><li class="separator"> / </li><li> ');
            if (is_single()) {
                echo '</li><li class="separator"> / </li><li>';
                the_title();
                echo '</li>';
            }
        } elseif (is_page()) {
            if($post->post_parent){
                $anc = get_post_ancestors( $post->ID );
                $title = get_the_title();
                foreach ( $anc as $ancestor ) {
                    $output = '<li><a href="'.get_permalink($ancestor).'" title="'.get_the_title($ancestor).'">'.get_the_title($ancestor).'</a></li> <li class="separator">/</li>';
                }
                echo $output;
                echo '<strong title="'.$title.'"> '.$title.'</strong>';
            } else {
                echo '<li><strong> '.get_the_title().'</strong></li>';
            }
        }
    }
    elseif (is_tag()) {single_tag_title();}
    elseif (is_day()) {echo"<li>Archive for "; the_time('F jS, Y'); echo'</li>';}
    elseif (is_month()) {echo"<li>Archive for "; the_time('F, Y'); echo'</li>';}
    elseif (is_year()) {echo"<li>Archive for "; the_time('Y'); echo'</li>';}
    elseif (is_author()) {echo"<li>Author Archive"; echo'</li>';}
    elseif (isset($_GET['paged']) && !empty($_GET['paged'])) {echo "<li>Blog Archives"; echo'</li>';}
    elseif (is_search()) {echo"<li>Search Results"; echo'</li>';}
    echo '</ul>';
}
?>

Then you need to go to style.css and add this CSS:

#breadcrumbs{
    list-style:none;
    margin:10px 0;
    overflow:hidden;
}
#breadcrumbs li{
    float:left;
    margin-right:15px;
}
#breadcrumbs .separator{
    font-weight:700;
    font-size:20px;
    color:#999;
}

Finally to call the breadcrumbs onto your page (usually in the header file), simply use the following code:

<?php the_breadcrumb(); ?>

Now enjoy with your breadcrumbs.