Breadcrumbs: How to Enable Them on Your WordPress Site

“Breadcrumbs” are an important navigation element that improves the usability of a resource and affects SEO. In this article, I will show you how to add breadcrumbs to WordPress without any technical knowledge. And I’ll tell you how they can benefit your WordPress site.

What are breadcrumbs

Breadcrumbs (or navigation chain) are navigation aids on your website. They show your users where (at which level, in which menu) they are currently located. They also help your users navigate from one level to another quickly and easily.

Their name comes from the tale of Hansel and Gretel, who walked through the forest and threw crumbs of bread to find their way home.

They typically look something like this: Home > Blog > Category > Post Title. This simple trail allows users to understand their position within your site’s hierarchy, making it easier for them to backtrack or navigate to related content. I’m sure they’ll be more likely to explore your site if it’s easy for them to navigate.

Why are they needed on the site

A navigation chain is necessary for all types of sites that have logical nesting of sections: informational, online stores, corporate and service sites. I always recommend using this navigation tool on your websites. This way the user will always know in which part of the site he is.

Positive impact on site ranking in search engines

Breadcrumbs show search engines a clear site structure. While helping them better understand your content and potentially boosting your search engine rankings.

• Improves behavioral metrics such as time on site and depth of browsing by simplifying navigation.
• This is a natural way to linking pages, which is useful for SEO (Search Engine Optimization).
• They make the search engine snippet more appealing, provided micro markup is implemented. Users will see breadcrumbs on the Google search results page.
• Navigation chains transfer static weight across links, which is good for search engine promotion.

This was confirmed by Google’s John Mueller:

We use breadcrumbs for crawling (finding internal links) and for rich results (structured data).

John Mueller

All implementation methods WP breadcrumbs

By default, WordPress does not create breadcrumbs. To implement them, you can use one of three methods:

1. You can use a plugin from the WordPress repository.
2. You can add your code to your WordPress theme’s functions.php file.
3. Some WordPress themes already have built-in navigation chains. You can enable or disable them in the theme settings.

I’ll tell you about all the ways.

Adding with plugins

There are two kinds of plugins that add navigation chains to a website. These are SEO plugins that have a large set of different options. And breadcrumbs is one of them. For example – Yoast SEO, All in One SEO, Rank Math SEO. And simple plugins that are responsible only for navigation – Breadcrumb NavXT, Breadcrumb, Flexy Breadcrumb.

Here are the general instruction on how to use these plugins:

1. Choose a Breadcrumbs Plugin: There are several excellent plugins with similar functionality in the WordPress repository. Make sure it has a large number of installations, good reviews and is regularly updated. Install and activate the plugin of your choice.
2. Configure crumbs Settings: Once the plugin is activated, navigate to its settings. You can customize the appearance, style, and position of your breadcrumbs trail to match your website’s design.
3. Enable navigation links: Ensure that feature is enabled in the plugin settings. Paste the code correctly. This will make the navigation chains appear on your site’s pages and posts.
4. Test Your Navigation: Visit any page or post on your website to see the navigation links in action. They should appear at the top of the article.
5. Customize Breadcrumbs: Depending on the plugin you choose, you may have the option to further customize your trail of links appearance or functionality. Take some time to explore these options and fine-tune your navigation chains to your liking.

Now let’s look at each method of addition in more detail:

Display breadcrumbs using the Yoast SEO plugin

If you have a website, you are probably using some sort of SEO plugin. Yoast SEO is the most popular and has over five million installations. Among other options, Yoast SEO offers features for creating breadcrumbs on your website. Here are the detailed instructions for enabling them:

1. Install and activate the plugin on your WordPress site.
2. In your “Dashboard” click on “Yoast SEO” and press “Settings”.
3. Click on the “Advanced” section in the settings menu on the left-hand side.
4. The “Advanced” menu will expand. Click the “Breadcrumbs” menu item.
5. Scroll down to the bottom of the screen to see the switch. To enable Yoast SEO breadcrumbs, toggle the switch to on. To disable, toggle the switch to off.
6. Customize your navigation chains as you wish and click “Save changes”.

