WordPress Tutorial

How to Add Breadcrumbs in WordPress: A Step-By-Step Guide

Adding breadcrumbs to a WordPress improves user experience. They’re an efficient way of providing useful website navigation options and are beneficial for SEO.

If you are new to breadcrumbs, let’s begin by explaining what they really are.

What Are Breadcrumbs in WordPress?

Breadcrumbs are a navigation that makes your website more accessible. The navigation bars most users encounter are based on using breadcrumbs.

They’re good for more than navigation. Breadcrumbs mark page progression through which users arrive at their current page. This makes them very handy for backtracking or looking at previously visited pages.

WordPress Breadcrumbs Example 000webhost blog

Google also displays breadcrumbs below meta title in the search results. Some say breadcrumbs have a positive impact on rankings.

WordPress Breadcrumbs Example in Google SearchNaturally, both SEO and user experience benefits from a website with breadcrumbs enabled.

Let’s look at how you can add breadcrumbs to your WordPress website.

How to Display WordPress Breadcrumb in Your Website?

In this tutorial we will overview two methods you can use to include breadcrumbs to your WordPress website. One is through the Breadcrumb NavXT Plugin, and the other is through the Yoast SEO Plugin. Let us look at each of these methods.

Using the Breadcrumb NavXT Plugin

NavXT plugin can be installed easily by accessing it through the WordPress repository. Search for Breadcrumb NavXT, and you will find the right plugin. Download, install and activate it.

Activate the Breadcrumb NavXT Plugin, through a widget. To do this, go to the Appearances tab and open Widgets. Simply drag NavXT widget to the webpage area where you want it to be displayed.

If you want a more technical solution or want to add breadcrumbs directly to your theme, you will need to add the following code snippet to header.php file:

Important: We strongly recommend to make a backup of your WordPress site and and create child theme before editing any theme files.

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

Once complete, you can use the plugin to display breadcrumbs where you want them. For more configurations, access the plugin’s settings page.

NavXT Plugin Settings Page

From here, you will be able to change elements in breadcrumbs like taxonomies to make your website’s breadcrumbs look unique. You can also stylize the breadcrumbs by addressing them as a special class in your CSS3 sheet.

Using Yoast SEO to Add Breadcrumbs in WordPress Site

Adding the Yoast SEO Plugin is almost the same as adding the previous one. Download and install Yoast SEO plugin.

After installing, add a snippet of code to your WordPress child theme. The code snippet below can be added to any template you’re using. However, the recommended places to do are single.php, page.php, or header.php.

These three places ensure that the breadcrumbs are included in every post, page and all over the website. Here is the code snippet:

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

Once you have added the code, you activate breadcrumbs settings in Yoast SEO -> Search Appearance -> Breadcrumbs 

Enable Breadcrumbs in SEO Yoast

Conclusion

Breadcrumbs can be a useful addition to your website for both SEO and user experience improvement. It helps maintain a strong structure for backtracking and offers users better accessibility options.

Breadcrumbs NavXT and Yoast SEO – are the best options for adding breadcrumbs to a WordPress website.

While adding the widget directly is simpler, it might not provide access to all the customization options available. Using code entries to do this will enable you to get the best out of breadcrumbs. Moreover, with this, your website will stand out among the competition.

Overall, breadcrumbs are a great addition to any WordPress website and will add a small but significant feature to your website. Try it now!

About the author

Edward S.

Edward is Hostinger's copywriter. He's an expert communicator with years of experience in IT as a writer, marketer, and Linux enthusiast. IT is a core pillar of his life, personal and professional. Edward's goal is to encourage millions to achieve an impactful online presence. He also really loves dogs, guitars, and everything related to space.

Add Comment

Click here to post a comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Get Exclusive Content

Join thousands of webmasters who get our free newsletter with tips on how to drive more traffic and revenue to their websites!

Please wait...

Thank you for sign up!

More in WordPress Tutorial
How to Setup a WordPress Intranet

Close