Custom breadcrumb in WordPress – Step By Step

In this article, I show you how we can display custom breadcrumb in WordPress on all our pages and posts without using a plugin. By default, the breadcrumb functionality is not available on the WordPress site so there are two ways to accomplish this either by using the plugin or using custom code.

 

If you install a plugin for all your need your site speed may suffer and most of the time plugin didn’t give the desired look and feels and expected result. And if you divided your posts into multiple categories most of the plugins didn’t work.

So let’s start building our custom breadcrumb in WordPress first I show you how our breadcrumb looks.

Home – Home page Link

Product – Category Link

Post/Page Title – Your post or page title.

 

Note: The product category link in breadcrumb will redirect the user to a custom category page instead of the default category page which WordPress creates by default –

Custom Category  Page  – <Home URL>/Product

Example – http://geekstutorials.com/Product

 

Default category page – <Home URL>/category/Product

Example – http://geekstutorials.com/category/Product

 

Steps to Implement the Custom Breadcrumb in WordPress

1. Copy the below CSS in your site CSS so that we can style the breadcrumb –

  .custombreadcrumb {
    padding: 8px 30px;
    margin-bottom: 20px;
    list-style: none;
    background-color: #f5f5f5;
    border-radius: 5px;
  }
  .custombreadcrumb  a {
    color: #428bca;
    text-decoration: none;
   }
   .home  .custombreadcrumb{
        display: none;  //This hide the breadcrumb from home page
   }

2. Now go WordPress site “Appearance” menu and click on the “Theme File Editor” link.

 

3. On the right-hand side you will see the entire theme files then click on the “functions.php” file and copy and paste the below function at the end of the file and save it.

 

function show_breadcrumb() {

    echo '<a href="'.home_url().'" rel="nofollow">Home</a>';
    if (is_category() || is_single()) {
        echo "&nbsp;&nbsp;&#187;&nbsp;&nbsp;";
            $categories = get_the_category();
            if ( ! empty( $categories ) ) {
                echo '<a href="/'.esc_html( $categories[0]->name ).'" rel="nofollow">'. esc_html( $categories[0]->name ) .'</a>';    
            }

            if (is_single()) {
                echo " &nbsp;&nbsp;&#187;&nbsp;&nbsp; ";
                the_title();
            }

    } elseif (is_page()) {
        echo "&nbsp;&nbsp;&#187;&nbsp;&nbsp;";
        echo the_title();
    } elseif (is_search()) {
        echo "&nbsp;&nbsp;&#187;&nbsp;&nbsp;Search Results for... ";
        echo '"<em>';
        echo the_search_query();
        echo '</em>"';
    }

}

 

4. Now go to the “header.php” file and paste the below HTML code just after where </header> is closed because we have to display our breadcrumb links below the header section and Save the header.php file.

  <div class="custombreadcrumb">
    <?php if (function_exists('show_breadcrumb')) show_breadcrumb(); ?>
  </div>

You are all set just refresh any post or page and check the breadcrumb functionality it should appear like below –

 

Conclusion

This is how you can display the custom breadcrumb on the WordPress site without using any plugin. Breadcrumb will enhance the user experience on the page.