How to Add Breadcrumbs to Any WordPress Website

Do not be misled by the funny name – breadcrumbs can work miracles when it comes to your website’s navigation, especially if it’s loaded with content organized hierarchically. Even though these useful tools were often overlooked in the past, today more and more people are looking for ways to enable them at their sites. The main reason for that is that breadcrumbs not only enhance user experience but also help improve your SEO.

In fact, breadcrumbs can bring even more benefits when used wisely, so do not wait too long for making them a part of your WordPress story. Here you have it – a comprehensive guide on how to add breadcrumbs to any WordPress website. Keep reading and you’ll see that it is a simple and quick process.

Let’s get started!

What Are WordPress Breadcrumbs?

A type of secondary navigation scheme, breadcrumbs show users their current location at the website through the links that appear at the top of a page. As you have probably already guessed, the name comes from the Hansel and Gretel fairy tale, and just like in this enchanting story, breadcrumbs make it possible to find the way back to previously-viewed pages or their original landing point.

Wonder if your site can benefit from adding breadcrumbs? Well, it depends on its purpose, structure, and size. Experts from companies that create all sorts of websites and offer e-commerce, magazine, social media, or rehab web design services explain that as a rule, you will come across breadcrumbs at the sites with a large amount of content, which makes perfect sense. When it comes to single-level websites with no well-established hierarchy or grouping, the general advice is to stay away from this form of secondary navigation.

Well, this is self-explanatory. Long story short, to figure out whether your site needs (and will benefit from) breadcrumbs, simply create the site map or a diagram that clearly represents its architecture.

Types Of WordPress Breadcrumbs

You can take advantage of the three types of breadcrumb, the main difference between them is the way the navigational links are incorporated. Let’s take a closer look at each type.

Hierarchy-based – also called location-based, they are used for navigation schemes that can brag of at least three levels and show users where they are in the website’s structure. Attribute-based –  seen mainly on e-commerce platforms, attribute-based breadcrumbs display the attributes of the items on a particular page the user has searched for that led them to the product they’re currently viewing.

History-based: those breadcrumbs show users the steps they’ve taken to arrive at a particular page. Path-based is another name for these breadcrumbs that display the pages a particular user has visited before ending up on the current page.

Adding Breadcrumbs to Any WordPress Website

WordPress is created to be easily extensible, so adding breadcrumbs should be a piece of cake. The simplest and least time-consuming way to do it is to leverage numerous opportunities of the Yoast SEO plugin. Alternatively, you can check your theme, it might already have breadcrumbs built-in. The other WordPress plugins you can also use are Rank Math, Breadcrumb NavXT, Breadcrumb, Catch Breadcrumb, Flexy Breadcrumb, or SEOPress.

Here is how to add breadcrumbs with Yoast SEO just in ten steps.

Step #1

If you haven’t done it already, it’s time to install and activate the Yoast SEO plugin. You will find it under Plugins > Add New. Click and you will see a new SEO option added to your left sidebar.

Step #2

Next, you need to code. Do not be afraid, not really but you will have to add a certain code to your theme files in order to tell Yoast SEO where exactly you want your breadcrumbs to be displayed. Here you have it – just copy and post the code snippet below:

<?php

if ( function_exists(‘yoast_breadcrumb’) ) {

yoast_breadcrumb( ‘ id=“breadcrumbs”>’,” );

}

?>

Step #3

Do not forget to click Update File to save your changes.

Step #4

Select Appearance > Theme Editor in the left sidebar.

Step #5

Unleash your inner designer and play with different placements of breadcrumbs for the ultimate user experience. Depending on your goals, paste the code snippet you previously copied to the bottom of one or more of the following files:

  • header.php – breadcrumbs will be seen in your header throughout the entire site
  • page.php – breadcrumbs will appear on all the pages
  • single.php – breadcrumbs will show up on all the posts

Step #6

In the left sidebar, select SEO > Search Appearance.

Step #7

Click the Breadcrumbs tab.

Step #8

Look at the Breadcrumbs settings, find Enabled, and click.

Step #9

Now you have all the available breadcrumbs settings at full display. Just set them in accordance with your preferences.

Step #10

The last and most important step – click Save changes at the bottom of the page. Great job!

Adding Breadcrumbs To WordPress With Themes

As already mentioned, you can also take advantage of the WordPress themes enhanced with the breadcrumb navigation, and, in this case, you won’t have to add any extras. It’s safe to say that the majority of the latest themes offered by WordPress include this feature, here is a short description of some of them:

Page Builder Framework – this theme lets you fully customize your breadcrumbs

Knowledge Base – just as its name says, this theme serves to navigate visitors through breadcrumbs within your customer support knowledge base

Astra – you can use it to choose where you want to place breadcrumbs on a page

Shopkeeper –  if you run an online store, this is a theme for you

WooThemes – a portfolio of WooCommerce themes amplified with breadcrumb capabilities

It’s no secret, breadcrumbs offer a plethora of advantages, and one of them is that they significantly improve the way your site is recognized and displayed by search engines. Usability is important not only for visitor experience but also for ranking, hence do not wait too long for adding breadcrumbs to your WordPress site, all the more so, now you know how to do it.