Start a Project

Adding Yoast breadcrumbs to your WordPress website

Karl – a web developer with Wibble web design Belfast
By Karl Proctor 29 May, 20205 MIN READ
Adding Yoast breadcrumbs to your WordPress website by Wibble

What Breadcrumbs are

Breadcrumbs are a common feature on many websites. They can help a user to better understand the structure and content, and they can also help with SEO, showing in Google search results. They’re commonly placed near the top of the page, but sometimes can be found near the bottom in the footer. This site for example, places them in the footer. If you scroll down to the bottom, you can see how we’ve placed ours.

They typically follow a structure like “Home > Blog > Blog Title”, with the last breadcrumb representing where a user currently is. By using this, you give a user an easy way to understand your site structure and how they can navigate it.

This becomes more apparent and useful when you have many subpages, so this can depend on your site and site structure. A complicated site structure can be much more simple to understand if you have breadcrumbs enabled.

Yoast also adds structured data for your breadcrumbs, so that Google can display these in search results. In an example below, you can see a blog post that has breadcrumbs above to show the structure of where that page is in the site.

Screenshot of the website SERPs by Wibble web design

If you’re using the Yoast SEO plugin, you can enable these on your website.

Enable Breadcrumbs

First, on your WordPress dashboard, click on SEO in the sidebar. That will show you a submenu in the sidebar under SEO.

Next, click on “Search Appearance”. This area controls many of the Yoast features, including Breadcrumbs.

There is tabs along the top of this page, and near the end you should see “Breadcrumbs”. To go to the breadcrumb settings, click on that tab. Now should see a toggle to enable Breadcrumbs. Click on Enabled to turn on this feature.

Screenshot of the website Yoast by Wibble web design

Once enabled, there will be settings displayed for the breadcrumbs. You can choose things like what text to display for your Home page, or the divider you want between links. We tend to use “/” for the divider as this seems to look the best, but you can decide what you like best. Most of the other settings can be left as-is. The last thing you’ll need to do here is save your changes.

Adding breadcrumbs with a shortcode

Those changes will simply enable the breadcrumbs, but next you will need to place them. To add them to a single page, you can use the shortcode

[wpseo_breadcrumb]

Edit the page or post you want to display the breadcrumbs on, and if using the new 5.0 editor, add a Shortcode block. Then add the shortcode and place accordingly. Here is an example below:

Home / Web Development / Adding Yoast breadcrumbs to your WordPress website

Adding breadcrumbs through code

The shortcode solution can be suitable for adding to several pages, but if you want this on every page, or just better control over the placement, you’ll need to add some code to your theme. To do this, you need to include the following code in your theme:

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

You can change the <p> tag to something else, or adds a different id or class attribute as needed. Placing that in your header.php file would be one way to apply that to every page. This will depend on your theme.

We use Yoast SEO breadcrumbs for most of the sites we develop. It’s a great way to display the page hierarchy, helping users find what they want more easily. This is especially important in larger sites, where you can have many categories and subcategories, or pages and sub-pages. It also helps with Google search results, to better display your site.

Developer extras

Breadcrumb Separator

Yoast provides some helpful filters to change how the breadcrumbs will display. For example, if you wanted to change how the seperator appears, you can do that with code. That will give you extra options, such as adding html and attributes to the separator. There is an example included below:

add_filter('wpseo_breadcrumb_separator', function($separator) {
    $separator = "<span class='mx-2'>" . $separator . "</span>";
    return $separator;
});

This code wraps the separator in a span, with the class ‘mx-2’, which is tailwind class for adding margin to the left and right. This allows to space out the separator more, instead of it being right next to each breadcrumb link.

Add Custom Breadcrumb

You may run into situations where you need a custom breadcrumb option. This can include adding in extra pages to breadcrumbs that Yoast may not pick up, if you have a unique site structure.

add_filter( 'wpseo_breadcrumb_links', function( $links ) {

    if ( is_post_type_archive('example') ) {

        $breadcrumb[] = array(
            'url' => site_url( '/extra-link/' ),
            'text' => 'Extra link',
        );

        array_splice( $links, 0, -2, $breadcrumb );
    }

    return $links;
} );

In this case, we add an extra breadcrumb to the breadcrumb list, but restrict this to a specific custom post type archive. The options here are endless, as you can use other conditionals such as is_page() or is_singular() .


Share this blog post

Karl – a web developer with Wibble web design Belfast

Karl Proctor

More from author