Wordpress display breadcrumbs using Yoast plugin [closed]

I went to the Yoast website and just took a look at the breadcrumbs they use:

<nav class="row breadcrumb" aria-label="You are here:">
    <span>
        <span><a href="https://yoast.com/">Home</a> » 
            <span><a href="https://yoast.com/help/">Help center</a> » 
                <span><a href="https://yoast.com/help/category/wordpress-plugins/">WordPress plugins</a> » 
                    <span><a href="https://yoast.com/help/category/yoast-seo-woocommerce/">Yoast SEO: WooCommerce</a> » 
                        <span class="breadcrumb_last" aria-current="page">How to implement Yoast SEO breadcrumbs</span>
                    </span>
                </span>
            </span>
        </span>
    </span>
</nav>

You’ll notice that the last nested <span> tag has a class of .breadcrumb_last.

You could add the following to your style.css:

nav.row.breadcrumb .breadcrumb_last{
    display:none;
}

This may actually be advisable because the aria-current is still available for assistive technologies.

I should add that this operates on the assumption that the way your breadcrumbs are being output is the same HTML format, so you’ll need to check that first, but if it is, this should address it. You may also need to, and I’m loathe to say this, add an !important to your CSS rule in case Yoast’s stylesheet executes after yours. Try without it though and see what happens.

Related Posts: