Get fresh WordPress Content delivered in your inbox with warpspeed!

learn wordpress wplift wordpress rocket

This post is all about how you can use breadcrumbs to improve your cooking. No, that’s not right. This post is all about how you can use breadcrumbs to improve your WordPress site’s navigation.

That sounds better.

In this post, I’ll tell you why breadcrumbs are awesome. Then, I’ll show you how you can add breadcrumbs to your own site. You will need a tiny bit of code knowledge to make that happen, but I’m going to try to simplify things as much as possible.

Breadcrumbs Aren’t Just for Hansel and Gretel

Breadcrumbs don’t just help out little German children with abusive parents - they also make it easier for both humans and search engines to navigate your website.

If you’re not sure what I’m talking about, I mean these little things:

You’ll see them all over the Internet, especially on eCommerce stores or other sites with deep navigation structures.

So why do so many sites use breadcrumbs?

Breadcrumbs Help Your Users Find Their Way Home

Breadcrumbs just plain make it easier for your users to navigate your website. In the words of Jakob Nielsen from Nielsen Norman Group, “User testing shows many benefits and no downsides to breadcrumbs for secondary navigation.”

Breadcrumbs do two things for your users:

  • Show users where they are on your site
  • Give users one-click access to higher site levels

If all you’re doing is writing blog posts, breadcrumbs might not be as beneficial to user experience because blog posts are only one-level deep. That is, the breadcrumb for a normal blog post looks something like this (though it doesn’t have to, as you’ll see later on):

Home > Blog Post Title

But if you’re using nested pages, running an eCommerce store, using custom post types, or anything else where the hierarchy is more complicated, breadcrumbs improve your site’s user experience.

Google Can Follow Breadcrumbs, Too

Beyond helping your human visitors, breadcrumbs also make it easier for Google to crawl your entire site.

Because breadcrumbs link to specific sections of your site, Google can easily follow links to cover your entire site. It’s kind of like backup for your sitemap.

Additionally, using breadcrumbs can help you get breadcrumbs in Google’s organic search results, which definitely looks cleaner than a raw URL:

First - Check If Your Theme Supports Breadcrumbs

Before you start running off to use the breadcrumbs plugins that I’m going to outline in the next sections, do yourself a favor and make sure that your theme doesn’t already support breadcrumbs.

Breadcrumbs are by no means a universal feature, but plenty of themes tuck away the setting somewhere inside their option panels.

There are two places you’ll want to check.

First, if your theme has a custom theme settings dashboard, you’ll definitely want to poke around there:

Other themes might offer the breadcrumbs setting in the WordPress Customizer, so you’ll want to check there too.

No luck? Ok, then you’ll need to turn to a plugin. Here are your options!

How to Add Breadcrumbs to WordPress With Yoast SEO

If you’re using Yoast SEO like 50% of the WordPress community (slight hyperbole), you already have access to a tool that can help you add breadcrumbs.

But to use it...you might need to get your hands dirty with a tiny bit of code. Don’t worry - I’ll show you exactly how it works.

To access the breadcrumbs settings in Yoast SEO, you need to first turn on the Advanced settings pages by going to SEO → Dashboard → Features:

Make sure to save your changes.

Then, you’ll get a bunch of new menu options in Yoast. Head to SEO → Advanced and Enable breadcrumbs:

Once you enable breadcrumbs, you’ll see a bunch of configuration options. The only thing that you really need to change is to select a Taxonomy to show in breadcrumbs in post types.

Remember how I told you that using breadcrumbs for regular posts wasn’t super helpful? This feature makes it more helpful by letting you show the category, tag, or post format as part of the breadcrumb.

For most uses, I think choosing Category is your best option:

Then, make sure to save your changes.

Time to Dig Into Your Theme’s Template Files

Ok - here’s where things start getting a little complicated. Now, you need to actually dig into your theme’s template files and add a short bit of PHP. I know - sounds hard. But I’m far from a developer and I managed to figure it out, so I believe that you can too! You will need at least a tiny bit of code skills, though.

Let’s start by showing breadcrumbs on our individual post pages. You’ll need this code snippet:

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

To do that, go to Appearance → Editor and select the file for Single Post (single.php). Unfortunately, I can’t give instructions for every single theme, but here are some things to look for.

For the default Twenty Seventeen theme, you’d put it right after the beginning of “The Loop”. But for other themes, you’ll want to put it above your post title:

And just like that, I have breadcrumbs on my site!

If you want breadcrumbs on your pages as well, you’ll need to repeat the process for Single Page (page.php).

A Potentially Simpler Solution That Works for Many Themes

If the above has you all confused, a simpler way to handle things for some themes is to just paste the Yoast SEO breadcrumb code snippet at the end of your header.php file.

You can access it the same way - Appearance → Editor → Header.php. Then, just paste the code snippet at the very end of the file and save your changes:

And on the front-end, I have breadcrumbs again! Only now, they’re all the way to the left:

To fix that problem, you could put the PHP snippet inside a div and then use CSS to move that div around.

For example, updating the code to this:

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

Allows you to use this bit of CSS to move the breadcrumbs over:

.breadcrumbholder {
margin-left: 15%;
}

That’s better!

What’s nice that is because the breadcrumb code is in your header, it will automatically show on everything - posts, pages, category archives, and more.

Wrapping Things Up

I tried to find a breadcrumb plugin that didn’t require you to dig into your theme’s template files. But unfortunately, all of the popular options that I found require you to manually add the code to your theme.

For that reason, I stuck with Yoast SEO’s implementation. If you’re not using Yoast, though, I recommend taking a look at Breadcrumb NavXT from John Havlik. The process for adding breadcrumbs with Breadcrumb NavXT is identical - you’ll just use a different code snippet that’s specific to the plugin.

Now over to you - do you think breadcrumbs are actually helpful? Or do they just get in your way?

Published:

Last updated on:

Colin Newcomer is a freelance writer and long-time Internet marketer. He specializes in digital marketing, WordPress and B2B writing. He lives a life of danger, riding a scooter through the chaos of Hanoi. You can also follow his travel blog.

Join 40,000 WordPress Astronauts
AND GET OUR LATEST CONTENT IN YOUR INBOX WITH WARPSPEED

We will never spam you.
close-link
siteground coupon
Get 60% Off the No. 1 WordPress Hosting!