WordPress Breadcrumbs | How to Add Them to Your Website

As a website owner, your primary focus should be to improve the user experience on your site. WordPress Breadcrumbs can help you achieve this by providing a secondary navigation menu. This menu makes it easy for your visitors to find other resources on your website.

Some themes such as Astra and Ocean WP have breadcrumb features built into them by default, which you can enable with ease from the customizer menu.

However, if your theme does not support it by default, and you do not want to change your websites’ theme, then you may add them using a plugin or by manually writing the code on your sites’ template.

In this guide, we will explain what breadcrumbs mean, and why you need to enable them on your website. We will then show you how to add breadcrumbs to your WordPress site.

Content:

• What are breadcrumbs?
• Why add breadcrumbs to your Website?
• How to add breadcrumbs to a WordPress site
  • Adding breadcrumbs with plugins
  • Add breadcrumbs using custom code
• Customizing breadcrumbs using CSS
• How to disable WordPress breadcrumb
• Conclusion

What are Breadcrumbs?

Breadcrumbs are secondary navigation links that provide users with a trail that led them to the current post they are viewing.

They are usually located below the header section of any website. For instance, take a look at the image below.

The highlighted section in the image above is regarded as the breadcrumb. They are usually arranged in terms of hierarchy. This means your site’s home page comes first, followed by the parent category of the post and then the current post the user is viewing.

Each item in the breadcrumb, aside from the current content, is a link that leads to the parent category of the post or the site home page.

In the example above, ‘Common Problems’ is a link that goes back to the parent category of the current post. While ‘Home’ contains a link to the sites’ homepage.

The breadcrumb link usually takes the user to a list of posts in that category or the site’s home page. In the example above, when the user clicks on the ‘Common Problems’ breadcrumb trail, it takes them to a page listing all the blog posts in that category.

Why Add Breadcrumbs to WordPress Sites?

Adding breadcrumbs to your website has a lot of benefits. For instance, search engines such as Google love them because breadcrumbs help search engine bots better understand your sites’ content and structure.

Aside from that, they also reduces bounce rates on your website. When users find it easy to navigate through your site, they are more likely to spend more time on it.

In an eCommerce website, breadcrumbs improve the user experience and help users easily find related products in your online store.

How to Add Breadcrumbs to WordPress Site

There are two ways you can add breadcrumbs to your site, either using a plugin or by manually adding the code to enable them on your site. Although you can simply enable them from the customize menu if your theme supports it by default. So you should check that before proceeding with the steps below.

Here, we will show you different plugins you can use to enable them on your site. Also, we will share how to use custom codes to add breadcrumbs to your WordPress site.

Side Note: We will be editing the website’s theme files through the admin dashboard, so it is recommended to backup your site before making these changes. That way, you can always restore your site if anything goes wrong.

Also, since you will be modifying your theme’s files, you can create a child theme for your website. This ensures you do not lose custom styles when you update your theme.

Adding Breadcrumbs with Plugins

This is the easiest method for adding breadcrumbs to a WordPress site because it requires no coding experience. Beginners in WordPress can follow along with ease.

Many plugins can be used to add breadcrumbs in WordPress. However, we will be showing you how to use Yoast SEO, breadcrumb navXT, and WooCommerce breadcrumb plugin.

Yoast SEO

Yoast SEO is one of the most popular SEO plugins for WordPress. It is a very useful plugin in terms of optimizing your site to perform on search engines.

Aside from using the plugin as a tool for SEO, you can also use the yoast SEO plugin to enable breadcrumbs on your website.

Ideally, you want to use this option if you already have Yoast installed on your site. If you use another plugin for SEO, you may consider a simpler plugin like navXT below.

If either way you choose to use Yoast, here’s how.

To get started, you will need to install and activate the plugin from your WordPress dashboard (skip installation if you already use Yoast).

Go to Plugins > Add New and then type Yoast in the search field.

Now, install and activate the plugin on your site.

After installing the plugin, go to Appearance > Theme editor.

Now, select the header.php template file and then add the following code snippets at the bottom of the file.


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

After that, click on Update File to save your changes.

Side Note: You may choose to add the code to the single.php or page.php template. The template you choose is entirely up to you.

Adding the code to the header.php file implies that the breadcrumb will be present on all posts and pages.

However, pasting the code on the single.php file will add the breadcrumb to blog posts alone, while adding it to the page.php file will enable breadcrumbs on pages alone.

