Scroll to top
USA
651 N Broad St, Suite 206,
MiddleTown, New Castle,
Delaware - 19709
Canada
635 Ashprior Avenue,
Mississauga, Ontario,
Canada - L5R3N6
India
34, Shiwanshu Bunglows
Vadodara, Gujarat - 390007

How to add Breadcrumbs to your WordPress website?

32 / 100

Haven’t we all felt lost in a place as we desperately try to find the exit at one point? Feeling distressed, we ask a passerby to tell us where to go. Just like in the story of Hansel and Gretel, a trail of crumbs helped them to reach home from the jungle. Let’s understand how they’re related to WordPress. In this post, we’ll understand what breadcrumbs are and how they function. We’ll also talk about the best SEO practices and why navigation is good for your site.

wordpress breadcrumbs in wordpress

Breadcrumbs are an essential part of any website. They are at the top of every page and help users move around on a site. It is a very beneficial feature since its purpose is to improve user experience on your site. These trails not only act as a path for users but also shows google how your website is structured.

Breadcrumbs are tiny links that allow all users to track their path to the page they are on. They are elements that greatly impact the user experience of your website. With them, if you’ve reached a page you don’t want to be on, you can easily go back a step and start over.

What are breadcrumbs used for?

There are three kinds of WordPress breadcrumbs, here’s what you need to know about them:

  1. Hierarchy-based: These breadcrumbs show your location on a website and the number of steps to reach your homepage. For a blog, it looks like Home > Blog > Category > Post name.
  2. Attribute-based: Primarily used on e-commerce sites, Attribute-based breadcrumbs display an aspect that dictates the user to the product which is currently viewed. For an e-commerce site, it looks something like Home > Product category > Gender > Size > Color.
  3. History-based: History-based breadcrumbs are ordered according to your activity on the site. Think of these as an alternative to your internet history bar, so you get something like this: Home > Previous page > the Previous page > the Previous page > Current page.

Breadcrumbs are also useful for SEO purposes. By showing a systematic relationship between pieces of information, it makes it easier to map out your website.

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

How do breadcrumbs help in SEO?

Google replaced the URL within its search results with the site name and navigation path. Google reckons that using the real-world name of the website will help improve its usability and these links will show users their location to be taken on clicking Search.

Breadcrumbs are an essential element of an SEO friendly website. Their main aim is to make navigation easier. They encourage people to visit more pages of any website before they return back and thus they reduce bounce rate.

Breadcrumbs have an impact on user behavior, but are they good for SEO?

The answer to this is yes, although they won’t provide a boost to your SEO results. Although, it is advised to be careful while using breadcrumbs since they act like anchor text for users.

How to add breadcrumbs in WordPress?

There are multiple ways to add breadcrumbs to a WordPress website. They can be added using a code or with the help of a plugin and following a few steps. We will first explore how to add breadcrumbs using a plugin and then see how the manual way goes.

Enabling breadcrumbs using WordPress Plugins

Whether you are a WordPress expert or a beginner, there are several ways of adding breadcrumbs to your site. Firstly, If you use WordPress, one of the best plugins to use is Yoast SEO.  

Yoast SEO

Yoast SEO plugin offers an easy way for you to add breadcrumbs to your site. It takes care of everything, from search engine rankings to optimizing your content, and adding features like boosting site visibility and readability, these features make Yoast SEO a popular option for many users.

Check out our guide on how to add plugins to your WordPress website?

yoast SEO plugin

After installing and activating the Yoast SEO plugin from the directory, just add this code snippet to your theme.

 

If you want to add breadcrumb navigation to your blog posts, add it to your single.php template file. If you wish to add them to your entire site then paste it at the end of your header.php file:

edit theme to add breadcrumbs

Future theme updates may override this custom code. 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:

add breadcrumbs using yoast seo

Toggle the Breadcrumbs settings switch to enabled. By reviewing your site, you’ll be able to now see breadcrumbs on the part of your website where you added the code snippet.

Breadcrumb NavXT

If you’re not using Yoast, this is the easiest way to add breadcrumb navigation to your website. An in-demand plugin, apart from Yoast SEO, for adding breadcrumbs to WordPress is Breadcrumb NavXT:

