Breadcrumbs in your Website enable your site users to easily navigate throughout the website with little clicks. This contributes to a better user experience.

Within Search Engine Result Pages (SERPs), Breadcrumbs do also also come in handy as they help Google bots understand the structure of your Website and how to classify it.

Within this article, we will look into how to add and display Breadcrumbs on your WordPress website.

Table Of Contents

What are Breadcrumbs

Adding Breadcrumbs To Your WordPress Website

Conclusion

What Are Breadcrumbs

Breadcrumbs are hierarchical navigation links that are rendered within your site pages/posts, and they enable users understand where they are within the website, based on what they are currently viewing.

Below is a sample screenshot illustration:

In the above example, we ca see that user viewing a post has the above breadcrumb in view: Home > Blog . This Breadcrumbs provides links back to the home and blog pages, that can help a site visitor to navigate back to either the blog page or home page.

Google does also use Breadcrumbs within SERPs as seen in the sample illustration below.

Adding BreadCrumbs To Your WordPress Website

If your WordPress theme does not have integrated Breadcrumbs support, you can add Breadcrumbs using plugins or custom codes. Within this guide, we will look into how to add Breadcrumbs using either of the two plugins discussed below.

Adding Breadcrumbs using Yoast SEO Plugin

Yoast is a free SEO plugin that can help you easily integrate Breadcrumbs into your site. If you haven’t installed the plugin yet, navigate to the Plugins > Add New section within your WordPress dashboard and search for “Yoast SEO”.

Once you trace the plugin, install and activate it, similar to any other WordPress plugin.

Next, navigate to the SEO > Search Appearance > Breadcrumbs section

Within this section, configure the Breadcrumb settings to your preference and save your changes.

Next, add the code below within templates where you would wish to render the Breadcrumbs such as the single.php, header.php or page.php:

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

Below is sample illustration:

Once this is done, you should have a view of the Breadcrumbs depending on where you added them. Below is a sample illustration:

BreadCrumb NavXT plugin generates Breadcrumbs for your WordPress website when setup. The plugin can be used as a substitute to the Yoast SEO plugin.

To install it, navigate to the Plugins > Add New section and search for “Breadcrumb NavXT”

Proceed to installing and activating the plugin.

Once done with the activation, navigate to the Settings > Breadcrumb NavXT. Within the General Settings section, you can specify how you wish to have the Breadcrumbs rendered. Within the “Post Types” section, you can modify the structure of the Breadcrumbs.

Upon carry out all the desired changes, save the changes and navigate to the Appearance > Widgets section within your WordPress dashboard and add the “Breadcrumb NavXT” widget to the available location within your theme, where you wish to have the Breadcrumbs rendered.

You can then specify the fields to your preference and save your changes.

With this done, you can preview your site and the Breadcrumbs should now be displayed. Below is a sample:

Alternatively, you can also add the following code within the template where you wish to have the Breadcrumb rendered:

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

Conclusion

Breadcrumbs really help in assisting users navigate through your site. Within this guide, we have discussed how you can add add Breadcrumbs using plugins if your theme does not already have a defined Breadcrumb structure. Using either of the above plugins is the easiest way to incorporate Breadcrumbs.

No Comments
Comments to: How To Add Breadcrumbs In Your WordPress Site

    Your email address will not be published.

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

    Privacy Preference Center

    Functionality

    We use third-party analytics services to help understand your usage of our services. In particular, we provide a limited amount of your information (such as sign-up date and some personal information like your email address) to 3rd party service and utilize it to collect data for analytics purposes when you visit our website or use our product.

    __cfduid,intercom-id-*, intercom-lou-*, intercom-lou-*, intercom-session-*, intercom-session-*, intercom-visitor-session-*

    Performance

    These cookies allow us to count visits and traffic sources so we can measure and improve the performance of our site. They help us to know which pages are the most and least popular and see how visitors move around the site.

    All information these cookies collect is aggregated and therefore anonymous. If you do not allow these cookies we will not know when you have visited our site, and will not be able to monitor its performance.

    _ga, _gat_gtag_UA_106868094_1, _gid
    IDE
    AID
    NID,1P_JAR

    Advertising

    Necessary

    These cookies are necessary for the website to function and cannot be turned off. They are usually only set in response to actions made by you which amount to a request for services, such as setting your privacy preferences, logging in or filling in forms.

    You can set your browser to block or alert you about these cookies, but some parts of the site will not then work. These cookies do not store any personally identifiable information.

    PHPSESSID, wordpress_logged_in_*, wordpress_sec_*, wp-settings-time-1, gdpr[privacy_bar], gdpr[allowed_cookies], gdpr[consent_types]