Now for the navigation chains to be displayed on the site, you need to copy the following code:

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

Then add code to your theme where you want the breadcrumbs to appear. Here are some of the most common places:

• In your single.php file.
• In page.php file (above the page H1 title).
• At the end of the header.php file.

Helpful advice. Use a child theme to edit, otherwise all changes will be lost when the theme is updated.

Breadcrumb support from Yoast SEO has been added to some WordPress themes by default. In this case, navigation is enabled in the theme settings and you don’t need to add code to the files.

Yoast can output breadcrumbs with a shortcode. If you are using the block editor, you will need to insert a shortcode block and add the following code to it:

[wpseo_breadcrumb]

The minus of this method is that you have to insert the short code manually every time on a new page.

And another simple way – you can do that with the breadcrumbs block. This widget is added by the Yoast SEO plugin during installation. All you need to do is add the block to the post or the page, and that’s it! Note that the breadcrumbs you add with the block are only visible on the individual page you added the block to.

Implementation via All in One SEO plugin (AIOSEO)

Another popular website optimization plugin is All in One SEO. To enable navigation links, do the following:

1. Install and activate the plugin in the admin panel.
2. Go to the All in One SEO tab and click “General Settings“.
3. Click the “Breadcrumbs” menu item.
4. Turn on the breadcrumbs, customize them the way you want and choose how they are displayed.
5. Don’t forget to save your changes.

AIOSEO provides four different ways you can display breadcrumbs on your site:

1 – Shortcode: insert the shortcode block and add the following code to it:

[aioseo_breadcrumbs]

2 – Gutenberg Block: to add crumbs to your site using the Gutenberg Block, edit your content in the Block Editor and add the AIOSEO – Breadcrumbs block.

3 – Widget: to add navigation chains to your site using the widget, go to Appearance > Widgets. On the left hand side you’ll see a list of available widgets. Click on the AIOSEO – Breadcrumbs widget, then drag and drop it into the widget area where you want to place it.

4 – PHP Code Method: to add breadcrumbs to your site using the PHP code, copy the code below and paste it into your theme PHP template.

<?php if( function_exists( 'aioseo_breadcrumbs' ) ) aioseo_breadcrumbs(); ?>

Typically, you will need to place this code at the end of your header.php file. Or you can add this code to your theme’s single.php or page.php file.

Add trail of links using the Rank Math SEO plugin

Let’s now create breadcrumbs using the Rank Math SEO plugin:

1. Follow the standard procedure for installing and activating the plugin.
2. Go to the Rank Math SEO tab and click “General Settings“.
3. Click the “Breadcrumbs” menu item.
4. Enable this function and customize it as you wish.
5. Click “Save changes”.

Displaying Breadcrumbs on the Front End of Your Site

To display links using a shortcode, use the following code:

[rank_math_breadcrumb]

PHP Code Method: to add breadcrumbs to your site using the PHP code, copy the code below and paste it into your theme WordPress.

<?php if (function_exists('rank_math_the_breadcrumbs')) rank_math_the_breadcrumbs(); ?>

Insert it into one of the following files: page.php, single.php or at the end of the header.php file. In WordPress themes that support breadcrumbs from Rank Math by default, you don’t need to insert the code.

Addition by Breadcrumb NavXT plugin

Breadcrumb NavXT is the most installed breadcrumb plugin with over 900,000 installations. And adding navigation with it is very easy:

1. Install and activate the plugin on your WordPress site.
2. Go to “Settings” and then to the “Breadcrumb NavXT” menu.
3. Customize your navigation chains as you wish.
4. Press the button “Save changes”.

If your theme doesn’t have support for this plugin by default, you will have to add the following PHP code to some theme files (typically header.php).

<div class="breadcrumbs" typeof="BreadcrumbList" vocab="https://schema.org/">
<?php
if( function_exists('bcn_display') ) {
  bcn_display();
}?>
</div>

If the theme supports a plugin, then it must be enabled in the theme settings. Then you don’t need to insert the code.

As an alternative, you could use the Breadcrumb Trail block in the Block Editor, but that’s not the most efficient solution. You will have to insert it every time you write a new post.

