How to add breadcrumbs to WordPress

When we browse a website, sometimes we feel like Hansel and Gretel in the woods: completely lost.

We arrive on a page from a search engine or a social network and it’s impossible to understand where we are in the site.

Fortunately, just like the breadcrumbs in the story, there is a way for the Internet user to find his way back: the breadcrumb trail.

In this post, we will explain in detail how to add breadcrumbs on WordPress, using different methods.

Your best WordPress projects need the best host!

WPMarmite recommends Bluehost: great performance, great support. All you need for a great start.

Try Bluehost

What are breadcrumbs on WordPress?

Breadcrumbs are a visual representation of the tree structure of a website.

In most cases, it takes the form of a list of links shown horizontally. It’s usually found near the title of the page and/or the menu (its exact location varies from one site to another).

Each breadcrumb trail displays links to the “parent” pages of the page visited by the Internet user, thus retracing the path that the Internet user can follow to return to the homepage:

Some examples:

As these examples show, a breadcrumb trail can be more or less long and complex.

Its size depends on what is called the depth level. This term refers to the number of “steps” before returning to the homepage.

Note that not all sites need a breadcrumb trail. If there is only one depth level, it’s unnecessary because the path to the homepage is direct.

What is the purpose of a breadcrumb trail?

On a website, the breadcrumb trail serves several purposes:

• To give the user a point of reference in the tree structure of the site
• To provide an option for quick navigation
• Improve the presentation of your site in search engines
• Strengthen the internal linkage, which is useful for Search Engine Optimization (SEO)

Its primary utility is to allow the user to find his or her way around your website.

As each link is clickable, it also allows him or her to quickly go up the tree structure, until the homepage.

However, breadcrumb trails are not only used by Internet users. They are also used by search engines for the same reasons: to understand how the site is structured and to be able to go from page to page until the homepage.

But that’s not all. Some search engines (like Google, Qwant, or DuckDuckGo) use it to customize the display of results:

Thus, right from the search engine, the Internet user gets a representation of the location of the page on the site.

Why doesn’t WordPress offer breadcrumbs by default?

With WordPress, creating a breadcrumb trail requires a few steps, which we will describe below.

As this is a navigation element present on many websites, it’s reasonable to ask why this option is absent by default.

This question has been the subject of several discussions between contributors to the project.

From these discussions, it appears that breadcrumb creation is considered to be a feature expected from a plugin or theme, not from the WordPress core.

Furthermore, as we saw earlier, not all sites need it. It’s therefore easier for the user to install a plugin adapted to his needs.

Creating and adding breadcrumbs

There are two options to add breadcrumbs to WordPress:

1. You know how to develop: you can code directly in the theme.
2. If not, you will need a plugin or theme that has this feature.

We will cover the second option in this article.

Where do you add breadcrumbs on WordPress?

Before going into the details of the creation, it’s important to understand where to place this navigation element.

Indeed, the plugins will not automatically add it in your theme. They will provide you with a piece of code to paste where you want it to appear.

As we have seen with the examples presented above, it’s usually located near the menu or the title of the post.

In most cases, you will have to modify one of these three files:

• header.php (in 99% of cases)
• single.php
• page.php

If you have not already done so, we suggest you create a child theme before making these changes. This will avoid it being overwritten when you update your theme.

Finally, with the development of the site editor, if your theme is compatible, you won’t have to modify the files. You’ll just have to use the block offered by the plugin, if it exists.

If not, you can always paste the shortcode.

Without a plugin

It may disappoint you, but there is no magic solution.

It really depends on the theme you have chosen. If in doubt, the easiest way is to look in the documentation or to contact the development team, if you can.

However, here is the procedure to follow for the main WordPress themes:

• Astra: go to Appearance > Customize > Breadcrumb. You can then customize the display.
• Blocksy: go to Appearance > Customize > General > Breadcrumb to adjust the display options to your needs.

For both Astra and Blocksy, the location is defined by the theme. If the default doesn’t suit you, these two themes offer a short code allowing you to display your breadcrumb trail wherever you want:

• [astra_breadcrumb] for Astra.
• [blocksy_breadcrumbs] for Blocksy.

