Logo Background
  • Create Google Style Breadcrumb In WordPress
    By on November 23, 2011 | 1 Comment

    Looking for how to code Google style breadcrumb in WordPress without plugin? It takes only 15 minutes or less to construct a stylish breadcrumb in your site without breaking a sweat.

    Before we get started, let me explain on why breadcrumb navigation is important.

    Aside from visually pleasing, breadcrumb can reduce the bounce rate by encouraging clicks on the navigation hierarchy.

    The improvement in user experience will help to boost your SEO ranking indirectly.

    I was driven by the simple and beautiful Google Search button to build a similar style of breadcrumb as visualized below.

    1. Prepare The Breadcrumb Navigation Menu

    Download the Breadcrumb Menu image file to your workstation and upload to your WordPress theme img directory.

    2. Add The Breadcrumb Navigation PHP Code

    There should be one file name functions.php under your WordPress theme directory.

    Add in the code as below and it will be used to generate the HTML code for breadcrumb.

    Please take note that the breadcrumb is coded to support is_category and is_single only.

    // Breadcrumb Navigation
    function the_breadcrumb() {
    if ( !is_home() ) {
    echo '<div id="breadcrumb"> <ul class="crumbs"><li class="first"><a href="';
    echo get_option('home');
    echo '" style="z-index:9;"><span></span>';
    echo ''. bloginfo('name') . '';
    echo "</a></li>";
    }
     
    if ( is_category() || is_single() ) {
    $cats = get_the_category();
    $cat = $cats[0];
    $output .= '<a href="'.get_category_link($cat->term_id).'" style="z-index:8;">
    '.$cat->name.'</a>';
    echo '<li>'.$output.'</li>';
    }
     
    if(is_single())
    {
    echo '<li><a href="'.get_permalink().'" style="z-index:7;">';the_title();echo '</a></li>';
    }
    if(is_page())
    {
    echo '<li><a href="'.get_permalink().'" style="z-index:8;">';the_title();echo '</a></li>';
    }
     
    echo "</ul></div><div class=\"clear\"></div>";
    }

    3. Add The Breadcrumb Navigation CSS Code

    The CSS code block as below should be added to your theme CSS file.

    You may want to use CSS compressor to reduce the CSS code size.

    #breadcrumb {
    display : block;
    float : left;
    margin-left : 15px;
    font-weight : 600;
    }
    #breadcrumb ul {
    font-family : Helvetica, sans-serif;
    list-style : none;
    }
    .crumbs {
    display : block;
    }
    .crumbs li.first {
    padding-left : 8px;
    }
    .crumbs li a, .crumbs li a:link, .crumbs li a:visited {
    color : #616d7e;
    display : block;
    float : left;
    font-size : 12px;
    margin-left : -13px;
    padding : 7px 17px 11px 25px;
    position : relative;
    text-decoration : none;
    }
    .crumbs li a {
    background-image : url(../img/bg-crumbs.png);
    background-position : 100% 0%;
    background-repeat : no-repeat;
    position : relative;
    }
    .crumbs li a:hover {
    background-position : 100% -48px;
    color : #333;
    cursor : pointer;
    }
    .crumbs li a:active {
    background-position : 100% -96px;
    color : #333;
    }
    .crumbs li.first a span {
    border-left : 1px solid #d9d9d9;
    height : 29px;
    left : 0;
    position : absolute;
    top : 0;
    width : 3px;
    }

    4. Display Google Style Breadcrumb Navigation

    In the end, add in the PHP code as below to your single.php, page.php and archive.php file.

    Clear your cache and the Google style breadcrumb navigation should appear like magic. Voila!

    <?php the_breadcrumb(); ?>