Shortcode: Easily Add Breadcrumb

Links are one of the vital parts of a web layout and if you have a lot of them you got to add a navigation and breadcrumb system. So that at any particular article visitor know where he is in the site’s navigation layout and how he can find similar articles. This shortcode will automatically generate breadcrumb for all the posts, pages, categories and tags.


Add following code where you want to display your breadcrumb navigation.

<?php the_breadcrumb(); ?>


Add following snippet to “functions.php”

function the_breadcrumb() {
    echo '<ul class="breadcrumb">';
    if (!is_home()) {
        echo '<li><a href="'.get_option('home').'">Home</a></li>';
        if (is_category() || is_single()) {
            echo '<li>';
            the_category(' </li><li> ');
            if (is_single()) {
                echo "</li><li>";
                echo '</li>';
        } elseif (is_page()) {
            echo '<li>';
            echo the_title();
            echo '</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>';

To make it look better, Lets add some CSS styles in “style.css”

.breadcrumb {
    font: 15px Arial, Helvetica, sans-serif;
    background: #eeeeee;
    background: -moz-linear-gradient(top, #eeeeee 0%, #cccccc 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#cccccc));
    background: -webkit-linear-gradient(top, #eeeeee 0%,#cccccc 100%);
    background: -o-linear-gradient(top, #eeeeee 0%,#cccccc 100%);
    background: -ms-linear-gradient(top, #eeeeee 0%,#cccccc 100%);
    background: linear-gradient(top, #eeeeee 0%,#cccccc 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 );
    height: 30px;
    line-height: 30px;
    color: #9b9b9b;
    border: solid 1px #cacaca;
    overflow: hidden;
    margin: 0px;
    padding: 0px;

.breadcrumb li {
    list-style-type: none;
    float: left;
    padding-left: 10px;

.breadcrumb a {
    display: block;
    font-size: 13px;
    background-image: url('');
    background-repeat: no-repeat;
    background-position: right;
    padding-right: 15px;
    text-decoration: none;
    color: #454545;



Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>