With a plugin

We have selected six plugins for you that offer the creation of a breadcrumb trail. We will detail the options for adding each of them to the theme.

Create a breadcrumb trail with Yoast SEO

This is the SEO reference plugin. It offers a large number of options, including the creation of a breadcrumb trail.

To take full advantage of all the options offered by the plugin, find out how to configure Yoast SEO.

Once the plugin is installed and activated, click on “Settings,” then on Advanced > Breadcrumbs.

The screen offers you different customization options to suit your needs.

If in doubt, don’t hesitate to test it out!

Once the breadcrumbs are configured, you just have to add it to your theme.

Warning: If you have checked “Disabled” in the option “Enable breadcrumb trail for your theme,” it will not appear on your theme. Which makes sense! 😊

To add it to your theme, you have several options:

1. Using the “Yoast Breadcrumbs” block and the site editor

This is the easiest option, but it requires your theme to be compatible with the site editor (formerly Full Site Editing or FSE). If your theme is recent or has been updated recently, it probably is.

To find out, hover over the “Appearance” menu. If an “Editor” link appears, your theme is compatible.

Then you can choose the different page templates on which you want the breadcrumb trail to appear.

In most cases, these will be the following templates:

• Single
• Archive
• Page

Depending on the theme and type of site, you may need to add breadcrumbs to other templates. This list is not exhaustive.

The video below shows how to add the “Yoast Breadcrumbs” block above the title:

2. By manually inserting the block in each of your publications

This method is similar to the previous one and is useful for people who either do not want to or cannot use the site editor.

Here, the block is added manually to each of your publications (pages, posts, products…).

This technique allows you to add breadcrumbs easily, but requires you to edit each of your publications one by one. This can be tedious if you have already published a lot of content.

Moreover, you are limited in terms of positioning options.

3. In the right file

You just have to paste the following code where you want the breadcrumb trail to appear:

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

Displaying breadcrumbs with SEOPress

SEOPress is a French-made plugin dedicated to SEO.

Once the plugin is installed and activated, click on the “PRO” tab, then “Breadcrumbs.”

You then have access to different customization options, adapted to your needs.

Once the breadcrumb trail is configured, you can add it to your theme.

You have three methods:

1. Using the “Breadcrumbs” block and the site editor

The procedure is similar to the one described above:

1. In the WordPress “Appearance” menu, click on “Editor.”
2. Add the “Breadcrumbs” block in the desired location in the various page templates concerned.

2. By manually inserting the block in each of your publications

Here, the block is added manually to each of your publications (pages, posts, products…):

3. By modifying the appropriate file

SEOPress offers you a piece of code to paste in the appropriate PHP file(s):

<?php
if(function_exists("seopress_display_breadcrumbs")) {
    seopress_display_breadcrumbs();
} 
?>

Create a breadcrumb trail with Rank Math SEO

Rank Math is the “Swiss army knife of your WordPress SEO” that is encroaching on the territory of Yoast SEO.

The plugin offers a lot of features to improve your SEO, including breadcrumbs (otherwise, we wouldn’t tell you about it here 😄).

To create a breadcrumb trail with Rank Math, you need to follow these steps:

1. Install and activate the plugin.
2. In the WordPress admin interface, click on “Dashboard” (the link right below Rank Math).
3. At the top right of your screen, click on “Advanced Mode.”
4. Then click on “General Settings.”
5. Finally, click on “Breadcrumbs” and then “Enable Breadcrumbs.”

Unlike its competitors, at the time of writing this article, Rank Math does not offer a dedicated WordPress block.

In the absence of a dedicated block, you will have to use a shortcode.

With this method, you will be able to add breadcrumbs to your site with the site editor or manually, publication by publication, as we have seen with Yoast SEO or SEOPress.

1. Using the shortcode

To add the Rank Math breadcrumbs with a shortcode, you first need to add the native WordPress block “Shortcode,” then paste the following code: [rank_math_breadcrumb].

2. Directly in the PHP files

Here, the procedure is the same as the one described for Yoast SEO and SEOPress.

Here is the code to paste in the appropriate files:

/**
 * Use the following code in your theme template files to display breadcrumbs:
 */
