How to add WordPress bread­crumbs to your website

Bread­crumb nav­i­ga­tion is a useful feature for websites and users alike. In WordPress, you can add bread­crumbs via themes, plugins or by adding the relevant code.

What are WordPress bread­crumbs?

Bread­crumbs are nav­i­ga­tion paths which show users the area of the website they’re in. They’re meant to fa­cil­i­tate ori­en­ta­tion on a website and improve nav­i­ga­tion. Bread­crumbs make it easy to return to the su­per­or­di­nate level or the starting point in just one click.

Close

What are the ad­van­tages of WordPress bread­crumbs?

Bread­crumbs are great for boosting the user-friend­li­ness of a website. Better nav­i­ga­tion means that users can jump between the in­di­vid­ual (sub)pages of a website more easily. That means they also tend to hang around a bit longer which lowers the bounce rate. At the same time, usability and internal linking are improved. This has a positive effect on search engine crawlers and bots. In other words, WordPress bread­crumbs are useful for search engine op­ti­miza­tion.

What types of WordPress bread­crumbs are there?

There are three different types of bread­crumbs. Their func­tion­al­i­ty is always the same. The three different variants are:

• Hi­er­ar­chi­cal: These bread­crumbs show visitors exactly where they are on a website and map the levels above. In most cases, the homepage and re­spec­tive subpages are displayed. These bread­crumbs are suitable for most websites.
• History-based: This option is used less fre­quent­ly, but serves its purpose. In­di­vid­ual steps are created and displayed as paths while visiting the website. If necessary, in­di­vid­ual points of a path can be navigated to again.
• Attribute-based: Attribute-based WordPress bread­crumbs are useful for web shops. This option displays search terms and cat­e­gories that led a user to an article. One example of this is the structure “Home -> Bicycles -> E-bikes -> specific model”.

Add WordPress bread­crumbs

There are three options to set up WordPress bread­crumbs and these are by using a theme, SEO or plugins or adding code manually. The step-by-step guide below explores each option to help you enhance your web presence using WordPress bread­crumbs.

Using a theme

WordPress themes are a simple option to add WordPress bread­crumbs. Themes are easy, practical solutions to design a website. But if you already have a fully func­tion­ing website, adding a theme could be a hassle as it changes the design of a page. To design a new website using a new WordPress menu or if you’re planning on changing the design of your website, various free themes are available. For example, OceanWP is a popular WordPress theme con­tain­ing bread­crumbs.

Simply use the Cus­tomiz­er to add WordPress bread­crumbs. You can select the option and easily customize it to your liking. Choose the po­si­tion­ing, the separator between layers and the font color. Not only is this a simple option to add website bread­crumbs but it ensures that they also match the design of your online presence.

Close

Using plugins

If you don’t plan on changing the design of your own WordPress website or blog, or if you’ve chosen a theme with no option for WordPress bread­crumbs, you can use a WordPress plugin. One of the most popular plugins to this end is Bread­crumb NavXT. It is free and user-friendly.

1. Add the plugin as usual.
2. Select “Widgets” in “Ap­pear­ance”. You should be able to see Bread­crumb NavXT.
3. Drag the widget to the area where you want the WordPress bread­crumbs to be displayed later.
4. A drop-down menu appears below the arrow from where you can now make various ad­just­ments, e.g. set the start page, store sep­a­ra­tors, determine the order, exclude select pages or ignore caching.
5. Save your settings and check the WordPress bread­crumbs on your website.

Close

Using SEO plugins

Prefer working without ad­di­tion­al plugins? You can use WordPress SEO plugins to insert bread­crumbs. One of the most popular solutions is Yoast SEO. The bread­crumb feature is intended for dis­play­ing search results, but it can be used on a website. To insert WordPress bread­crumbs using the plugin, proceed as follows:

1. Install Yoast SEO and activate the plugin from your dashboard.
2. On the left, in the “Yoast SEO” section, select “Search Ap­pear­ance” and then “Bread­crumbs”. Enable the option at the bottom of the website ap­pear­ance settings.
3. Use shortcode [wpseo_bread­crumb] to insert it anywhere on your website.

Close

Using code

Another option is to add WordPress bread­crumbs manually. You’ll be adding code in this case. First add the code to the functions.php file of your theme. For safety reasons create a child theme first. The code looks like this:

function breadcrumb() {
    echo '<a href="'.home_url().'" rel="nofollow">Startseite</a>';
    if (is_category() || is_single()) {
        echo "  »  ";
        the_category(' • ');
            if (is_single()) {
                echo "   »   ";
                the_title();
            }
    } elseif (is_page()) {
        echo "  »  ";
        echo the_title();
    } elseif (is_search()) {
        echo "  »  searchresults... ";
        echo '"<em>';
        echo the_search_query();
        echo '</em>"';
    }
}

Add the code to the cor­re­spond­ing template. For example, to add WordPress bread­crumbs to the header, add the following code to header.php in the header section of the file.

<div class="breadcrumb"><!--?php breadcrumb (); ?--></div>

To customize the design of WordPress bread­crumbs use ad­di­tion­al CSS.