Activating Yoast Breadcrumb

To activate the breadcrumb, on your WordPress dashboard, click on SEO > Search Appearance.

Now, select the breadcrumbs tab and then toggle the switch to enable it on your site.

The default setting works just fine for most websites. However, you can change the default separator or the anchor text for the homepage to suit your site.

Click on Save changes to activate breadcrumbs.

Now, visit your website and select an individual post. You should see the breadcrumb trail below your sites’ header section.

 

Manually Adding Breadcrumbs with Yoast

Meanwhile, you can use a shortcode to display breadcrumbs on posts and pages using the yoast SEO breadcrumb feature.

Go to Posts > All Posts and then select the post to which you want to add breadcrumbs.

Now paste the shortcode below to the area you want the breadcrumb to appear.

Home » WordPress Breadcrumbs | How to Add Them to Your Website


After that, click on Update and then visit the page on your site.

However, manually adding the breadcrumb shortcode on all your posts can be cumbersome and redundant especially if your site has a lot of posts.

Breadcrumb NavXT

Another popular plugin for adding breadcrumbs to WordPress sites is Breadcrumb navXT.

Simply install the plugin on your site. The installation process is similar to what we did for Yoast above, but you can read this guide to learn how to install a plugin in wordpress.

After installing the plugin, go to Settings > Breadcrumb NavXT to open the configuration menu.

The default settings should work just fine for most websites. However, you can customize it further to suit your themes’ style.

Breadcrumb NavXT has four options with which you can choose how the breadcrumb navigation should look on your site.

After configuring the plugin, click on Save Changes.

Now, to use the plugin, simply go to Appearance > Widgets.

On the widgets menu, you will find the Breadcrumb NavXT widget.

Next, drag the widget to the area you wish to display the breadcrumb navigation.

If you are using the recent block editor, then you can use the Breadcrumb NavXT widget in individual posts.

Simply select a post you want to add the breadcrumb to.

Next, click on the add block (plus) icon and then select the Breadcrumb Trail widget.

After that, click on Update and visit the page you just edited.

Alternatively, you can add a code to your themes’ template to automatically display the breadcrumb on your site.

To do this, go to Appearance > Theme Editor and then select the header.php file.

Now, paste the code below in the header.php file on your WordPress site (you may also use the single.php or page.php file depending on your preference).

bcn_display($return = false, $linked = true, $reverse = false, $force = false);

Click on Update File to effect the change.

Now, your breadcrumb navigation will be available on your site.

Woocommerce Breadcrumbs

If you have a WooCommerce online store and you want to add breadcrumb functionality to your site, then Woocommerce Breadcrumbs is a very good option.

To get started, you need to install and activate the plugin on your WordPress site.

After that, go to the plugin configuration menu under Settings > WC Breadcrumbs.

From here, you can configure the plugin to suit your site.

The most important setting here is to tick the Enable breadcrumbs box. You can leave other settings as it is and then click on Save changes.

Side note: The ‘wrap before’ and ‘wrap after’ option is the HTML element enclosing the breadcrumb. This means you can use additional CSS to further customize the breadcrumb to suit your themes’ styling. We will explore how to customize breadcrumbs using custom CSS in subsequent sections.

Other plugins can be used to add breadcrumbs aside from the ones we covered here such as Flexy Breadcrumb and Breadcrumb plugins. The breadcrumb settings are easy to configure regardless of the plugin you decide to use.

Add WordPress Breadcrumbs using Custom Code

You can get all the functionalities you need by using a third-party plugin to enable breadcrumbs on your WordPress site.

However, if you do not want to install any new plugin, then you can manually input the logic to display breadcrumbs on your site.

Side Note: This section is a little bit advanced and requires some coding experience. You may simply use any of the plugin methods above if you are not tech-savvy.

With that in mind, we will write a function in the themes’ function.php file. The function will handle the breadcrumb logic.

After that, we call the function in the template we want to display the breadcrumb (usually the header.php template). Let’s get started.

Writing Breadcrumb Function Manually

We will be adding the function to the themes’ function.php using an FTP client. Please see how to use FTP here.

Firstly, connect to your WordPress hosting server using Filezilla FTP.

On the right side of the FileZilla client, you will find your remote site files.

Double click on the folder containing your websites’ files. This is usually public_html.

Now, double click on the wp-content folder.

After that, double click on the themes directory.