breadcrumb navigation

One of the best features provided by this plugin is the breadcrumb widget feature that you can add anywhere to the widget area on your themes, such as a sidebar or footer. Breadcrumb NavXT also includes schema markup for improving SEO.

What is schema markup? 

Schema markup is a way to highlight certain areas of your website to search engine crawlers so that they can get a better understanding of how a page is structured.

By adding a piece of code into your HTML (this is called structured data), you can give search engines more information about your page and content.

This can increase your chances of getting rich snippets in the search results and also well-formatted breadcrumbs. Now, let’s get back to NavXT and learn how to use it.

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: 

add breadcrumbs using NavXT

Open widget settings from the drop-down arrow to fill out necessary categories:

widgets area to add breadcrumbs to a wordpress website

Make sure to select all checkboxes necessary to add links to your breadcrumbs, determine their order, hide them on the front page, and ignore caching. Click on the Save button, then check the front-end of your site:

Now, your breadcrumbs should be visible in whichever widget area you chose.

Flexy Breadcrumb plugin

If not NavXT, Flexy Breadcrumb is another highly-rated plugin to add breadcrumbs to your site:

flexy breadcrumb

After installing and activating the plugin, use this  [flexy_breadcrumb] shortcode to provide more flexibility to your website. This code provides more control over styling components like font, color, and icons.

plugin dashboard

After installing the plugin, you’ll see it on the dashboard menu where you have to configure some settings. To change the text and icon for your home page, set the character limit, and determine the hierarchy, go to the General tab.

flexy breadcrumb dashboard

Similarly, in the Typography tab, you can adjust the font color and size for your breadcrumbs.

typograpgy to set-up breadcrumbs in WordPress

After you’ve customized everything, you’ll need to add the [flexy_breadcrumb] shortcode wherever you want them to appear. It’s more efficient to add the shortcode to a WordPress widget than doing it to individual posts.

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

Adding Breadcrumbs manually

To manually display breadcrumbs, two things need to be done. 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 ‘Home’;
   if (is_category() || is_single()){
       echo “  »  ”;
       the_category (‘ • ‘);
   if (is_single()) {
       echo “  »  ”;
       echo the_title();
   } elseif (is_search()) {
       echo “  »  ”;Search Results for…
       echo ‘“’;
       echo the_search_query();
       echo ‘”’;
   }
}

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 them 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:

Modifying these files will display breadcrumbs on your site, but doesn’t enable you to style them so that they match its design. For that, you’ll have to use CSS. 

Now that you’ve understood how to add a breadcrumb navigation feature to your website, let’s look at how to undo this feature if your website doesn’t require them.

How to remove WordPress Breadcrumbs from your site?

Although there are many benefits to adding breadcrumbs on your site, some people find them extremely confusing and that they make their website look cluttered.

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. If you custom-coded your breadcrumbs, you can simply remove the code you added from your theme’s files. 

Some themes add breadcrumbs by default and it can be especially tricky to remove them when coding isn’t your skill. Let’s look at how you can remove them.

Step 1: Navigate to your site’s header.php file.

Step 2: Run a search command for “breadcrumb”

This should highlight the code calling the function that adds breadcrumbs to your site (if it exists):

 

Delete this line of code to remove navigation 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. 

Note that updating your WordPress theme may override any changes you’ve made to its files. If everything fails, it’s best to contact your theme’s developer for support. To preserve your customizations indefinitely, the best practice suggests using a child theme for your WordPress site.

Conclusion

While Hansel and Gretel couldn’t make it back to the forest, don’t let that happen to your visitors! Breadcrumbs are a powerful element to improve user experience and create an engaging site. From a business standpoint, it helps with both SEO and conversions (better user experience). Search engines love them and you should too.

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

Author avatar
Tim Michaels
I am into WordPress and web development for the last 10 years. I use my experience to help people just starting with WordPress. Follow my blog at WP Uber for everything related to WordPress.
We use cookies to give you the best experience.
Do NOT follow this link or you will be banned from the site!