WPLift is supported by its audience. When you purchase through links on our site, we may earn an affiliate commission.

How to Add Breadcrumbs to Your WordPress Site: A Complite Guide

Last Updated on August 22nd, 2023

Tags:

Simple and effective navigation is one of the most important things for a WordPress website. The primary purpose of the users on a website is to find what they are looking for as quickly as possible. Hence, your goal should be to satisfy the needs of your users. Thankfully, breadcrumbs help you achieve the same efficiently. 

Breadcrumb navigation indicates to users where they are on the website from the homepage. Besides this, the breadcrumb path is also shown in the search results. It helps all the users to understand the structure of the website.

In this blog, we will explain what are breadcrumbs , why you need breadcrumbs, and how to add breadcrumbs in WordPress using plugins.

Without waiting much, let’s get started.

What is Breadcrumb in WordPress?

Breadcrumbs are hierarchical navigation links displayed like a trail on the top of the WordPress page or a post. Users can view the hierarchy of the pages; they can either go to the previous page or look for similar kinds of content.

Why Do You Need Breadcrumbs on Your WordPress Site?

There are several crucial reasons you need breadcrumbs on your WordPress site. They are as follows: 

breadcrumbs deep navigation structures

Breadcrumbs Help Your Users Find Their Way Home

Breadcrumbs 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):

Article Continues Below

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 make it easier for Google to crawl your entire site.

Adding breadcrumbs to a WordPress site will: 

  • Boost its SEO rankings 
  • Help Google understand the website’s structure
  • Reduce the site’s bounce rate 
  • Improve the CTR (Click-Through rate)

Because breadcrumbs link to specific sections of your site, Google can easily follow links to cover your entire site. It’s kind of like a 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:

breadcrumbs navigation structures example search engine google

First – Check If Your Theme Supports Breadcrumbs

Before you run off to use the WP breadcrumbs plugins, could you please check 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 should check.

Article Continues Below

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

