How To Add Breadcrumbs To Your WordPress Website
The term “breadcrumbs” refers to an efficient website navigational tool that (Like Hansel and Gretel taught us) is meant to help trace one’s steps back to a website’s “home” (or homepage). They allow users to see how the current page fits into the whole site structure by providing an inline track of links (or labels) leading all the way back to the homepage.
Home Depot Product Page with Breadcrumbs
Breadcrumbs are actually more important to your WordPress Website than you might think. Not only do they enhance user experience, but they also can give your site a bump in the search rankings. Google likes this structural element in a website, and visitors will have crucial navigational help when stumbling upon one of your pages organically (lowering your bounce rate).
You would think that adding such a integrated system of nativation to your website would be difficult, but actually it is pretty simple with the use of a plugin. In fact, if you are using the Yoast SEO plugin, you have a head start because breadcrumbs functionality is already built into Yoast! And, adding breadcrumbs through Yoast is definitely one of the preferred methods out there. Aside from Yoast SEO, The plugin Breadcrumb NavXT is another great option that is highly customizable and also works well with our own Divi Theme.
How to Add Breadcrumbs to Your WordPress Website Using Yoast
To add breadcrumbs to your WordPress Website using Yoast SEO, you will need to tackle three simple steps:
- Install and Activate Yoast SEO Plugin
- Adding the Breadcrumbs code snippet to your WordPress Theme
- Enable/configure Breadcrumbs the Yoast Breadcrumbs in the plugin settings
Install and Activate the Yoast SEO Plugin
To install the Yoast SEO plugin, go to your WordPress Dashboard and navigate to Plugins > Add New. Then search for WordPress repository for “yoast”. When you see the Yoast SEO plugin, click to install and activate the plugin.
Add the Breadcrumbs Code Snippet to your WordPress Child Theme
Next we need to add a short snippet of code to your WordPress theme files. So, if you haven’t already, it is a good idea to create a child theme. For this example, I’m going to show you how to add the breadcrumbs code snippet to a the default TwentyNineteen WordPress Theme. You can add the code to any theme file/template, but for the most part, you will want to add it to your single.php file (to show up on all posts), page.php file (to show up on all pages), or to your header.php file (to show up sitewide).
For this example, I’m going to add the breadcrumbs code to the header.php file of my child theme. Once you copy over the header.php file from the parent theme, open to edit the file in a code editor of your choice.
Then at the very bottom of the header.php file, add the following php snippet provided by Yoast to activate the Breadcrumbs functionality:
This will display breadcrumbs directly under the header of all pages, a common placement for breadcrumbs.
Enable and Configure the Yoast Breadcrumbs in the plugin settings
Once the code snippet has been added to your WordPress Child theme, all you have left to do is activate the Breadcrumbs in the Yoast SEO plugin settings. To do this, go to your WordPress Dashboard and navigate to SEO > Search Appearance and then click the Breadcrumbs tab. Under the Breadcrumbs settings, make sure to enable breadcrumbs by toggling the option to “enabled”. Then you can configure the breadcrumb settings according to your needs. You may also want to choose a taxonomy to show in breadcrumbs for your post. For this example, I’m going to set my posts to show categories in the breadcrumbs.
Now let’s go ahead and check out what the breadcrumbs look like on one of the posts I created in the TwentyNineteen theme.
Here is what the post looks like before enabling breadcrumbs.
Here is what the post looks like after enabling breadcrumbs. This particular post example has a category (“WordPress”) and a parent category (“Web Design”) to show you the category taxonomy of the breadcrumbs that I chose in the breadcrumbs settings.
You may need to adjust the style of your breadcrumbs using some external CSS. To do that, you can use the CSS ID “breadcrumbs” that was included in the php code. Open the style.css file of your Child Theme (or you can add it in the Theme Customizer under Additional CSS) and add the following:
For the TwentyNineteen theme, I may want to match the margin of my header text by adding the following custom CSS:
If you want more control over the specific location of your breadcrumbs, you can use the following shortcode to individual posts or pages as well.
Adding Breadcrumbs to Your WordPress Website Using Breadcrumb NavXT
If you don’t want to install Yoast SEO for some reason or if you are looking for another simple option, the Breadcrumb NavXT plugin is an excellent choice.
To install the plugin, go to your WordPress Dashboard and navigate to Plugins > Add New. Then search the WordPress repository for “breadcrumb navxt”. Once you see the plugin, click to install and activate it.
To call the breadcrumbs so that they display on your website, you can use the built-in Breadcrumb NavXT widget provided in the widgets page. This will allow you to drag the widget into the various widget areas provided by your theme. To do this, go to your WordPress Dashboard and navigate to Appearance > Widgets. Then drag the widget over to the widget area or your choice and update the widget settings.
For this example, I’m using the Divi theme to display the breadcrumbs at the top of my sidebar. Here is what it looks like on a post.
Similar to the Yoast Breadcrumb example, you can also call the breadcrumb trail to your site by adding the necessary code to your child theme. Here is the code they provide that is schema.org breadcrumblist compliant:
Since I’m using the Divi theme for this example, I’m going to add the code to the Single.php file of my Divi Child theme right above the article tag. This will display the breadcrumbs at the top of all my posts.
Here is what a post looks like after adding the code.
Configuring the Breadcrumbs using the plugin settings
The Breadcrumb NavXT plugin has some powerful options for configuring your breadcrumbs. You can customize the entire template of your breadcrumbs for different taxonomies and much more. You can get access to these settings from your WordPress Dashboard by navigating to Settings > Breadcrumb NavXT.
Styling the Breadcrumbs
If you want to style the breadcrumbs, you can target the class called “breadcrumbs” that is included in the code.
Simply add the following CSS to your child theme’s style.css file or to the theme customizer additional CSS:
If you are wanting to use the breadcrumb widget with the Divi theme, you can also use Divi’s sidebar module to add styling to the breadcrumb within the Divi Builder.
Breadcrumbs are an important part of a website both for usability and SEO. So if you are considering adding breadcrumbs to your WordPress site, I would suggest you start with the methods provided by the plugins mentioned in this article (Yoast SEO and Breadcrumb NavXT). It makes the most sense to use Yoast breadcrumbs if you are already taking advantage of their SEO plugin since it is already at your disposal. However, Breadcrumb NavXT is a highly customizable option as well. Sure, you may have to access your theme files, but all in all, the process is a simple one. If anything, I hope this helps ease the pain of getting breadcrumbs on your own WordPress site.
I look forward to hearing from you in the comments.
By Jason Champagne
I really like the WordPress SEO by Yoast implementation of breadcrumbs as I have never had any issues with it. We use sthe yoast plugin on every website so no since in adding extra bloat with other plugins.
Great Article! Thanks!
I agree, the plugin is nice, but I don’t think that Andy should be advocating killing birds, whether it be one bird, two or three. Additionally, the amount of stones used is irrelevant, for in the end, the bird will be no more.
Cruelty against animals should not be taken lightly.
Great Content, i’m going to use on my Divi theme. thank you Andy
Please could you do a tutorial of yoast seo plugin? Everybody says is very good, but i imstalled it and has some many settings that i couldnt use it
This is a massive tutorial for it, you may need something simpler but this will explain everything: https://yoast.com/articles/wordpress-seo/
Useful Post. Navigation and Menus structure always leads to better engagement.
Hi Andy, what will happen after you update the Divi version?
Should we modify single.php every time we update the theme or there is a solution with the child theme?
You can go that route or yes a child theme is a safer bet as updates won’t conflict.
Breadcrumbs should be built into a theme or theme framework. This is a common feature.
I second that, a “Breadcrumb” module should be part of the base Divi modules.
Woocommerce yoast breadcrumbs
Override WooCommerce Shop Site Breadcrumb with Yoast SEO Breadcrumb
I tried to remove the WooCommerce Breadcrumbs with this code:
After that I activated the Yoast Seo Plugin Breadcrumbs an placed this code in my theme header.php
. which also works.
The problem appears when I navigate to my "shop-site" which I defined in the WooCommerce settings. The full breadcrumb looks like this
Note: The Page name in WordPress for the "shop-site" is "Test" (not "Product").
I want to override the "Product" in something different. I tried to override it by defining a custom breadcrumb title in the advanced Yoast settings on the wordpress "shop-site" page but it didn’t seems to work. Overriding works if the page isn’t defined as the "shop-site" in the WooCommerce settings. So I guess some function overwrites the Yoast Breadcrumb override but I can’t figure out which function does this.
The same problem appears when I navigate to a single product. Breadcrumb looks like this
Again I want to rename the "Product" (only the second crumb here) into something different.
WooCommerce Breadcrumbs is a simple WordPress plugin that allows you to restyle the WooCommerce breadcrumbs. It also gives you the ability to disable them completely so they no longer display.
By changing the HTML surrounding your breadcrumbs, you’re able to provide better options for styling your breadcrumbs in different ways. For example, the default breadcrumbs simply display links with a separator character. Using WooCommerce Breadcrumbs, you can change them to display as an unsorted list of links instead.
NOTE: This plugin wont actually style your breadcrumbs for you. It simply gives you the tools to change the HTML that wraps around your breadcrumbs.
WooCommerce Breadcrumbs gives you the following settings
- Breadcrumb separator: This is the separator to use between each breadcrumb
- Wrap before: The opening HTML tag to wrap before all your breadcrumbs
- Wrap after: The closing HTML tag to wrap after all your breadcrumbs
- Before: The opening HTML tag to wrap before each individual breadcrumb
- After: The closing HTML tag to wrap after each individual breadcrumb
- Home text: The text to use for the ‘Home’ breadcrumb
- Home URL: The URL that the ‘Home’ breadcrumb links to
If need be, you can also disable the breadcrumbs completely by deselcting the ‘Enable breadcrumbs’ checkbox. This will stop the breadcrumbs from displaying on your site.
If you notice there are a few less breadcrumb options on the settings page than you expected, then you’re mostly likely using a WooThemes Theme. WooTheme themes disable the WooCommerce breadcrumbs in favour of the WooFramework Breadcrumbs. The downside to this is that there aren’t quite as many options that can be changed with the WooFramework Breadcrumbs.
- Upload the ‘woocommerce-breadcrumbs’ folder to your ‘/wp-content/plugins/’ directory
- Activate the plugin through the ‘Plugins’ menu in WordPress
- Go to the ‘Settings > WC Breadcrumbs’ menu to update the plugin settings
WooCommerce Breadcrumbs Default Settings
WooCommerce Breadcrumb settings for WooTheme Themes
The following links are a just a couple of examples of how you could style your breadcrumbs after applying some changes using the WooCommerce Breadcrumbs plugin.