Breadcrumbs can help you improve your website’s navigation, so if you’re looking for an easy way to enable them, you’ve come to the right place. This guide will show you how to add breadcrumbs in WordPress using plugins and theme options.

What are Breadcrumbs?

Breadcrumbs are links that show up on the top of your page. These are interconnected links that constitute an essential part of your site navigation. These links are arranged hierarchically, so not only will your users know what page they are on, but they will also learn about what categories of pages they are under. For example, on our site, you can see the breadcrumbs at the top of this webpage.

Breadcrumbs help your users view the hierarchy of the page they are browsing on your website and get connected links to go back to higher pages or the home page directly.

Why add Breadcrumbs in WordPress?

Adding breadcrumbs is an excellent option for improving your site’s navigation. Since it essentially works as a trail, your users can easily use it to backtrack to their previous pages and keep track of what page they are on. This leads to more engagement and keeps visitors informed about the category of the pages they view.

Additionally, adding breadcrumbs is essential if you have a large website. If you’re running an eCommerce store or have your content distributed under different categories, then it is essential to enable breadcrumbs. This will make your customers aware of what products lie under each category and which categories they can return to view more similar products.

Furthermore, enabling breadcrumbs also improves your website’s SEO, making it easier for search engine crawlers to navigate your interconnected links.

Now that we understand what they are and how they can benefit you let’s examine the different methods for adding breadcrumbs to your WordPress website.

How to add Breadcrumbs in WordPress

There are a few different methods to add breadcrumbs to your WordPress site:

1. Using Yoast SEO
2. With dedicated breadcrumb plugins
3. From your theme

Let’s have a look at each method.

NOTE: Some of these methods require you to modify some core files. Even though the snippets are straightforward, we highly recommend you use a child theme to avoid any issues. This makes changing your theme much safer, and the changes won’t revert when you update your theme. You can create a child theme or use any dedicated plugins.

1) How to add Breadcrumbs in WordPress with Yoast SEO

Yoast SEO is one of the most popular plugins and a complete WordPress SEO solution. It also has a dedicated breadcrumbs option and advanced options to customize it further. This includes changing link separators, anchor text for the home page, breadcrumbs for the 404 page, additional personalization options, and even showing or hiding taxonomies and content type archives in your breadcrumbs.

To access and enable breadcrumbs settings under Yoast, go to Yoast SEO > Search Appearance on your WordPress Admin Dashboard (assuming you already have the Yoast SEO plugin installed and activated.)

Then, go to the Breadcrumbs tab to see the breadcrumbs options under Yoast SEO. Scroll down, enable the Enable BreadCrumbs for your theme option, and save the changes.

After that, you need to add a small line of code to your headers.php file so that your theme file calls the Yoast SEO breadcrumbs in your website’s header.

To do this, open your theme editor by clicking Appearance > Theme editor. Then, select Theme Header from the list of files on the right.

Now, use the editor and paste the following snippet at the end of the header.php file.

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

Then, hit Update File, and that’s it! You should now be able to use your Yoast SEO breadcrumbs.

Remember to check out additional options under the breadcrumbs tab to customize your breadcrumbs. Yoast allows you to do it all from there and is compatible with most WooCommerce themes.

2) How to add Breadcrumbs in WordPress with dedicated Plugins

Alternatively, you can use third-party plugins if you don’t want to use Yoast SEO. In this section, we’ll look at a few excellent plugins you can use to add breadcrumbs to your WordPress site. All these plugins are free, so you can test them and choose the right one without spending a cent.

1) Flexy Breadcrumb

Flexy BreadCrumb lets you quickly enable breadcrumbs on your website using its dedicated shortcode. Simply install and activate the plugin and use its shortcode on any part of your website: pages, blogs, widgets, headers, or footers. This way, you can add your breadcrumbs to any site section so they fit the rest of your content.

This free plugin also has dedicated personalization options to change breadcrumb separators, home and end text, colors, color options for links, and more.

Key features

• Dedicated shortcode to add breadcrumbs to any part of your website
• There are tons of personalization options
• Very user-friendly and easy to use

2) Breadcrumb NavXT

Breadcrumb NavXT is a robust solution that enables fully functional breadcrumbs. It is one of the most popular breadcrumb plugins, and for good reason. Using your WordPress files, you can easily allow your breadcrumbs to use a dedicated widget or call its function directly on headers, footers, or specific page templates.

The plugin also has built-in options to customize your breadcrumbs, and the number of options is astounding. You can set up separate templates for your blogs and posts and experiment with creative ways to show your breadcrumbs distinctly in different parts of your site.