Enabling with the Flexy Breadcrumb plugin

Another simple WordPress plugin to solve our problem. To implement, do:

1. Install and activate the Flexy Breadcrumb plugin.
2. Open the Flexy Breadcrumb tab.
3. Customize the navigation settings to your liking.
4. Save changes.

Now display the breadcrumbs on the site. To do this, install a shortcode in the right place of the page:

[flexy_breadcrumb]

Or use PHP code:

 <?php echo do_shortcode( '[flexy_breadcrumb]'); ?> 

This goes somewhere near the bottom of your theme’s header.php template. However, you can add it anywhere you want in your theme, and it’ll work.

Use the simple Breadcrumb plugin

You can display breadcrumbs in WordPress using the Breadcrumb plugin: it is lightweight and loads quickly.

• Install and activate this plugin.
• Go to the Breadcrumb tab in the admin panel.
• Use the plugin settings to customize it.
• Save your changes.

To display in a post, you will need to insert a shortcode block and add the following code to it:

[breadcrumb]

To display on all pages of the site, copy the following code. Then paste it into header.php file of your WordPress theme.

<?php echo do_shortcode("[breadcrumb]"); ?>

Where to insert the breadcrumbs markup code in WordPress

The code must be pasted into your active WordPress theme files. This table contains my recommendations for inserting code:

File name	Where to insert	Where it will be displayed
single.php	Above the post H1 title	On all posts
page.php	Above the page H1 title	On all static pages
category.php	At the top of the file.	On all category pages
header.php	At the end of the file	Throughout the site

Breadcrumbs without plugin using code

Use the child theme for any file changes. A child theme acts as a safe and efficient way to make modifications without affecting the parent theme. Or use special plugins to insert and edit code.

I have two different versions of the code. Try any.

First variant

1. Copy the following code snippet and paste it into your child theme’s functions.php file:

<?php
//Navigation
function the_breadcrumb() {
if ( !is_home() ) {
echo '<div id="breadcrumb"> <ul class="crumbs" itemscope itemtype="http://schema.org/BreadcrumbList"><li class="first" itemprop="itemListElement" itemscope
itemtype="http://schema.org/ListItem"><a itemscope itemtype="http://schema.org/Thing"
itemprop="item" href="';
echo get_option('home');
echo '"><span itemprop="name">';
echo ''. bloginfo('name') . '';
echo '</span></a><meta itemprop="position" content="1" /></li><span class="delimiter">›</span>';
}
if ( is_category() || is_single() ) {
$cats = get_the_category();
$cat = $cats[0];
$output .= '<a itemscope itemtype="http://schema.org/Thing"
itemprop="item" href="'.get_category_link($cat->term_id).'"><span itemprop="name">
'.$cat->name.'</a></span>';
echo '<li itemprop="itemListElement" itemscope
itemtype="http://schema.org/ListItem">'.$output.'<meta itemprop="position" content="2" /></li>';
}
if(is_single())
{
echo '<span class="delimiter">›</span><li itemprop="itemListElement" itemscope
itemtype="http://schema.org/ListItem"><a itemscope itemtype="http://schema.org/Thing"
itemprop="item" href="'.get_permalink().'"><span itemprop="name">';the_title();echo '</span></a><meta itemprop="position" content="3" /></li>';
}
if(is_page())
{
echo '<span class="delimiter">›</span><li itemprop="itemListElement" itemscope
itemtype="http://schema.org/ListItem"><a itemscope itemtype="http://schema.org/Thing"
itemprop="item" href="'.get_permalink().'"><span itemprop="name">';the_title();echo '</span></a><meta itemprop="position" content="3" /></li>';
}
echo "</ul></div>";
}
?>

2. To display navigation on site pages, insert a function call at the end of the header.php file:

<?php the_breadcrumb(); ?>

3. To style the breadcrumb navigation, you can add the following CSS code to your child theme’s stylesheet:

#breadcrumb ul {padding:0;margin:0;}
#breadcrumb ul span.delimiter {margin: 0 5px 0 5px;}
#breadcrumb ul li {padding:0;margin:0;display: inline-block;}

