WordPress Yoast Breadcrumb code – Filter t change wrapper element

2 Views

So the Yoast SEO plugin provides some handy stuff within WordPress, one of these is the Breadcrumb functionality, however the markup output is within span tags (I added # for URLs – don’t worry about that)… 

<span xmlns:v="http://rdf.data-vocabulary.org/#">
    <span typeof="v:Breadcrumb">
        <a property="v:title" rel="v:url" href="#">Home</a>
    </span>
    <span typeof="v:Breadcrumb">
        <a property="v:title" rel="v:url" href="#">Our Services</a>
    </span>
    <span typeof="v:Breadcrumb">
        <a property="v:title" rel="v:url" href="#">GP Services</a>
    </span>
    <span typeof="v:Breadcrumb">
        <span property="v:title" class="breadcrumb_last">GP Appointments</span>
    </span>
</span>

I’d like to output the breadrcumbs as a list instead of these spans – so ultimately I think I need to add some sort of filter to my functions.php file – so when I update the Yoast SEO plugin down the line it doesn’t overwrite my edits.

Read More

Within “/plugins/wordpress-seo/frontend/class-breadcrumbs.php” there is some code at the start where you can set the wrapper of the element.

Currently (minus comments and unrelated bits of code): 

if ( ! class_exists( 'WPSEO_Breadcrumbs' ) ) {

    class WPSEO_Breadcrumbs {

        private $element = 'span';

So this is the part I need to overwrite with something in my theme’s functions.php file.

I’m struggling with the markup for how to do this however.

There also seems to be a filter in this plugin file too: 

private function filter_wrapper() {
    $wrapper = apply_filters( 'wpseo_breadcrumb_output_wrapper', $this->wrapper );
    $wrapper = tag_escape( $wrapper );
    if ( is_string( $wrapper ) && '' !== $wrapper ) {
        $this->wrapper = $wrapper;
    }
}

Any help would be greatly appreciated.

Post Views: 2

Related posts

Leave a Reply

2 comments

  1. I believe I found a solution — my execution:

    functions.php

    function get_breadcrumb() {
    if ( function_exists('yoast_breadcrumb') ) {
        yoast_breadcrumb('<ol class="article__bread-crumb"><li>','</li></ol>');
    }
}

    Then I call get_breadcrumb() wherever I need it in the theme.

    Then in yoast settings, set the “separator between breadcrumbs” option to:

    </li><li>

    resulting code should end up like this:

    <ol class="article__bread-crumb">
    <li>
        <span xmlns:v="http://rdf.data-vocabulary.org/#">
            <span typeof="v:Breadcrumb">
                <a href="[URL]/velonews" rel="v:url" property="v:title">Home</a>
            </span>
        </span>
    </li>
    <li>
        <span rel="v:child" typeof="v:Breadcrumb">
            <a href="[URL]/velonews/all" rel="v:url" property="v:title">All</a>
        </span>
    </li>
    <li>
        <span rel="v:child" typeof="v:Breadcrumb">
            <a href="[URL]/velonews/category/news" rel="v:url" property="v:title">News</a>
        </span>
    </li>
    <li>
        <span class="breadcrumb_last">Related Test</span>
    </li>
</ol>

  2. I didn’t find a simple way to do this, so I ended up just altering my CSS styles to account for the fact that instead of an unordered list, the elements were nested spans and links – not the end of the world, and a solution of sorts, but not really the solution I had in mind, sadly.

    I’m sure there’s a way to do this – but without help, I’m struggling.