How to Display Breadcrumb without Plugin in WordPress

Breadcrumbs are navigation links, used to display links to all pages beyond the homepage. By default, it is placed at the top of the page and helps in back navigation. In WordPress, breadcrumbs play an important role on the posting page. There are many WordPress plugins available to add breadcrumbs to your site. But we recommend you use our simple code to display breadcrumbs on your WordPress site.

You can easily display breadcrumb on WordPress sites without any plugin. In this tutorial, we’ll show you how to create and display breadcrumbs in WordPress.

We’ve created a custom function called get_breadcrumb() to generate the breadcrumb links. You only need to add the get_breadcrumb() function code in functions.php the file of the current theme.

/**
 * Generate breadcrumbs
 * @author teachdeveloper
 * @authorURL www.teachdeveloper.com
 */
function get_breadcrumb() {
    echo '<a href="'.home_url().'" rel="nofollow">Home</a>';
    if (is_category() || is_single()) {
        echo "&nbsp;&nbsp;&#187;&nbsp;&nbsp;";
        the_category(' &bull; ');
            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>"';
    }
}

Display Breadcrumbs:

Call the get_breadcrumb() function in single.php file and others files where you want to display the breadcrumbs on your WordPress site.

<div class="breadcrumb"><?php get_breadcrumb(); ?></div>

Styling Breadcrumbs:

This CSS helps to style the breadcrumbs links.

.breadcrumb {
    padding: 8px 15px;
    margin-bottom: 20px;
    list-style: none;
    background-color: #f5f5f5;
    border-radius: 4px;
}
.breadcrumb a {
    color: #428bca;
    text-decoration: none;
}