Second variant

Here’s another option. Paste it into your functions.php file:

function get_breadcrumb() {

    echo '&#127962; <a href="'.home_url().'" rel="nofollow">Home</a>';

    if (is_category() || is_single()) {
        echo "&nbsp;&nbsp;&#187;&nbsp;&nbsp;";
        the_category(' &#187; ');
        if (is_single()) {
            echo " &nbsp;&nbsp;&#187;&nbsp;&nbsp; ";
            the_title();
        }
    } elseif (is_page()) {
        echo "&nbsp;&nbsp;&#187;&nbsp;&nbsp;";
        echo the_title();
    } elseif (is_search()) {
        echo "&nbsp;&nbsp;&#187;&nbsp;&nbsp;Search Results for... ";
        echo '"<em>';
        echo the_search_query();
        echo '</em>"';
    }
}

To display the breadcrumb navigation on your WordPress website, you need to call the get_breadcrumb function in your theme files:

<?php if (!is_home()): ?>
      <div class="breadcrumb">
        <?php get_breadcrumb(); ?>
      </div>
<?php endif; ?>

And you can try adding the following styles to your WordPress theme’s style.css file:

.breadcrumb{
    background: #FFF;
    margin-top: 2%;
    padding: 10px 20px;
}

Or use your own custom styles.

How to add navigation chain via theme customizer

WordPress comes with a theme customization feature that can be accessed through Appearance > Customize. The customization options available in the theme customizer differ depending on the theme you are using. Often WordPress theme developers add breadcrumb functionality to their themes by default. In this case, you just need to enable them in your active theme’s customizer.

WP themes with built-in breadcrumbs

Here are some of these popular WordPress themes:

• Hestia;
• Astra;
• Refined Magazine;
• OceanWP;
• Blocksy;
• Newspaper.

How to embed breadcrumbs into Elementor

Elementor website builder makes it easy to add navigation links to your WordPress website. You just need to drag and drop the Elementor Breadcrumbs widget and customize it. The widget works with the popular Yoast SEO plugin. So, to use this widget, install Yoast SEO.

The Elementor Breadcrumbs widget has many settings:

• Customizable breadcrumb styles.
• Customization of typography, colors and more.
• Ability to add customized custom icons for homepage and other pages.
• Choice of separator style for text or icons.

Main recommendations when introducing breadcrumbs

Whatever implementation method you choose, adhere to the following rules:

• Breadcrumbs are not a replacement for the main menu, but an auxiliary navigation tool.
• If using a navigation chain, spell out the path all the way to the end so the visitor knows where they are.
• Breadcrumbs are created primarily for the convenience of site visitors, so use them when they are truly useful. They are not needed on one-page sites.
• The last element of the breadcrumb should not be clickable. Remove circular links.
• Add them on every page of the site in the same place. Recommended at the top.
• Breadcrumbs are not needed on the homepage of the site.
• Make breadcrumb markup, this will allow you to display them informatively in Google search results.
• Avoid spam in breadcrumbs. Spam will occur if a word is repeated in the name of a category, subcategory and in the name of a product.
• Incorporate the navigation style into the overall design of the site.

Which is better, code or plugin

In this table, I compared all the ways to implement breadcrumbs on your WordPress site.

Method	Complexity	Description
Plugins	Simple	Clear and simple plugin settings, no programming knowledge required.
Code	Difficult	You need to understand coding, PHP and WordPress files.
Theme Customizer	Simple	Easily enabled in the theme settings.

The easiest way is to enable navigation chains in the theme settings. But this option is not always available. In all other cases, I recommend using a plugin. It will save you from mistakes and you will not spoil anything on your site. But if you are good at programming, you can use code.

Conclusion

Breadcrumbs in WordPress are a straightforward yet effective way to enhance your website’s user experience and SEO. By following this guide, you can easily implement this functionality on your website, choose the right plugin, and enjoy the benefits they bring.

Your users will now have an easier time navigating your content, and search engines will appreciate the improved structure of your site.

Additional questions