WordPress – How to Display Breadcrumb without Plugin

Breadcrumbs are navigation links, used to display all the pages links leading from the homepage. Basically, it is placed at the top of the page and helps to backward navigation. In WordPress, breadcrumbs played an important role on the post page. Many WordPress plugins are available to adding breadcrumbs on your site. But we recommend you to use our simple code for display breadcrumb on your WordPress site.

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

Create Breadcrumbs:

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 file of the current theme.

/**
 * Generate breadcrumbs
 * @author CodexWorld
 * @authorURL www.codexworld.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;
}

Conclusion:

Once you add breadcrumb to your WordPress site, breadcrumbs would display like the below.