Next, locate your current themes’ folder and then double click on it.

Afterward, right-click on the functions.php file and select View/Edit.

Now, copy and paste the breadcrumbs code below to the file to register the function on your site.

function display_breadcrumb() {
echo 'Home';
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 " » Results for...";
echo '"';
echo the_search_query();
echo '"';
}
}

Next save your changes close the file, at which point Filezilla will prompt you to upload the updated file, click Yes.

Adding Breadcrumb Function to Themes’ Template

Now, we will use the function we created above in the template on which we want to display the breadcrumb.

In this case, we will use the header.php template, but you can use either the single.php or page.php file.

The breadcrumb trail placement depends totally on the site owner. You may decide to split tests on different locations to confirm which works best for your sites’ theme.

On your current themes folder, right-click on your theme header file and then select view/edit.

Now, paste the code below at the bottom of the file.

<div class="breadcrumbs"><?php display_breadcrumb(); ?></div>

Save the file and then visit any page on your website to view your breadcrumbs.

Customizing WordPress Breadcrumbs Using CSS

Styling your breadcrumb is especially important when you are manually writing the code to enable them.

However, whether you use a WordPress plugin or custom code, styling can help you customize the breadcrumb so that it aligns with your themes’ design.

Side Note: You need to have a basic understanding of CSS to follow along with this process. However, the custom CSS code we will be using in this example contains general styles that blend with most WordPress themes.

Login to your WordPress sites’ admin dashboard and then click on Appearance > Customize.

Now, select the additional CSS option and paste the code snippet below.

.breadcrumbs {

padding: 8px 20px;

margin-bottom: 20px;

list-style: none;

background-color: #f5f5f5;

}

.breadcrumbs a {

text-decoration: none;

}

After that, hit the publish button.

Note that the ‘breadcrumbs’ class used in the example above is the class we specified when we manually wrote the breadcrumbs function.

If you are using a plugin to enable breadcrumb trail on your site, then it is likely the class will be different for your site. Here’s how to get the class.

How to Get Breadcrumb Class using Browser

Go to any page on your website where breadcrumbs are enabled.

Now right click on the breadcrumb and then select ‘Inspect’ to open the developer tool menu.

On the developer tool, note the class in the div tag. In my case, the value is ‘breadcrumbs’.

Now, copy the value of the class and then head back to the customizer menu.

After that, replace the class name with the one you found on your developer tools menu.

Remember to hit the publish button after making any changes to the CSS.

There is a lot more you can do when it comes to customizing using CSS. For example, if the font size differs from other texts on your page, then you can use the font-size CSS property to specify a custom font size for the breadcrumb element.

How to Disable WordPress Breadcrumbs

Breadcrumbs are useful in improving user experience. However, not everyone would want to display a breadcrumb on their website.

Removing them from your site is as simple as undoing the steps you took to add them. For example, if you used a plugin to activate the breadcrumb trail on your site, then you can simply turn off the option or deactivate the plugin.

If you added them using custom code, then disabling them would mean removing all the custom code you added.

If you used Yoast SEO to enable breadcrumbs on your site, then simply go to SEO > Search appearance from your WordPress admin and then toggle the disable switch.

However, if the theme you are using enables breadcrumbs by default, disabling them can be a little bit tricky because it requires manually removing the code from your site. Here’s how.

First, login to your WordPress sites’ admin dashboard and then click on Appearance > Theme Editor.

Next, select the header.php file.

Now, click on the editor and type ctrl+F to open the search field.

On the search box, type the keyword ‘breadcrumb’ and hit the enter key. When you find the line of code containing the breadcrumb, remove it completely.

After that, click on Update File.

If you cannot find the breadcrumb element on the header file, you may also check the single.php or page.php file.

However, if you still cannot disable breadcrumbs on your site after trying the steps above, then you can contact your theme builder or reach out to our WordPress Experts to help you disable them on your WordPress site.

Conclusion – WordPress Breadcrumbs

Adding breadcrumbs to your website has a lot of advantages in terms of improving User Experience (UX) and in Search Engine Optimization (SEO).

In this guide, we shared some easy to follow procedures to add breadcrumbs to your website. For most site owners, the plugin option will be the right choice as it is quite easy to setup.

However, if you are an advanced user, or if you would prefer to minimize the use of plugins, then you go with the manual option.

Whichever you choose, ensure your breadcrumbs are well placed and visible to your users.