What are Breadcrumbs in WordPress?

Published on March 8, 2023 by Simon Wright

Have you ever navigated through a website and noticed a bunch of links at the top of the page? Those are known as “breadcrumbs,” a secondary navigation aid that helps users understand where they are on a website and how they got there. They particularly benefit websites with in-depth content like e-commerce sites, blogs, or news sites. WordPress breadcrumbs work similarly to breadcrumbs on any other website but have some unique characteristics specific to the WordPress platform.

In this article from WP Bolt, we’ll examine what WordPress breadcrumbs are, how to get them on your site, discuss whether you should enable or disable them, and tell you how to fix them if they go wrong. We will also review some best practices for optimizing breadcrumb navigation.

After reading this article, you will understand what WordPress breadcrumbs are, how to use them effectively, and how they can improve your website’s user experience and visibility to search engines.

What Are WordPress Breadcrumbs?

WordPress breadcrumbs are a navigation aid that displays a hierarchical trail of links, typically located at the top of a page. The trail shows the user where they are in the website’s hierarchy and how they got there. They comprise a series of clickable links to the parent page, sub-page, and sub-subpage (as applicable), with each link separated by a symbol, such as a right arrow or slash. Here’s an example of the breadcrumb for a product page of an online store:

The user can click on any part of the breadcrumb to quickly navigate to any previous page.

Breadcrumbs are particularly useful for websites with a deep hierarchy or large amounts of content. They help users understand the website’s structure and find their way back to previous pages. Additionally, breadcrumbs can improve the SEO of a website by providing search engines with more information about the site’s organization.

WordPress breadcrumbs differ from breadcrumbs on non-WordPress sites in several ways, including:

  • They can be implemented using plugins, built-in functionality, or custom code, depending on the theme and plugins used on the site.
  • Many WordPress sites have complex page hierarchies, which can impact how breadcrumbs are displayed. For example, if a site has multiple levels of sub-pages, the breadcrumbs may need to show several levels of hierarchy to reflect the page structure accurately.
  • WordPress breadcrumbs may include additional functionality specific to the WordPress platform, such as support for custom post types or taxonomies. This can make them more flexible and powerful than breadcrumbs on other site types.

Overall, while WordPress breadcrumbs function in the same way as breadcrumbs on other types of sites, their implementation and appearance may differ depending on the combination of theme, plugins, and page hierarchy used on the site.

How To Get Breadcrumbs on a WordPress Website

There are several ways to add breadcrumbs to a WordPress site. Here are the most common methods:

1. Use a Plugin

A plugin is one of the simplest ways to add breadcrumbs to a WordPress site. Several breadcrumb plugins are available such as Breadcrumb NavXT and Breadcrumb. Moreover, many SEO plugins also add breadcrumbs to WordPress, such as Yoast SEO.

If you are a WordPress novice, plugins are your best friend, as they make adding breadcrumbs and other functionality to your site easy without needing any coding know-how.

2. Add Code to Your Theme

If your theme does not have built-in breadcrumb functionality, you can add code to your theme’s files to display breadcrumbs. The code is usually inserted into the theme’s functions.php file.

The code varies depending on the specific theme and required breadcrumb implementation. However, here is an example of a simple breadcrumb code to add to a theme’s header.php file:

<div class="breadcrumbs">
  <?php if (function_exists('bcn_display')) {
    bcn_display();
  } ?>
</div>

If you don’t know how to add code to your theme, plenty of resources are available online, including tutorials that can guide you through the process. And don’t worry, it’s not difficult to do, but just be sure to make a backup of your site first!

3. Use a Theme with Integral Breadcrumb Functionality

Some WordPress themes come with integral breadcrumb functionality, which makes adding them super simple.

If your theme supports breadcrumbs, you must usually enable them in its settings. Popular themes that come with built-in breadcrumb functionality include OceanWP and Astra.

Unfortunately, changing a theme on an existing WordPress website to add breadcrumbs may also alter the site’s appearance. This can be problematic for established brands; in this case, a plugin would be a better solution.

Once you have added breadcrumbs to your site, you can customize the location and appearance of the breadcrumbs to match your site’s design. For example, you can change the breadcrumbs’ font, color, and size or move them to a different location on the page. Above all, as breadcrumbs are meant to improve your site’s user experience, it’s essential to ensure that they are easy to see and use, so choose the settings with that in mind.

When Should Breadcrumbs Be Disabled in WordPress?

Generally speaking, enabling breadcrumbs in WordPress is a good idea for most sites, as they can improve the user experience and SEO. However, there are times when they should be disabled. When deciding whether to enable breadcrumbs or not, you need to consider the following:

1. Site Structure

If your site has a deep hierarchy or a large amount of content, breadcrumbs can be very helpful for users to understand the structure of the site and navigate through it. If your site is simple and has few pages or categories, breadcrumbs may be unnecessary and can be disabled.

