Yoast SEO breadcrumbs: how to create a filter that uses the url slug for breadcrumb titles

by

I know we can manually edit the breadcrumb title for a page or post using Yoast SEO’s breadcrumb functionality.

But with thousands of posts and pages on an existing site this isn’t desirable.

My brain goes full potato when it comes to stuff other than html and css and maybe hacking some existing PHP code snippets to do my bidding with a lot of trial and error. So that’s why I’m reaching out to the community here.

Example:

A child page about blue widgets lives at:

https://www.example.com/widgets/blue

By default I believe the automatically generated breadcrumb path for this child page of a parent page would look something like:

Home > We make the most amazing widgets in the world > Our Blue widgets are everything you need!

The filter would instead:

  1. Use the url slug for each page [widgets] and [blue] as the breadcrumb title.
  2. Capitalize the first letter of only the first word.
  3. Turn any dashes (-) in the slug into spaces for the breadcrumb title.

And output a breadcrumb that looks like this:

Home > Widgets > Blue

The filter would target pages, posts and categories across the board so that all webpages on the site would have a breadcrumb with breadcrumb titles based on the url slugs of the different parts of the breadcrumb path.

If it is possible to still manually override the filter by entering a custom breadcrumb title in the existing Yoast SEO custom breadcrumb title field, that would be awesome.

I have tried to find existing code snippets that come close to this functionality but haven’t been succesful so far.

Any help or links you are willing to provide will be appreciated very much. Thank you in advance for taking the time to reply.

2 Answers
2

Yoast does have a filter for you to use. See here:
https://gist.github.com/jmcclellan/b2d97ffee0e924e28fa1

I used this to add “parent” pages to custom post types. We wanted to use pages as our category landers w/ custom post types as children. Yoast would not output the parent page slug by default since there is technically no real relationship, so we used this function to override and splice in the parent slug for each custom post type. You should be able to modify this solution for your needs:

add_filter("wpseo_breadcrumb_links", "wpse_100012_override_yoast_breadcrumb_trail");

function wpse_100012_override_yoast_breadcrumb_trail($links)
{
    $post_type = get_post_type();

    if ($post_type === 'claims') {
        $breadcrumb[] = array(
            'url' => '/claim',
            'text' => 'claim'
        );
        array_splice($links, 1, -3, $breadcrumb);
    }
    return $links;
}

For the lowercase styling, just use CSS:

#breadcrumbs {
    text-transform: lowercase;
}

Leave a Comment