How to Add Breadcrumbs in WordPress | Breadcrumbs are an essential navigation tool for improving user experience and SEO on your WordPress website. They provide users a clear path to the homepage, showing their position in the site hierarchy. Breadcrumbs enhance site navigation and can even improve your visibility in search engine results. This guide will explore step-by-step how to add breadcrumbs to your WordPress website.

How to Add Breadcrumbs in WordPress: Complete Guide

Why Are Breadcrumbs Important?

Before diving into the steps, let’s look at why breadcrumbs are essential for your website:

1. Improved User Experience: Breadcrumbs provide visitors with a clear and straightforward navigation path, making browsing your content easier.
2. SEO Benefits: Search engines like Google use breadcrumbs to understand your site structure, which can improve your search engine ranking.
3. Reduced Bounce Rates: Users can quickly navigate to other sections of your site, keeping them engaged longer.

Now that we understand their importance let’s move on to how to implement breadcrumbs in WordPress.

Methods to Add Breadcrumbs in WordPress

There are several ways to add breadcrumbs to a WordPress site. We’ll cover the most common methods, including plugins, themes, and custom code.

Method 1: Using a Plugin

The easiest and most popular way to add breadcrumbs is by using a WordPress plugin. Plugins save time and don’t require coding knowledge.

Popular Breadcrumb Plugins:

• Yoast SEO
• Rank Math SEO
• Breadcrumb NavXT

Here, I will show you how to add breadcrumbs using the Yoast SEO and Rank Math plugins only.

Using the Yoast SEO plugin:

1. Install and Activate Yoast SEO:

➤ Go to your WordPress dashboard.
➤ Navigate to Plugins > Add New.
➤ Search for “Yoast SEO” and click Install Now.
➤ Once installed, click Activate.

2. Enable Breadcrumbs:

➤ Go to SEO > Search Appearance.
➤ Navigate to the Breadcrumbs tab.
➤ Toggle the switch to enable breadcrumbs.
➤ Customize the settings, such as separator and home link text, to fit your preferences.

3. Add the Breadcrumbs Code to Your Theme:

➤ Go to Appearance > Theme File Editor.
➤ Open the header.php or single.php file (depending on where you want the breadcrumbs to appear).
➤ Add the following code where you want the breadcrumbs to display:

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

4. Save Changes:

➤ Click Update File to save your changes.

Using Rank Math SEO

Rank Math SEO is another powerful plugin that simplifies adding breadcrumbs to your WordPress site. Follow these steps:

Step 1: Install and Activate Rank Math SEO:

➤ Go to your WordPress dashboard.
➤ Navigate to Plugins > Add New.
➤ Search for “Rank Math SEO” and click Install Now.
➤ Once installed, click Activate.

Step 2: Enable Breadcrumbs in Rank Math Settings:

➤ Navigate to Rank Math > General Settings.
➤ Click on the Breadcrumbs tab.
➤ Toggle the Enable Breadcrumbs option.
➤ Customize settings such as separator, prefix, and link behavior.

Step 3: Add Breadcrumbs Code to Your Theme:

➤ Go to Appearance > Theme File Editor.
➤ Open the header.php, single.php, or page.php file (depending on where you want the breadcrumbs to appear).
➤ Add the following code where you want the breadcrumbs to display:

if ( function_exists( 'rank_math_get_breadcrumbs' ) ) {
    echo rank_math_get_breadcrumbs();
}

Step 4: Save Changes:

➤ Click Update File to save your changes.

Step 5: Test and Style Breadcrumbs:

➤ Visit your website to check the breadcrumbs display.
➤ Add custom CSS to style the breadcrumbs if needed.

Method 2: Using a Theme with Built-in Breadcrumbs

Some WordPress themes come with built-in breadcrumb functionality. Popular themes like Astra, GeneratePress, and OceanWP often have breadcrumb options.

Steps to Enable Theme Breadcrumbs:

Step 1: Check Theme Settings:

➤ Go to Appearance > Customize.
➤ Look for an option like “Breadcrumbs” under the Header or General Settings section.

Step 2: Enable Breadcrumbs:

➤ Toggle the option to enable breadcrumbs.
➤ Customize the position and style of the breadcrumbs as per your preferences.
Step 3: Publish Changes:
➤ Once satisfied with the settings, click Publish to save your changes.

Method 3: Adding Breadcrumbs Manually with Code

You can manually add breadcrumbs to your WordPress site if you’re comfortable coding. This method offers the most flexibility.

Steps to Add Breadcrumbs with Custom Code:

Step 1: Add a Function in Your Theme’s functions.php File:

➤ Go to Appearance > Theme File Editor.
➤ Open the functions.php file and add the following code:

function custom_breadcrumbs() {
    // Settings
    $separator = ' > ';
    $home = 'Home'; // Home text
    $before = '<span class="current">'; // Tag before the current crumb
    $after = '</span>'; // Tag after the current crumb

    // Start the breadcrumb
    if (!is_home() && !is_front_page() || is_paged()) {
        echo '<nav class="breadcrumbs">';

        // Home link
        echo '<a href="' . home_url() . '">' . $home . '</a>' . $separator;

        if (is_category() || is_single()) {
            the_category(', ');
            if (is_single()) {
                echo $separator . $before . get_the_title() . $after;
            }
        } elseif (is_page()) {
            echo $before . get_the_title() . $after;
        }

        echo '</nav>'; // Close breadcrumb
    }
}

Step 2: Call the Function in Your Theme Files:

➤ Open the appropriate theme file (e.g., header.php or single.php).
➤ Add the following code where you want the breadcrumbs to appear:

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

Step 3: Save Changes:

➤ Click Update File to save your changes.

Step 4: Style the Breadcrumbs with CSS:

➤ Add custom CSS to your theme to style the breadcrumbs:

.breadcrumbs {
    font-size: 14px;
    margin: 10px 0;
}
.breadcrumbs a {
    color: #007bff;
    text-decoration: none;
}
.breadcrumbs .current {
    font-weight: bold;
    color: #333;
}

Testing Your Breadcrumbs

After adding breadcrumbs, it’s crucial to test their functionality. Here’s how you can do that:

1. Navigate Your Site:

➤ Visit different pages and posts to ensure the breadcrumbs display correctly.

2. Check Responsiveness:

➤ Test the breadcrumbs on various devices to ensure they are mobile-friendly.

3. Use Google’s Rich Results Test:

➤ Go to Google’s Rich Results Test.
➤ Enter your website URL and check if Google detects the breadcrumbs schema.

Conclusion

Adding breadcrumbs to your WordPress website is straightforward, significantly improving user experience and SEO. Whether you use a plugin, theme settings, or custom code, each method offers flexibility depending on your needs and technical expertise.

Start implementing breadcrumbs today to make your site more user-friendly and enhance its search engine performance!

FAQ

Resources

1. https://help.elegantthemes.com/en/articles/8366776-how-to-add-breadcrumbs-to-your-divi-website-with-rankmath
2. https://rankmath.com/kb/breadcrumbs/