In this tutorial I’m going to explain all you need to know to get started using breadcrumbs in WordPress.
BreadCrumbs in WordPress
Follow along with us over on our Envato Tuts+ YouTube channel:
BreadCrumb Plugins on CodeCanyon
If you’re interested in what solutions are on offer from our community of coders, check out the premium WordPress breadcrumb plugins on CodeCanyon:
What Are Breadcrumbs?
Breadcrumbs, or breadcrumb trails, are a feature of many websites, and act as a form of navigational help. Here’s an example on the gov.uk website:
Themeforest uses a breadcrumb trail too:
Breadcrumbs are secondary navigation, in that they’re not used as the main way of navigating a website. Instead, they show the user’s current location and the route by which they arrived there.
Breadcrumbs allow the user to step back to any point in their journey from the root of the website.
Thanks, Hansel and Gretel
If you’re at all familiar with the tale of Hansel and Gretel you’ll know where the metaphor originates (thankfully breadcrumbs in modern websites are a lot more practical than the crumbs from the story..)
Where Should I Use Breadcrumb Navigation?
The examples above demonstrate perfect use of breadcrumbs: where the content hierarchy is potentially complex, with several depths of categories and subcategories.
There’s no real need to use breadcrumbs in a website or web application where there’s no logical hierarchy or expansive content.
Using Breadcrumbs in WordPress
Breadcrumbs in WordPress are exactly the same as in other websites; there’s no functional difference.
However, by default, WordPress does not have a breadcrumb system, so you’ll have to implement it yourself. We can do that using a plugin, so let’s see how that works.
1. Install a Breadcrumb Plugin for WordPress
In your WordPress admin go to Plugins > Add New and enter the keyword breadcrumbs in the search box. You’ll be shown a large number of options, but perhaps the most popular and the one we’ll use today is packaged into the Yoast SEO plugin.
Go ahead and install it, then active it.
2. Yoast SEO Breadcrumb Settings
Yoast SEO offers a whole load of SEO functionality, but we’re only interested in the breadcrumbs for now. In the WordPress admin go to SEO > Search Appearance then go to the Breadcrumbs tab and click Enabled.
You’ll notice several options:
- Specify the separator between breadcrumb links
- Specify the anchor text used for the Home page
- and so on
Make the changes you need, then hit Save. Now we need to insert the breadcrumbs into our theme.
3. Insert the Breadcrumbs into WordPress
You can find detailed directions on the Yoast website, but the steps are straightforward. In those directions you’ll see a PHP snippet, which you need to copy:
<?php
if ( function_exists('yoast_breadcrumb') ) {
yoast_breadcrumb( '<p id="breadcrumbs">','</p>' );
}
?>
Then go back to your WordPress admin and visit Appearance > Theme Editor. At this stage you need to decide where you want to insert the breadcrumbs. Putting them in the header will make them visible on all pages of your website, so that’s what we’ll go for.
Open the Theme Header (header.php) and then scroll all the way down to the bottom of the file where you can paste your code snippet.
Important: exactly what you see here will depend entirely on the theme you’re using, so results may differ. You may not even need the <?php> tags in the snippet, because your header may already be wrapped in them, so be sure to pay attention to code error warnings.
I’m using the Twenty Twenty theme, and what we’ve done now gives us this:
It needs some styling work, but we have functional breadcrumbs!
Note: I recommend you use a Child Theme with your WordPress installation, so that changes you make to the theme files won’t be overwritten when you update the them.
4. How to Use the Yoast SEO Breadcrumbs Shortcode
There’s another way to use the Yoast SEO Breadcrumbs which doesn’t involve coding of any kind, and that’s by using a shortcode. Let’s see how that works.
The shortcode is also available for you to copy on the Yoast website, but here it is anyway:
Home »
Then, in your WordPress admin, go to one of your pages or posts and paste the shortcode in! You’ll see the breadcrumbs on the front end, but of course they’re within the body of your post and page, which you may or may not find suitable.
5. How to Customize Yoast SEO Breadcrumbs
Using CSS we can tailor the way our breadcrumbs look; we just need to know what selectors to use. So on your front end, use the browser’s inspector, and you’ll see something like this:
By default our breadcrumbs are wrapped in a paragraph with an ID of breadcrumbs. So by going to the WordPress admin Appearance > Customize we’ll be able to open up the customizer and (more than likely, depending on the theme you’re using) the Additional CSS tab.
Add styles such as:
#breadcrumbs {
padding: 1rem;
}
and you’ll see the changes take effect right there in the preview window. You can also target the last link in the trail, using:
#breadcrumbs .breadcrumb_last {
color: red;
}
Again, use the inspector to uncover the structure and the CSS selectors you’ll need.
When you’re done, hit Publish, and your changes will be applied.
Go Forth and Lay Breadcrumbs!
And we’re done! I hope this gave you a good insight into what WordPress breadcrumbs are, how you can use them, and how you can implement them into your own website.
