Build custom breadcrumb in WordPress

Breadcrumbs plays very important role for your site and helps your user to track his path on website. As per standard web designs, it placed on top of the page and just after header region.

ADVERTISEMENTS

In WordPress cms, we have several plugins for breadcrumb but avoiding unwanted plugins is a good practice for developers because of conflicts with other plugins. So, Building a custom breadcrumb by writing a short script in wordpress is not a tough task. We also recommend you to simple script for displaying breadcrumb on your site.

In this tutorial, we have shared steps to build your simple breadcrumb in WordPress site.

Step 1: Generate

For generation of breadcrumb, we have created a method i.e. generate_breadcrumb. This method will examine your path and return root location with complete trail of your path in html format. You just add this method in functions.php file of the your website's active theme. Here is code of this custom script :

/**
 * Generate Custom breadcrumbs
**/
function generate_breadcrumb() {
    // Define Home Page Link
    $home_link        = '<a href="'.home_url().'">Home</a>';
    $breadcrumb_ary   = [];
    $breadcrumb_ary[]  = $home_link;
    if (is_category() || is_single()) {
        $breadcrumb_ary[] = the_category(' &bull; ');
            if (is_single()) {
                breadcrumb_ary[] = the_title();
            }
    } elseif (is_page()) {
        $breadcrumb_ary[] = the_title();
    } elseif (is_search()) {
        $breadcrumb_ary[] = "Search Results for...".the_search_query();
    }
    $breadcrumb_response = implode("&nbsp;&nbsp;&#62;&nbsp;&nbsp;", $breadcrumb_ary);
    echo $breadcrumb_response;
}

This step covered way for creating breadcrumb dynamically in WordPress.

Step 2: Display

Now, we have to call our custom method i.e. generate_breadcrumb in single.php for displaying breadcrumb. Just create a div with class name i.e. custom_breadcrumb and call that custom method. Here is code of this calling custom method :

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