Key features

• Extensive breadcrumbs personalization and template customizations
• Dedicated widgets to enable breadcrumbs anywhere on your website
• Additional features for users to add functions and filters

3) Catch Breadcrumb

Catch BreadCrumb is a lightweight plugin that adds breadcrumb navigation to your website. It enables breadcrumbs quickly and allows you to customize them further using its dedicated shortcode and personalization options.

Catch BreadCrumbs isn’t the most feature-packed, but its well-designed package of options has all the features you need without being overwhelming. It allows even beginner users to set up their breadcrumbs in minutes. Finally, you can add elegant breadcrumbs and use nifty options such as hiding breadcrumbs on your home page.

Key features

• Lightweight and simple to use
• Responsive design with tons of personalization options
• Options to hide/show breadcrumbs on the homepage or specific pages

Now, examine one of these plugins and see how to enable it on your website. We’ll use Flexy BreadCrumbs for this demo, but you can use any other tool. Most tools are similar, so you should be able to follow these steps for most plugins without any issues. However, we recommend you have the documentation handy to solve any issues.

Add BreadCrumbs in WordPress with Flexy Breadcrumbs

Let’s start by installing the plugin. In your WordPress Admin Dashboard, go to Plugins > Add New. Then, use the search bar at the top right to search for Flexy BreadCrumbs, click Install, and activate it.

Now, let’s see how to set up and customize the plugin.

Using Flexy BreadCrumbs Shortcode and adding it to your Theme Files

The easiest way to use Flexy BreadCrumbs is by simply using its shortcode:

[flexy_breadcrumb]

You can add this shortcode to any blog, page, or widget to display your breadcrumbs.

For example, if you want to display breadcrumbs on a blog or a product page, add this shortcode as shown below.

On the other hand, if you want your breadcrumbs to appear on all your pages and posts without manually adding them, you can add this shortcode to your theme files.

To do that, open your Theme Editor by clicking Appearance > Theme Editor, use the Theme Files sidebar on the right, and select your header.php file.

Now, at the bottom of the file, add the following snippet:

<?php
echo do_shortcode('[flexy_breadcrumb]');
?>

Remember that if you’re using another shortcode plugin, you will replace the [flexy_breadcrumb] section of the plugin with your plugin’s shortcode instead.

After that, click Update File, and your breadcrumbs will be displayed on your website.

But what if you want to customize your breadcrumbs to suit your website? You can do so by using the plugin’s options. Click Flexy Breadcrumb on your WP Admin Dashboard sidebar, and you’ll see all the customization options for changing your breadcrumbs. This includes changing the home icon, breadcrumb separator, post-type hierarchy, and typography settings.

3) How to add BreadCrumbs in WordPress from your Theme (or remove them)

Some themes come with dedicated breadcrumb options, which you can usually enable/disable from the theme options. For example, we can access the theme options for the Elf theme by going to Appearance > Customize > Dedicated theme options tab, which is labeled Fairy Theme options. Once there, we click Breadcrumbs and enable/disable them with the provided toggle.

Some themes also come with additional options to customize breadcrumbs to match the look and feel of your site.

Bonus: How to disable breadcrumbs

Some themes come with breadcrumbs enabled by default, so to disable them, you have to add a function to the theme files. For example, Storefront comes with its dedicated breadcrumbs, and you can disable them using the following code:

add_action( 'init', 'ql_remove_storefront_breadcrumbs' );
function ql_remove_storefront_breadcrumbs() {
remove_action( 'storefront_before_content', 'woocommerce_breadcrumb', 10 );
}

Simply add this to your functions.php file by going to Appearance > Theme Editors > functions.php.

After that, remember to update the file, and that’s it. You have successfully removed the breadcrumbs from your site.

Conclusion

All in all, breadcrumbs can help you improve your website’s navigation and enhance customer experience.

In this guide, we’ve seen different ways to add breadcrumbs to your WordPress site:

• Using Yoast SEO’s breadcrumbs options
• With a dedicated plugin
• Through your theme’s options (if it has them)

Additionally, we’ve shown you how to easily remove breadcrumbs from your site with a simple code snippet. Finally, remember that you might need to re-add the code snippet to add breadcrumbs if you change your theme.

For more information on how to customize your site and improve its navigation, check out the following tutorials:

• How to edit breadcrumbs in WordPress
• How to Organize WooCommerce Products by Brand
• How to Add WooCommerce Product Categories to the Menu

Have you added breadcrumbs to your site? Which method did you use? Let us know in the comments section below!