Do you want to display breadcrumbs navigation links in your WordPress site? Breadcrumb navigation is a secondary navigation system that tells users where they are on a website relative to the homepage. In this article, we will show you how to display breadcrumb navigation links in WordPress.
You would think that adding such an integrated system of motivation 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 themes.
Yoast Plugin Usage
To add breadcrumbs to your WordPress Website using Yoast SEO, you will need to tackle three simple steps: Install and Activate the Yoast SEO Plugin. Adding the Breadcrumbs code snippet to your WordPress Theme. Enable/configure the Yoast Breadcrumbs in the plugin settings
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.
Breadcrumbs Code Snippet to your 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 code snippet to 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 functionality: This will display breadcrumbs directly under the header of all pages, a common placement for breadcrumbs.
Yoast Plugin Breadcrumbs
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 tab. Under the 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.
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).
Breadcrumb NavXT Usage
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 bread-crumbs 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. 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.
Setting Breadcrumbs using the plugin
The Breadcrumb NavXT plugin has some powerful options for configuring your bread-crumbs. 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.
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.
Breadcrumbs are an important part of a website both for usability and SEO. So if you are considering adding bread-crumbs 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 bread-crumbs on your own WordPress site.