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.

wordpress-how-to-display-breadcrumb-without-plugin-by-codexworld

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.

display-breadcrumbs-on-wordpress-site-by-codexworld

Do you want to get implementation help, or enhance the functionality of this script? Click here to Submit Service Request

22 Comments

  1. John Said...
  2. Jordan Said...
  3. Rwky Said...
  4. Mohammed Anis Said...
  5. Kc Said...
  6. Carlos Said...
  7. Yasir Said...
  8. Sumon Said...
  9. Makwana Kiran Said...
  10. Akash Said...
  11. Mahdi_ara Said...
  12. Zack Said...
  13. Andrea Ronchetti Said...
  14. Tad Said...
  15. Seroja Said...
  16. Evan Said...
  17. Rajini Said...
  18. Abdullahil Kafi Said...
  19. VK Web Lab Said...
  20. Fany Said...
  21. Vikash Kumar Said...
  22. AEDI Said...

Leave a reply

keyboard_double_arrow_up