Despite the mundane name, breadcrumbs are very useful tools for improving your site’s User Experience (UX) and Search Engine Optimization (SEO). Enabling them is simple with help from a plugin or a little custom code.
In this post, we’ll introduce you to WordPress breadcrumbs and explain how they work. Then, we’ll show you how to add them to your site, style them, and remove them. There’s a lot of to cover, so let’s get started!
What Are WordPress Breadcrumbs?
Breadcrumbs, as they relate to WordPress (or any website), are navigational links that appear at the top of a post or page. They show users the higher-level categories that led them to the content they’re currently viewing and also enable easy navigation back to previously-viewed pages.
For instance, consider the following example:
On the left side, right below the header, you can see the words Home > Resource Center > Kinsta Blog. Each is a link back to its corresponding page from the current post. This enables readers on our blog to navigate to any of these key content areas with a single click, instead of having to use the Back button, the menu, or the search feature.
That’s how breadcrumbs got their name: they create a trail that leads users back ‘home’. They’re particularly helpful for sites such as blogs and online stores, where visitors may want to move between individual posts, product pages, and category archives where they can find similar content.
How Do WordPress Breadcrumbs Work?
There are three different types of WordPress breadcrumbs. All incorporate navigational links as described above, but in slightly different ways:
- Hierarchy-based: These breadcrumbs show users where they are in your site’s structure, as in the above example.
- Attribute-based: Used primarily on ecommerce sites, these breadcrumbs display the attributes the user has searched for that led them to the product they’re currently viewing.
- History-based: As users move from page to page throughout your site, these breadcrumbs will lead back the way they came.
Each variety of breadcrumbs is useful for different purposes. However, all can improve navigation and by extension UX.
They’re also beneficial for SEO purposes. Breadcrumbs clearly show the relationships between different pieces of content on your site. In this way, they make it easier for search engine crawlers or ‘bots’ to understand how your site is structured.
This enables those bots to index your site’s pages more accurately. Search engines may also display your breadcrumbs in results listings, so users can see additional content on your site related to the information they’re looking for.
How to Add WordPress Breadcrumbs to Your Site (4 Methods)
Whether you’re a coding whiz or a WordPress beginner, you can quickly and easily add breadcrumbs to your site in just a few steps. Here are four different ways you might accomplish this task.
1. Enable Breadcrumbs in Yoast SEO
Yoast SEO is a popular plugin that helps WordPress users approximate their search engine rankings and optimize their content accordingly. It also includes some other features for boosting your site’s visibility, including breadcrumbs.
If you haven’t already, install and activate the plugin in your WordPress dashboard:
Next, you’ll need to add this code snippet to your theme:
<?php
if ( function_exists('yoast_breadcrumb') ) {
yoast_breadcrumb( '<p id="breadcrumbs">','</p>' );
}
?>Specifically where you add it is somewhat up to you. If you want to use breadcrumbs in your blog posts, you can add it to your single.php template file.
Alternatively, pasting it at the end of your header.php file will add breadcrumbs to your entire site:
Keep in mind that future theme updates may override this custom code. You’ll need to 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:
Toggle the Breadcrumbs settings switch to enabled. Then, preview your site:
You should now see breadcrumbs on the relevant parts of your site, based on where you added the code snippet.
2. Enable Breadcrumbs with a WordPress Breadcrumbs Plugin
Adding breadcrumbs with Yoast is especially convenient if you’re already using that plugin for SEO purposes. However, if you prefer a different plugin for optimizing your content, the above approach is less helpful. Fortunately, there are several other plugins available that are specifically geared towards adding breadcrumbs to WordPress.
Breadcrumb NavXT
The most popular plugin for adding breadcrumbs to WordPress apart from Yoast is Breadcrumb NavXT:
This plugin provides a breadcrumbs widget that you can add to any widget area your theme provides, such as a sidebar or footer. It’s highly customizable, enabling you to choose which pages and categories to display in the trail. Breadcrumbs NavXT also includes schema markup for improving SEO.
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:
Click on the drop-down arrow to open the widget settings and then fill out the necessary fields:
Make sure to select the checkboxes as necessary to add links to your breadcrumbs, determine their order, hide them on the front page, and ignore caching. When you’re finished, click on the Save button, then check the front end of your site:
Your breadcrumbs should now be visible in whichever widget area you chose for them.
Flexy Breadcrumb
As an alternative, Flexy Breadcrumb is the most highly-rated plugin for adding breadcrumbs to WordPress:
When this plugin is installed and activated, you can add breadcrumbs to your site using the [flexy_breadcrumb] shortcode. This gives you a little more flexibility as to where your trails will appear. You’ll also have more control over styling components such as font size, color, and icons.
After you install Flexy Breadcrumbs, you’ll see a new item in your dashboard sidebar:
Then, you’ll have some settings to configure. In the General tab, you can change the text and icon for your home page, set the character limit, and determine the hierarchy:
In the Typography tab, you can adjust the font color and size for your breadcrumbs as well:
After you’ve customized your trail, you’ll need to add the [flexy_breadcrumb] shortcode wherever you want your breadcrumbs to appear. While it’s possible to do this in each individual post you publish on your site, it’s more efficient to add the shortcode to a WordPress widget:
If you check the front end of your site, you should be able to see your breadcrumbs displayed wherever you added the shortcode.
WooCommerce Breadcrumb
For online retailers, WooCommerce Breadcrumbs is an easy way to add navigational links to your product pages:
If you’re running your online store with the popular WooCommerce plugin, this may be the best option for you. It enables you to activate breadcrumbs for your product pages, in order to improve customer navigation on your site.
After installation and activation, you can navigate to Settings > WC Breadcrumbs to customize your breadcrumb trails:
The most important setting to consider is the Enable breadcrumbs checkbox. You have to make sure it’s selected in order to display your breadcrumbs. Then, check one of your product pages:
Your breadcrumb trail should be visible at the top of the page.
Breadcrumb
Finally, Breadcrumb is a lightweight plugin that enables you to add breadcrumbs anywhere on your site using shortcodes:
This plugin has the most extensive settings of any listed in this post. You can access them by clicking on Breadcrumb in your WordPress dashboard sidebar:
The first tab is labeled Options, and includes some general settings such as custom text, separators, and character limits:
There’s also a whole tab dedicated to styling options. There are several arrow buttons you can choose from, as well as font sizes and colors:
If you have some coding skills and want more control over your styling, you can also use the Custom CSS tab:
Finally, it’s important to visit the Shortcode tab in order to add your breadcrumbs to your site:
You can use the shortcode anywhere on your site, just as with the other plugins we’ve covered. However, Breadcrumb also provides a code snippet you can add to one of your template files to incorporate your trails in your header, footer, or elsewhere.
3. Use a Theme that Includes Breadcrumbs
While they are usually thought of in the context of controlling how your site looks, WordPress themes can also influence your website’s functionality. One way they can do this is by adding breadcrumbs to your pages.
The drawback of using a WordPress theme to add breadcrumbs to an existing WordPress site is that it involves changing your website’s appearance as well. If you have an established brand and site identity, this isn’t really a practical solution, and you’ll likely be better off with a plugin.
However, if you’re starting a new WordPress site or are executing a website redesign, choosing a theme that incorporates breadcrumbs is a low-effort method for adding them to your site. Plus, there are several options available for free in the WordPress Theme Directory.
OceanWP
OceanWP is one of the most popular multipurpose WordPress themes:
It includes a shortcode that you can use to easily apply breadcrumbs to your pages. There are also several demos available for use with OceanWP that incorporate breadcrumbs. To use the shortcode, simply add [oceanwp_breadcrumb] to a post, page, or text widget:
You can customize your breadcrumbs using the following parameters:
- Class: Incorporates a custom CSS class.
- Color: Changes the color of the text.
- Hover color: Changes the color of the text when users hover over your breadcrumbs.
Simply add any or all of these parameters right in the shortcode brackets:
You should now see your breadcrumbs on the relevant pages.
Astra
Likewise, Astra also makes adding breadcrumbs to your site easy:
The most straightforward way to enable breadcrumbs with Astra is via the Customizer. With the theme installed and activated, navigate to Appearance > Customize:
Then, select the Breadcrumb tab:
Here, you’ll see a drop-down that enables you to choose where you want to display your breadcrumbs on the page:
Once you make your selection, some styling options will appear as well:
Make sure to click on the Customizer Publish button to save your changes.
4. Add Breadcrumbs Manually
Plugins and themes are part of what makes WordPress such a user-friendly and accessible platform. However, for some more advanced users and developers, they can feel limiting. Code can be a very creative medium, and having the ability to freely write your own breadcrumbs may appeal to you.
To display breadcrumbs manually, you’ll need to do two things. 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 ‘<a href="”’.home_url().’”" rel="”nofollow”">Home</a>’;
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 “ » ”;Search Results for…
echo ‘“<em>’;
echo the_search_query();
echo ‘</em>”’;
}
}
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 breadcrumbs 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:
<div class="breadcrumb"><?php get_breadcrumb(); ?></div>
Modifying these files will display breadcrumbs on your site, but doesn’t enable you to style them so that they match its design. To that, you’ll need to get your hands dirty with some CSS as well.
How to Style Your WordPress Breadcrumbs
Styling your breadcrumbs is necessary if you’re coding them yourself. However, it can also be helpful if you’re using a plugin or a theme to add them. The default styling those tools provide may not be a good fit for your site, in which case you might want to tweak them to maintain consistency.
You can add custom CSS to style your breadcrumbs in your theme’s stylesheet (style.css) or in the Additional CSS area of the Customizer:
There are many ways you can adapt your breadcrumbs to match your site’s design, such as by tweaking their font, size, and color. You might also consider elements such as margins, padding, border, and icons.
Here’s an example of some CSS that can be used to style your breadcrumbs:
.breadcrumb {
padding: 8px 15px;
margin-bottom: 20px;
list-style: none;
background-color: #f5f5f5;
border-radius: 4px;
}
.breadcrumb a {
color: #428bca;
text-decoration: none;
}
There are many possibilities when it comes to CSS. So it may take some experimenting to get your breadcrumbs looking exactly how you want them.
How to Remove WordPress Breadcrumbs From Your Site
Although there are many benefits to adding breadcrumbs on your site, that doesn’t mean they’re for everyone. Some people may find them confusing or feel that they make the site’s pages too cluttered.
If you want to remove breadcrumbs from your WordPress site, you can do so by using whatever method makes sense based on how you originally added them. For instance, if you custom-coded your breadcrumbs, you can simply remove the code you added from your theme’s files.
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.
The same can be said for themes that enable breadcrumbs via a setting or WordPress shortcodes. However, there are some themes that add breadcrumbs by default. Removing these can be a little trickier, especially if you’re not very experienced with code.
If this is your situation, you’ll need to navigate to your site’s header.php file. There, run a search command for “breadcrumb”. This should highlight the code calling the function that adds breadcrumbs to your site (if it exists here):
Delete this line of code to remove breadcrumbs 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.
If everything else fails, contact your theme’s developer for support. Note that updating your WordPress theme may override any changes you’ve made to its files. That’s why best practices suggest using a child theme for this reason, in order to preserve your customizations indefinitely.
Summary
Strong UX and SEO are both key to a successful website. Enabling WordPress breadcrumbs can make it easier for visitors to navigate throughout your site, while also helping search engines understand its structure and index your pages accurately.
In this post, we’ve covered four methods for adding breadcrumbs to your WordPress site:
- Turn on breadcrumbs in Yoast SEO.
- Install and configure a WordPress breadcrumbs plugin.
- Use a theme that includes breadcrumbs.
- Add your breadcrumbs manually using code.
Do you have any questions about WordPress breadcrumbs or how to use them? Let us know in the comments section below!
Head of Content at Kinsta and Content Marketing Consultant for WordPress plugin developers. Connect with Matteo on Twitter.
One another pinnacle from the home of Kinsta.
When I search on Google and one of the results comes from Kinsta, I immediately have a smile on my face. This article demonstrates why.
Most times, content which appears on the 1st page of Google is heavily influenced by affiliate incentives. Alternatively, it may contain broken links, or simply won’t match the quality which Kinsta delivers in its blog.
Well done!
Thank you for your kind words Haggai!
Hi, this is a great article. Can any of the above help with attribute-based breadcrumb where the URL is different from the breadcrumb path.
For example, if the URL of a page is http://www.example.com/one we want the breadcrumb to be: Home > Products > One or Home > Products > Types > One without the url changing( The url stays example.com/one).
Hi Great work on this article, I understand bit better now about breadcrumbs. Would I be able to use them on my blog?
Yes, if you’re using WordPress, you can use a plugin like Yoast which supports breadcrumbs.