DEV Community

Cover image for How to create breadcrumb in wordpress without plugin?
Chetan Rohilla
Chetan Rohilla

Posted on • Edited on • Originally published at w3courses.org

How to create breadcrumb in wordpress without plugin?

In this article we will teach you how to create breadcrumb in wordpress without plugin.

Breadcrumb is important module of your website or blog. It allows your website visitors navigate through your website pages, posts or categories and increases your website’s page views.

First of all paste the code given below in your functions.php file located at root_directory_path/wp-content/themes/your_theme/functions.php

function get_breadcrumb() {

    echo '&#127962; <a href="'.home_url().'" rel="nofollow">Home</a>';

    if (is_category() || is_single()) {
        echo "&nbsp;&nbsp;&#187;&nbsp;&nbsp;";
        the_category(' &#187; ');
        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>"';
    }
}
Enter fullscreen mode Exit fullscreen mode

Now we have a function get_breadcrumb() and we can create breadcrumb at any place of our website or blog. Let’s say we are creating a breadcrumb in header of our website or blog. Then we will call function get_breadcrumb() at our header file located at root_directory_path/wp-content/themes/your_theme/header.php

<?php if (!is_home()): ?>
      <div class="breadcrumb">
        <?php get_breadcrumb(); ?>
      </div>
<?php endif; ?>
Enter fullscreen mode Exit fullscreen mode

And here we have added a if condition !is_home() because we don’t want to show breadcrumb on home page of our website or blog.

And here below is a css of our breadcrumb. So, paste this css in your style.css file located at root_directory_path/wp-content/themes/your_theme/style.css

.breadcrumb{
    background: #FFF;
    margin-top: 2%;
    padding: 10px 20px;
}
Enter fullscreen mode Exit fullscreen mode

That’s it Now you have learned how to create breadcrumb in wordpress without plugin and try, test and create your breadcrumb in your website or blog without plugin.

And if you want more tutorials and tricks about wordpress then visit our WordPress Page and follow us on facebook, twitter, tumblr, linkdedin and if you like this article then share this.

Please like share and give positive feedback to motivate me to write more.

For more tutorials visit my website

Thanks:)
Happy Coding :)

Top comments (0)