WordPress 101: Tips, Tricks, & Hacks - How To Add Breadcrumbs To Your Theme

Let’s say you want to build a website on the internet that helps you further your creative and/or professional goals. How will you build that website? Pre 2010s, this question might have had many people scratching their heads. But today in the 2020s, not many people are baffled by this question anymore.

What might be the reason behind this ground-up empowerment of netizens you would ask? Well, the answer to this question is simple enough. That answer is WordPress, the Content Management System that changed the CMS industry.

With the advent and eventually rise of WordPress, the tools to create amazing websites were democratized. This revolution in website designing and creation has helped foster a new type of internet. An internet that is open for all, an internet that bridges the gaps in society instead of widening them.

But just because WordPress has made website designing simple, doesn’t mean it has become easier. With the internet evolving continually, you need to keep your website up-to-date to perform better on the search algorithm. One fundamental way you can rank higher and better with your website is with the help of breadcrumbs.

WordPress Hacks: How To Add Breadcrumbs To Your Theme

What are Breadcrumbs? Breadcrumbs or Navigation Breadcrumbs as they are known are hierarchical data menus to help users to navigate a website from the search results section. Breadcrumbs also work dual purpose and help search engine crawlers to better index your website.

If you also want to add breadcrumbs to your website and propel its search ranking, then we have something special for you! WordPress hacks that will let you do this at an instant. To know the hack, continue to read the steps:

Step 1 – To add breadcrumbs to your website, you need to add the following code snippet to your functions file:

function the_breadcrumb() {

        echo '

<ul id="crumbs">';

    if (!is_home()) {

        echo '

    <li><a href="';

        echo get_option('home');

        echo '">';

        bloginfo('name');

        echo "</a></li>

";

        if (is_category() || is_single()) {

            echo '

    <li>';

            the_category('title_li=');

            if (is_single()) {

                echo "</li>

    <li>";

                the_title();

                echo '</li>

';

            }

        } elseif (is_page()) {

            echo '

    <li>';

            echo the_title();

            echo '</li>

';

        }

    }

    elseif (is_tag()) {single_tag_title();}

    elseif (is_day()) {echo"

    <li>Archive for "; the_time('F jS, Y'); echo'</li>

';}

    elseif (is_month()) {echo"

    <li>Archive for "; the_time('F, Y'); echo'</li>

';}

    elseif (is_year()) {echo"

    <li>Archive for "; the_time('Y'); echo'</li>

';}

    elseif (is_author()) {echo"

    <li>Author Archive"; echo'</li>

';}

    elseif (isset($_GET['paged']) && !empty($_GET['paged'])) {echo "

    <li>Blog Archives"; echo'</li>

';}

    elseif (is_search()) {echo"

    <li>Search Results"; echo'</li>

';}

 

    echo '</ul>

';

}

Step 2 – Now that you have added the above code snippet, you’ll have to add another code snippet to your theme’s template file where you want to show the breadcrumbs. For example, single.php, archives.php, etc: