The DevTeam Alpha News Aggregation service has sourced the following article originally published on Kinsta:

Despite the mundane name, breadcrumbs are very useful tools for improving your site’s User Experience (UX) and Search Engine Optimization (SEO). Enabling them is simple with help from a plugin or a little custom code.

In this post, we’ll introduce you to WordPress breadcrumbs and explain how they work. Then, we’ll show you how to add them to your site, style them, and remove them. There’s a lot of to cover, so let’s get started!

What Are WordPress Breadcrumbs?

Breadcrumbs, as they relate to WordPress (or any website), are navigational links that appear at the top of a post or page. They show users the higher-level categories that led them to the content they’re currently viewing and also enable easy navigation back to previously-viewed pages.

For instance, consider the following example:

kinsta breadcrumbs example

Breadcrumbs on the Kinsta blog

On the left side, right below the header, you can see the words Home > Resource Center > Kinsta Blog. Each is a link back to its corresponding page from the current post. This enables readers on our blog to navigate to any of these key content areas with a single click, instead of having to use the Back button, the menu, or the search feature.

That’s how breadcrumbs got their name: they create a trail that leads users back ‘home’. They’re particularly helpful for sites such as blogs and online stores, where visitors may want to move between individual posts, product pages, and category archives where they can find similar content.

How Do WordPress Breadcrumbs Work?

There are three different types of WordPress breadcrumbs. All incorporate navigational links as described above, but in slightly different ways:

  • Hierarchy-based: These breadcrumbs show users where they are in your site’s structure, as in the above example.
  • Attribute-based: Used primarily on ecommerce sites, these breadcrumbs display the attributes the user has searched for that led them to the product they’re currently viewing.
  • History-based: As users move from page to page throughout your site, these breadcrumbs will lead back the way they came.

Each variety of breadcrumbs is useful for different purposes. However, all can improve navigation and by extension UX.

They’re also beneficial for SEO purposes. Breadcrumbs clearly show the relationships between different pieces of content on your site. In this way, they make it easier for search engine crawlers or ‘bots’ to understand how your site is structured.

This enables those bots to index your site’s pages more accurately. Search engines may also display your breadcrumbs in results listings, so users can see additional content on your site related to the information they’re looking for.

How to Add WordPress Breadcrumbs to Your Site (4 Methods)

Whether you’re a coding whiz or a WordPress beginner, you can quickly and easily add breadcrumbs to your site in just a few steps. Here are four different ways you might accomplish this task.

1. Enable Breadcrumbs in Yoast SEO

Yoast SEO is a popular plugin that helps WordPress users approximate their search engine rankings and optimize their content accordingly. It also includes some other features for boosting your site’s visibility, including breadcrumbs.

If you haven’t already, install and activate the plugin in your WordPress dashboard:

install yoast seo

Installing the Yoast SEO plugin

Next, you’ll need to add this code snippet to your theme:


<?php
if ( function_exists('yoast_breadcrumb') ) {
  yoast_breadcrumb( '<p id="breadcrumbs">','</p>' );
}
?>

Specifically where you add it is somewhat up to you. If you want to use breadcrumbs in your blog posts, you can add it to your single.php template file.

Alternatively, pasting it at the end of your header.php file will add breadcrumbs to your entire site:

edit header php

Adding the Yoast breadcrumb activation code

Keep in mind that future theme updates may override this custom code. You’ll need to contact your theme developer for information on how to avoid this problem or simply use a child theme. Once the snippet is in place, navigate to SEO > Search Appearance > Breadcrumbs in your dashboard:

yoast breadcrumbs settings

The Yoast SEO breadcrumb settings

Toggle the Breadcrumbs settings switch to enabled. Then, preview your site:

live breadcrumbs example

Live breadcrumbs added with Yoast SEO

You should now see breadcrumbs on the relevant parts of your site, based on where you added the code snippet.

2. Enable Breadcrumbs with a WordPress Breadcrumbs Plugin

Adding breadcrumbs with Yoast is especially convenient if you’re already using that plugin for SEO purposes. However, if you prefer a different plugin for optimizing your content, the above approach is less helpful. Fortunately, there are several other plugins available that are specifically geared towards adding breadcrumbs to WordPress.

Breadcrumb NavXT

The most popular plugin for adding breadcrumbs to WordPress apart from Yoast is Breadcrumb NavXT:

breadcrumb navxt

The Breadcrumb NavXT plugin

This plugin provides a breadcrumbs widget that you can add to any widget area your theme provides, such as a sidebar or footer. It’s highly customizable, enabling you to choose which pages and categories to display in the trail. Breadcrumbs NavXT also includes schema markup for improving SEO.

To add breadcrumbs using this plugin, navigate to Appearance > Widgets. You’ll see a new Breadcrumb NavXT widget, which you’ll want to drag to the widget area where you’d like it to appear:

breadcrumb navxt widget

Adding the Breadcrumb NavXT widget to the footer area

Click on the drop-down arrow to open the widget settings and then fill out the necessary fields:

breadcrumb navxt fields

The Breadcrumb NavXT widget options

Make sure to select the checkboxes as necessary to add links to your breadcrumbs, determine their order, hide them on the front page, and ignore caching. When you’re finished, click on the Save button, then check the front end of your site:

breadcrumb navxt live

Breadcrumbs created with the Breadcrumb NavXT widget

Your breadcrumbs should now be visible in whichever widget area you chose for them.

Flexy Breadcrumb

As an alternative, Flexy Breadcrumb is the most highly-rated plugin for adding breadcrumbs to WordPress:

flexy breadcrumb

The Flexy Breadcrumb plugin

When this plugin is installed and activated, you can add breadcrumbs to your site using the [flexy_breadcrumb] shortcode. This gives you a little more flexibility as to where your trails will appear. You’ll also have more control over styling components such as font size, color, and icons.

After you install Flexy Breadcrumbs, you’ll see a new item in your dashboard sidebar:

flexy breadcrumb dashboard

The Flexy Breadcrumb link in WordPress dashboard sidebar

Then, you’ll have some settings to configure. In the General tab, you can change the text and icon for your home page, set the character limit, and determine the hierarchy:

flexy breadcrumb general

The Flexy Breadcrumb General settings

In the Typography tab, you can adjust the font color and size for your breadcrumbs as well:

flexy breadcrumb typography

The Flexy Breadcrumb Typography settings

After you’ve customized your trail, you’ll need to add the [flexy_breadcrumb] shortcode wherever you want your breadcrumbs to appear. While it’s possible to do this in each individual post you publish on your site, it’s more efficient to add the shortcode to a WordPress widget:

flexy breadcrumb live

A Flexy Breadcrumb trail on the frontend

If you check the front end of your site, you should be able to see your breadcrumbs displayed wherever you added the shortcode.

WooCommerce Breadcrumb

For online retailers, WooCommerce Breadcrumbs is an easy way to add navigational links to your product pages:

woocommerce breadcrumbs

The WooCommerce Breadcrumbs plugin

If you’re running your online store with the popular WooCommerce plugin, this may be the best option for you. It enables you to activate breadcrumbs for your product pages, in order to improve customer navigation on your site.

After installation and activation, you can navigate to Settings > WC Breadcrumbs to customize your breadcrumb trails:

woocommerce breadcrumbs settings

The WooCommerce Breadcrumbs settings page

The most important setting to consider is the Enable breadcrumbs checkbox. You have to make sure it’s selected in order to display your breadcrumbs. Then, check one of your product pages:

woocommerce breadcrumbs live

WooCommerce product page with breadcrumbs enabled

Your breadcrumb trail should be visible at the top of the page.

Breadcrumb

Finally, Breadcrumb is a lightweight plugin that enables you to add breadcrumbs anywhere on your site using shortcodes:

breadcrumb

The Breadcrumb plugin

This plugin has the most extensive settings of any listed in this post. You can access them by clicking on Breadcrumb in your WordPress dashboard sidebar:

breadcrumb dashboard link

The Breadcrumb link in the WordPress dashboard sidebar

The first tab is labeled Options, and includes some general settings such as custom text, separators, and character limits:

breadcrumb general settings

The Breadcrumb plugin settings page

There’s also a whole tab dedicated to styling options. There are several arrow buttons you can choose from, as well as font sizes and colors:

breadcrumb styling settings

The Breadcrumb plugin styling options

If you have some coding skills and want more control over your styling, you can also use the Custom CSS tab:

breadcrumb custom css

The Breadcrumb plugin Custom CSS field

Finally, it’s important to visit the Shortcode tab in order to add your breadcrumbs to your site:

breadcrumb shortcode options

The Breadcrumb plugin shortcode and snippet options

You can use the shortcode anywhere on your site, just as with the other plugins we’ve covered. However, Breadcrumb also provides a code snippet you can add to one of your template files to incorporate your trails in your header, footer, or elsewhere.

3. Use a Theme that Includes Breadcrumbs

While they are usually thought of in the context of controlling how your site looks, WordPress themes can also influence your website’s functionality. One way they can do this is by adding breadcrumbs to your pages.

The drawback of using a WordPress theme to add breadcrumbs to an existing WordPress site is that it involves changing your website’s appearance as well. If you have an established brand and site identity, this isn’t really a practical solution, and you’ll likely be better off with a plugin.

However, if you’re starting a new WordPress site or are executing a website redesign, choosing a theme that incorporates breadcrumbs is a low-effort method for adding them to your site. Plus, there are several options available for free in the WordPress Theme Directory.

OceanWP

OceanWP is one of the most popular multipurpose WordPress themes:

oceanwp theme

The OceanWP theme

It includes a shortcode that you can use to easily apply breadcrumbs to your pages. There are also several demos available for use with OceanWP that incorporate breadcrumbs. To use the shortcode, simply add [oceanwp_breadcrumb] to a post, page, or text widget:

add oceanwp shortcode

Adding the OceanWP breadcrumbs shortcode to a text widget

You can customize your breadcrumbs using the following parameters:

  • Class: Incorporates a custom CSS class.
  • Color: Changes the color of the text.
  • Hover color: Changes the color of the text when users hover over your breadcrumbs.

Simply add any or all of these parameters right in the shortcode brackets:

oceanwp breadcrumb parameters

Customizing OceanWP breadcrumbs with shortcode parameters

You should now see your breadcrumbs on the relevant pages.

Astra

Likewise, Astra also makes adding breadcrumbs to your site easy:

astra theme

The Astra theme

The most straightforward way to enable breadcrumbs with Astra is via the Customizer. With the theme installed and activated, navigate to Appearance > Customize:

astra access customizer

Accessing the Customizer from the WordPress dashboard

Then, select the Breadcrumb tab:

astra customizer breadcrumbs

The Astra breadcrumbs tab in the Customizer

Here, you’ll see a drop-down that enables you to choose where you want to display your breadcrumbs on the page:

astra breadcrumb position

Selecting the breadcrumb position for the Astra theme

Once you make your selection, some styling options will appear as well:

astra breadcrumb styling

The Astra breadcrumb styling options in the Customizer

Make sure to click on the Customizer Publish button to save your changes.

4. Add Breadcrumbs Manually

Plugins and themes are part of what makes WordPress such a user-friendly and accessible platform. However, for some more advanced users and developers, they can feel limiting. Code can be a very creative medium, and having the ability to freely write your own breadcrumbs may appeal to you.

To display breadcrumbs manually, you’ll need to do two things. First, you have to add a function to your functions.php file to enable them. Here’s an example of the code you might use:


function get_breadcrumb() {
        echo ‘<a href="”’.home_url().’”" rel="”nofollow”">Home</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 “  »  ”;Search Results for…
                echo ‘“<em>’;
                echo the_search_query();
                echo ‘</em>”’;
        }
}

Once the function is added, you’ll need to call it in the template files where you want your breadcrumbs to appear. Calling the function in single.php will make breadcrumbs appear on your posts, calling it in header.php displays them everywhere your header appears, and so on.

The code you’ll use should look something like this:


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

Modifying these files will display breadcrumbs on your site, but doesn’t enable you to style them so that they match its design. To that, you’ll need to get your hands dirty with some CSS as well.

How to Style Your WordPress Breadcrumbs

Styling your breadcrumbs is necessary if you’re coding them yourself. However, it can also be helpful if you’re using a plugin or a theme to add them. The default styling those tools provide may not be a good fit for your site, in which case you might want to tweak them to maintain consistency.

You can add custom CSS to style your breadcrumbs in your theme’s stylesheet (style.css) or in the Additional CSS area of the Customizer:

customizer additional css

Incorporating additional CSS to style breadcrumbs via the Customizer

There are many ways you can adapt your breadcrumbs to match your site’s design, such as by tweaking their font, size, and color. You might also consider elements such as margins, padding, border, and icons.

Here’s an example of some CSS that can be used to style your breadcrumbs:


.breadcrumb {
        padding: 8px 15px;
        margin-bottom: 20px;
        list-style: none;
        background-color: #f5f5f5
        border-radius: 4px;
}
.breadcrumb a {
        color: #428bca;
        text-decoration: none;
}

There are many possibilities when it comes to CSS. So it may take some experimenting to get your breadcrumbs looking exactly how you want them.

How to Remove WordPress Breadcrumbs From Your Site

Although there are many benefits to adding breadcrumbs on your site, that doesn’t mean they’re for everyone. Some people may find them confusing or feel that they make the site’s pages too cluttered.

If you want to remove breadcrumbs from your WordPress site, you can do so by using whatever method makes sense based on how you originally added them. For instance, if you custom-coded your breadcrumbs, you can simply remove the code you added from your theme’s files.

Disabling breadcrumbs added with a plugin is usually as simple as deactivating the plugin. In the case of Yoast SEO, you can navigate to the Breadcrumbs tab in the Search Appearance settings, and toggle the relevant switch to Disable.

The same can be said for themes that enable breadcrumbs via a setting or shortcodes. However, there are some themes that add breadcrumbs by default. Removing these can be a little trickier, especially if you’re not very experienced with code.

If this is your situation, you’ll need to navigate to your site’s header.php file. There, run a search command for “breadcrumb”. This should highlight the code calling the function that adds breadcrumbs to your site (if it exists here):

find breadcrumb code

Finding breadcrumbs code in the theme header template file

Delete this line of code to remove breadcrumbs from your site. If you didn’t find the right code, you can try this process again in your single.php and page.php files, to see if the function is called in one of those templates instead.

If everything else fails, contact your theme’s developer for support. Note that updating your WordPress theme may override any changes you’ve made to its files. That’s why best practices suggest using a child theme for this reason, in order to preserve your customizations indefinitely.

Breadcrumbs are teeny tiny elements with an enormous impact on your UX and SEO. Learn how to add them to your #WordPress site with this guide! 🍞👣 Click to Tweet

Summary

Strong UX and SEO are both key to a successful website. Enabling WordPress breadcrumbs can make it easier for visitors to navigate throughout your site, while also helping search engines understand its structure and index your pages accurately.

In this post, we’ve covered four methods for adding breadcrumbs to your WordPress site:

  1. Turn on breadcrumbs in Yoast SEO.
  2. Install and configure a WordPress breadcrumbs plugin.
  3. Use a theme that includes breadcrumbs.
  4. Add your breadcrumbs manually using code.

Do you have any questions about WordPress breadcrumbs or how to use them? Let us know in the comments section below!

Learn more about Kinsta by visiting their website.