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.

$1 Domain Names – Grab your favorite one
  • Simple reg­is­tra­tion
  • Premium TLDs at great prices
  • 24/7 personal con­sul­tant included
  • Free privacy pro­tec­tion for eligible domains

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.

Image: Example of breadcrumbs on a website
Bread­crumbs simplify nav­i­gat­ing between different subpages of a website.

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.

Tip

Get the most out of WordPress with Hosting for WordPress from IONOS. You’ll get 99.97% server avail­abil­i­ty, many useful security features and can manage your website more ef­fec­tive­ly through CLI control.

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”.
Tip

Your perfect domain is just a few clicks away! When you register a domain with IONOS, you also get Wildcard SSL, a 24/7 service and simple setup.

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.

Image: Screenshot of WordPress Customizer with Astra theme
Adding bread­crumbs using the Cus­tomiz­er is simple and intuitive with Astra.

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.
Image: Screenshot of settings in Breadcrumb NavXT
Bread­crumb NavXT offers several cus­tomiza­tion options.
Managed Hosting for WordPress
Create your site with AI, we manage the rest
  • Stress-free, no matter your skill level with easy AI tools
  • Fully cus­tomiz­able with themes and plugins
  • Hassle-free updating and less admin

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.
Image: Screenshot of Yoast SEO breadcrumb settings in WordPress
Configure the WordPress bread­crumbs as you like.

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>"';
    }
}
php

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>
html

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

Con­clu­sion

WordPress bread­crumbs are a useful addition to your website and have a positive impact on SEO while boosting the user ex­pe­ri­ence. There are various ways in which to use the feature. Themes or plugins are an easy option to do so, while im­ple­ment­ing code has the advantage of ad­di­tion­al design and cus­tomiza­tion options.

Go to Main Menu