How to Add Breadcrumbs to Your WordPress Website

WordPress breadcrumbs are a great tool for improving the usability of your WordPress site, especially if it has a complex structure with multiple page levels. Moreover, breadcrumbs can help boost your SEO rankings, since they give search engines a quick way of viewing how the various pages on your site are interconnected. But what are breadcrumbs exactly, and what’s the best way to add them to your WordPress website?

Essentially, a breadcrumb (or a breadcrumb trail) is a small text path that serves as a secondary type of navigation. It shows your website visitors the steps they took to get to the page they are currently viewing. For example, if a reader came to view your blog post titled “Summer Breeze”, which is located in the “Style” category of your blog, the breadcrumb to that post would look something like this: Home > Style > Summer Breeze. You can see this in action in the image below.

By using breadcrumbs in this way, you can give users a sense of location, let them know exactly where they are on your website at any given moment, and let them easily jump between pages to find the content they’re most interested in.

That being said, we have to note that adding breadcrumbs to your home page doesn’t make much sense, since your front page is the place where everything begins, so, having breadcrumbs there isn’t really necessary in the first place.

Breadcrumbs aren’t only great for your visitors, but they also let search engines get a clearer picture of how your website is arranged. In fact, Google has started showing breadcrumbs in the search results, right below the site title. This means the possibility of an increased click-through rate and higher visibility for your site. Taking all this into account, we highly recommend adding WordPress breadcrumbs to your website. Here’s how to do it.

Breadcrumb Settings on Qode Interactive Themes

The process of setting up breadcrumbs in Qode Interactive WordPress themes is extremely simple thanks to the specific options that have been created by our developers. If you have one of our themes installed on your WordPress website, you can enable breadcrumbs for a specific page or post in the Title Area Type field from the backend of that page or post. The exact options in the dropdown may vary depending on the theme you are using, but to enable breadcrumbs, simply choose one of the title area types that has “with breadcrumbs” in its description. Because this option is page specific, it lets you set a different title area type for each page/post.

You can also set every Title Area on your website to have the same type. This setting can be found in the theme’s options under the Title tab.

Again, simply choose the type of title area you’d like in the Title Area Type field. Once you choose a setting, it will become the default setting for your entire website, which means that it will apply to every page or post unless you change it individually, on the page/post itself.

Adding WordPress Breadcrumbs Via a Plugin

Another way to add breadcrumb navigation to your website is by installing a breadcrumb plugin. We’ve selected two different WordPress plugins that you can use to add WordPress breadcrumbs to your web pages.

1. Breadcrumb navXT

One of the simplest ways to add breadcrumbs to your website is to use the Breadcrumb navXT plugin. After you install and activate the plugin, you should go to Settings > Breadcrumb NavXT to configure the settings.

Most websites should work more than fine with general settings, but in case you need more specific settings, feel free to customize them according to your needs.

The General tab lets you adjust your overall site settings. Here you can modify the paged link templates. It is immediately visible that these navigation link templates rely on the Schema.org parameter principle.

In the Post Types tab, you can set the breadcrumb links for pages, posts and custom post types. Choosing how to display your post hierarchy is also an option. The default plugin setting will display it as Site Title > Category > Post Title, but you can change categories into tags, dates or post parent.

Showing the Breadcrumb NavXT Plugin on Your Website

In order for Breadcrumb NavXT to work and your breadcrumbs to be displayed, you will have to edit your theme (or child theme) files. You can do this by adding some code to your theme or child theme’s header.php file. You can find the file in the list after you access Appearance > Theme Editor.

Here’s the code you should add:

<div class="breadcrumbs" typeof="BreadcrumbList" vocab="http://schema.org/">
<?php if(function_exists('bcn_display'))
{
bcn_display();
}?>
</div>

Styling the Breadcrumb NavXT plugin

We should also note that this plugin has default styling settings that can be easily changed by using your theme’s style.css file (which is located in the same place as the header.php file), or in Appearance > Customize > Additional CSS if you wish to monitor the changes as you add the code. You can find more details on styling the plugin’s breadcrumbs in their official documentation.

2. Yoast SEO

We already mentioned the importance breadcrumbs can have for your website’s SEO. In the WordPress world, the Yoast SEO plugin is one of the most popular SEO plugins. As such, it contains a bunch of useful elements and functionalities for optimization of your website, including the ability to add breadcrumbs.

The Yoast SEO breadcrumbs work on the principle of outputting JSON-LD data in the source code, which is the most trustworthy method of adding rich snippet breadcrumbs.

After you install and activate the Yoast SEO plugin, you will see a new option for setting up the plugin in your admin WordPress dashboard.

To set up your breadcrumbs, go to SEO > Search Appearance, and then select the Breadcrumbs tab. Once there, you can configure the settings to your preference. Make sure to save your changes once you’re done.

Implementing Breadcrumbs in Yoast SEO

As with the previous plugin, you will have to edit the theme files to implement Yoast SEO breadcrumbs. To do this, insert the following code into your header.php file:

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

The default breadcrumb class name is .breadcrumbs, and just like with the plugin above, you can style it in any way you want by adding custom CSS in the style.css file (or by going to Appearance > Customize > Additional CSS).

Conclusion

Essentially, adding WordPress breadcrumbs to your site can benefit you in many ways. Not only can they improve the user experience in general by making the navigation easier, but they can also encourage people to visit more pages on your website, thus making the bounce rate lower, and they help boost your SEO rankings. All these benefits make breadcrumbs an important component of every website. And with our guide, implementing them should be a piece of cake.