theme supports breadcrumbs

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 (okay, a 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 – we will 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:

add breadcrumbs with yoast seo advance setting pages

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:

Article Continues Below

add breadcrumbs with yoast seo enable

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 we informed you earlier 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, choosing Category is your best option:

Next, make sure to save your changes.

add breadcrumbs with yoast seo taxonomy to show in breadcrumbs in post types

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 dig into your theme’s template files, and add some PHP code. Even though this looks somewhat challenging, you can get used to it. You just require a tiny bit of code skills.

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, we 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:

add breadcrumbs using theme’s template files

And just like that, we have integrated breadcrumbs on my your site!

add breadcrumbs using theme’s template files output

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 instruction complicates things for you, than a more straightforward 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:

add breadcrumbs using header.php

And on the front end, there will be breadcrumbs again! Only now, they’re all the way to the left:

add breadcrumbs using header.php output

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>

add breadcrumbs using header.php modify

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

.breadcrumbholder {
margin-left: 15%;
}

add breadcrumbs using header.php with css

Now, that’s better!

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

Adding Breadcrumbs with All in One SEO WordPress Plugin

Don’t panic if you feel lost after learning what you need to do to create Yoast breadcrumbs. There’s an easier way to describe your website’s hierarchical navigation, but you’ll have to use a different breadcrumb plugin for WordPress. 

Although less popular than Yoast SEO, AIOSEO (All in One SEO) plugin still has over three million active users. This WordPress plugin is more user-friendly than the Yoast SEO plugin. 

Most importantly, it gives you complete control over its features. Consequently, you won’t have to spend much time setting up your site’s breadcrumb navigation. The only downside is that AIOSEO is more expensive than Yoast SEO. Still, you can purchase its Basic plan for $125 per year. 

Installing AIOSEO is straightforward, but configuring the plugin can be time-consuming. Also, you’re unlikely to experience compatibility issues since the plugin is compatible with all popular WordPress themes

The plugin will be automatically added to the WordPress dashboard after activation. Once you complete the plugin setup, go to the AIOSEO menu, and open the Breadcrumbs tab. 

Breadcrumbs will be inserted into the site’s code during installation, but they won’t be visible on its frontend. 

Toggling the Enable Breadcrumbs switch On will ensure they’re displayed on every page. As soon as you toggle in, you get four options to show breadcrumbs on the website. It comprises shortcode, Gutenberg block, widget, and PHP. Let’s look at them in detail.

Using Shortcode to Create Breadcrumb Navigation

As soon as you activate the breadcrumbs feature, the plugin will offer you four display options. Clicking on the Shortcode icon will give you access to the following piece of code: 

[aioseo_breadcrumbs]

Copy this shortcode, and paste it to the section of the post where you want the breadcrumb to be displayed. The shortcode will convert to a shortcode block if you’re using the WordPress Block Editor, so you just have to save the changes, and see how the navigation looks on a page. 

Adding Breadcrumb Navigation with a Gutenberg Block 

Open a post in the WordPress editor, and type AIOSEO into the Search Bar. The AISO-Breadcrumbs block should appear in the results. Drag and drop the block to a desired section of the page. 

You’ll see the live preview of the block as soon as you add it to a page, and you can save the changes if you like the result. 

AIOSEO’s Breadcrumb Widgets

The previous two display options enable you to add breadcrumb navigation to individual pages. The plugin’s breadcrumb widget lets you create breadcrumbs for an entire WP website in just a few clicks. 

Here’s what you need to do: 

  • Go to the WP’s Appearance menu, and open the Widgets submenu
  • Find the AIOSEO-Breadcrumbs widget, and add it to the header, footer, sidebar, or other widget sections 
  • Add a widget label, and click the Update button
  • Preview the changes you’ve made

AIOSEO also allows you to create breadcrumb navigation by inserting code snippets into theme files, but we don’t recommend going down this path unless you’re fluent in PHP.

How to Add Breadcrumbs in WordPress Site Using Different Plugins?

Apart from Yoast SEO and AISEO plugins, you can also integrate breadcrumbs into your WordPress site, leveraging different plugins.

1. Breadcrumb NavXT By John Havlik

You can utilize this WordPress breadcrumbs plugin with any other SEO plugin. Here, you just require a theme that is compatible with this plugin, and you are good to go. Compatibility of the theme would be paramount If you don’t have a compatible theme, you need to make changes to the theme.

To use the Breadcrumb NavXT theme for adding breadcrumbs, follow the simple steps given below:

  • First & foremost, you just need to install and activate the plugin. Go to the WordPress directory, search under plugins, and click Add New.
  • When the plugin gets activated, go to Settings-> Breadcrumb NaxVT, and configure the settings. 
  • The default settings will work for the majority of the websites. But, you even get an option to modify the settings according to the requirement.
  • To modify the settings, go to the General tab; you get an option to change the look of breadcrumbs. Other than this, you can even set the breadcrumbs for posts, pages, and custom post types.  
  • You also get an option to display your post hierarchy. The hierarchy is generally set to Site Title-> Category -> Post Title. You can change the category to post parent, dates, tag, and format.
  • Lastly, click on the Save Changes.

2. Breadcrumb By PickPlugins

    It is yet another breadcrumb plugin for WordPress that you can rely on to integrate breadcrumbs into your site with the help of shortcodes. Here is, how to take advantage of this plugin.

    • Go to the WordPress directory. Search for this plugin under Plugins, and then click on Add New. Instantly, you will get an option to add Breadcrumb in the left sidebar.
    • Choose Breadcrumb from the left of the sidebar.
    • Go to the Breadcrumb Settings, and then you can modify the breadcrumbs according to your requirements.
    • After making the desired modifications, click on the save changes.
    • Lastly, visit the WordPress page or the post in which you need to integrate Breadcrumb, and then include the shortcode using the editor. 

    [breadcrumb]

    3. Flexy Breadcrumb By PressTigers

    It is yet another well-known WP breadcrumbs plugin that you can utilize to leverage the navigation on the site. Similar to other WordPress breadcrumbs plugins, it lets you add breadcrumbs to your site using shortcode.

    1. Firstly, install and activate the WordPress plugin on your website.
    2. After this, you will view the Flexy Breadcrumb link in the left sidebar.
    3. Go to the General tab. Here, you can change the text, icon, Breadcrumb separator, post types hierarchy, and more.
    4. Besides this, you can modify the styling elements, such as font color and size of the breadcrumb trail, in the typography tab.
    5. Later, you need to include the [flexy_breadcrumb] shortcode on the page or post where you want to display breadcrumb on the website.
    6. In the end, save all the changes to ensure that they get reflected on the website.

    Wrapping Up

    Adding breadcrumbs to the WordPress website will take a small effort but yield significant returns. It helps you to enhance your site’s navigation, along with the SEO. 

    By following the instructions that we depicted in the blog, you can integrate breadcrumbs to enhance the user-friendliness of your site, and ensure it becomes highly accessible to visitors, as well as, search engines. 

    So, for whom are you waiting? Add breadcrumbs to your site to improve your browsing experience, boost SEO, decrease bounce rates, and enhance engagement. So, leverage breadcrumbs to the fullest to improve the UX of your site, and get better engagement and conversions.

    Frequently Asked Questions about Adding Breadcrumbs to WordPress Websites?

    Are Breadcrumbs Good For SEO?

    The short answer is yes. Breadcrumbs are vital for the website’s performance on search engines for several reasons. 

    First and foremost, they make it easier for search engines to understand the website’s structure and help them to categorize its content. Google displays breadcrumbs in search results and relies on them to contextualize a page’s content, which in turn pushes it higher in SERP. 

    In addition, breadcrumbs improve the site’s UX, which results in lower bounce rates and improves the time-on-site metric by allowing visitors to find a page they’re looking for quickly. 

    How are Breadcrumbs Used for Website Navigation?

    A website breadcrumb is often described as a secondary navigation scheme that enables visitors to know exactly where they are within the site’s hierarchy. 

    Besides location, breadcrumbs can provide information about the page’s attributes or show visitors a path they followed to reach a certain page. 

    Consequently, visitors can return to a page higher in the website’s hierarchy, or find a product manufactured by a particular brand. However, breadcrumb trails only complement the site’s primary navigation, and cannot replace it. 

    Hence, you should only add breadcrumb navigation to a site if it fits its structure. 

    A team of WordPress experts that love to test out new WordPress related software, WordPress plugins and WordPress themes.