2. User Behavior

Suppose your site’s analytics show that users frequently use the back button or struggle to navigate the site. In that case, breadcrumbs can be very helpful for providing an alternative way for users to navigate the site. However, if the analytics show they are already navigating through your site easily, breadcrumbs may not be as necessary.

3. Website Design

Breadcrumbs can take up valuable screen real estate and may not fit well with all site designs. Therefore, it’s important to ensure that the breadcrumbs are well-designed and fit with the overall look and feel of the website.

4. Mobile Responsiveness

Breadcrumbs can be especially useful on mobile devices, where screen sizes are limited, making navigation challenging. Therefore, ensure that the breadcrumbs are mobile-responsive and easy to use on all device types.

How to Fix Breadcrumbs Errors in WordPress

If you have enabled breadcrumbs on your WordPress site and are experiencing issues, there are several steps you can take to eradicate the problem. Here are some common breadcrumb errors and how to fix them:

1. Breadcrumbs Not Displaying

If the breadcrumbs are not displaying on your site, the first step is to ensure they are enabled in the theme or plugin settings. If enabled, there may be a conflict with another plugin or your theme’s code. To troubleshoot this issue, try disabling other plugins one by one to see if the breadcrumbs appear. If the breadcrumbs still don’t appear, your theme may need code added to display them.

2. Breadcrumbs Displaying Incorrectly

Should your breadcrumbs display incorrectly, for example, the wrong page hierarchy or the wrong separator is showing, the first step is to check your theme or plugin settings to ensure that the breadcrumbs are configured correctly. If the settings are in order, but the problem persists, code may need to be added to the theme to customize the breadcrumbs.

3. Breadcrumbs Causing Errors

If your breadcrumbs are causing errors on your site, such as broken links or 404 errors, firstly ensure that the links in your breadcrumbs are correct and working properly. If they are, the issue may be due to a plugin or theme conflict. In this case, try disabling other plugins individually to see if the errors disappear. If the errors still occur, you may need to insert the appropriate code into your theme to fix the issue.

In general, fixing breadcrumb errors in WordPress requires methodical troubleshooting and potentially adding code to your theme. If you’re uncomfortable with either of these, try contacting a developer or support team for assistance. It’s also essential to keep the theme and all plugins updated to ensure your site runs smoothly and prevent conflicts. Moreover, keeping the number of plugins you use to a minimum can also help avoid problems.

Best Practices for WordPress Breadcrumbs

To ensure that a WordPress site’s breadcrumbs are effective and user-friendly, it’s important to follow some best practices. Here are our tips for creating and implementing them in WordPress:

1. Use Clear and Concise Labels

Use clear and concise labels in the breadcrumbs to accurately reflect the page hierarchy and content on the website. Also, avoid using vague or overly complex labels that may confuse users.

2. Use Simple Separators

Make use of a simple separator, such as a right arrow or slash, in the breadcrumbs to separate the different levels of the page hierarchy. Avoid using complex or unusual separators or mixing them, as that may be confusing or distracting for users.

3. Ensure the Breadcrumbs Are Easily Visible

The breadcrumbs should be easily visible on the website and not blend in with the background or other page elements. Using a contrasting color or font is an excellent way to make them stand out.

4. Make the Breadcrumbs Mobile-Friendly

With the increasing use of mobile devices, it’s vital to ensure that the breadcrumbs are mobile-friendly and easily accessible on all devices. Check their appearance in desktop and mobile views to ensure they appear as you expect.

5. Test the Breadcrumbs

Before enabling breadcrumbs on a live site, test them thoroughly to ensure they are working correctly and not causing any errors or issues. This should include testing on multiple devices and browsers.

By adhering to these recommendations, your WordPress site’s breadcrumbs will be effective and user-friendly. Additionally, remember to monitor your site’s analytics and user feedback to continuously improve and refine your breadcrumbs to meet the needs of your users best.

Final Thoughts

When properly implemented, breadcrumbs are a great addition to any WordPress site. Being a useful navigation tool, they help users understand a site’s structure, allowing them to navigate around it more easily. Moreover, breadcrumbs can significantly enhance your site’s SEO, thereby pulling in more traffic. Best of all, adding them is straightforward, so there’s no excuse not to put them on your WordPress site.

A Word About Hosting

Your website is only as good as the hosting service where it resides. That is why WP Bolt offers secure, reliable virtual private server (VPS) hosting with pricing plans to suit every budget. Check out the WP Bolt Blog to learn more about VPS hosting and read other helpful WordPress-related articles.

Want to speed up your web site?

WP Bolt makes it easy and affordable to have a High Performance WordPress VPS server.

View Pricing & Sign Up Now