<?php if (function_exists('rank_math_the_breadcrumbs')) rank_math_the_breadcrumbs(); ?>

Create a breadcrumb trail with Breadcrumb NavXT

The three plugins presented so far were dedicated to SEO optimization of your site. The creation of a breadcrumb was just one of the features.

If you only need this one navigation element and already use other means to optimize your SEO, we recommend Breadcrumb NavXT.

Created in 2017, the plugin has been downloaded several million times and is popular with many webmasters for its flexibility and ease of use.

It can even be enhanced with addons.

After installing and activating the plugin, go to “Settings” and then to the “Breadcrumb NavXT” menu.

Once configured, you can add the “Breadcrumb Trail” block in the content editor or manually in each publication.

For advanced users, the code to add in the files is as follows:

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

How to add breadcrumbs with Elementor

By default, Elementor does not allow the creation of breadcrumb trails.

The creation and configuration will therefore have to be done with one of the plugins mentioned above.

Elementor will be useful to alter the display of breadcrumbs on your theme and customize its appearance, without having to manipulate your theme files.

Only Breadcrumb NavXT offers a free integration with Elementor.

You just have to search for the right block in Elementor’s element library and add it to your page:

It works similarly with SEOPress and Rank Math, but you need the paid version of these plugins to benefit from the Elementor widget.

For Yoast SEO, you will need to have the paid version of Elementor to use the “Breadcrumbs” widget.

You can use these shortcodes with the Elementor “Shortcode” widget.

How to add breadcrumbs with Divi

Like Elementor, its main competitor Divi does not natively offer an option to create and add breadcrumbs on WordPress.

To do so, you can either use the free “Breadcrumbs Divi Module” plugin, or use one of the following plugins and its shortcode:

• Yoast SEO: [wpseo_breadcrumb]
• SEOPress: [seopress_breadcrumbs]
• Rank Math: [rank_math_breadcrumb]

Join the WPMarmite subscribers

Get the last WPMarmite posts (and also exclusive resources).

SUBSCRIBE NOW

Add breadcrumbs on a WooCommerce store

Breadcrumbs are offered by default by WooCommerce. You don’t have to do anything to add it.

Customize the style

Though the plugins described in this article allow you to customize the content displayed, they do not allow you to change how it is displayed.

This depends, in fact, on your theme, which generally offers a default layout.

To adapt the graphic rendering to your needs, you will have to use CSS code.

In most cases, the HTML code generated to display the breadcrumb trail contains an attribute class="breadcrumb", which you can then target in CSS.

The exact name of the class may vary (for example, for WooCommerce it’s called woocommerce-breadcrumb), but it always contains the word breadcrumb in it.

Since the details of the CSS code are specific to your needs and your site, however, we can’t go any further here in our explanations on this subject.

Adding breadcrumbs to the WordPress admin interface

So far, we’ve explained how to display a breadcrumb trail on the public part of your site, to help the web user.

But in some cases, it can also be very useful in the WordPress administration interface.

Unfortunately, at the time of writing this article, there is no simple solution to achieve this.

WordPress is not expected to have this feature by default, so you would have to rely on a plugin.

Despite our research, we didn’t find a plugin that provides this.

If this is an important feature for you, it seems that the only solution is to use the services of a developer.

Conclusion

The breadcrumb trail is a discreet but essential navigation element.

Here is a reminder of its main functions:

1. To allow users to find their way in the tree structure of the site
2. To offer a means of quick navigation
3. Optimize the presentation of your site in certain search engines
4. Strengthen the internal linkage, which is useful for SEO

To add breadcrumbs to your WordPress site, you have three options: code it yourself, choose a theme that offers one by default, or use a plugin.

Whichever option you choose, you now have all the breadcrumbs in hand to stop losing your users. 😉

What about you, do you offer a breadcrumb trail on your WordPress site? If yes, what method do you use to display it? Tell us all about it in comments.

Receive the next posts for free and access exclusive resources. More than 20,000 people have done it, why not you?

Register

About the author

WPMarmite Team

WPMarmite helps beginners get the best out of WordPress with in-depth tutorials and honest reviews. Meet the founder, Alex, and his team right here.