yoast breadcrumb image separator

0 Views

I’m working with WordPress CMS and I use Yoast Breadcrumbs (http://wordpress.org/extend/plugins/breadcrumbs/ or http://yoast.com/wordpress/breadcrumbs/) to add a breadcrumb to the site but in my case I need to replace separator with image like the image below:

enter image description here

Read More

The image above is a breadcrumb output that I like to implement. And the default output of Yoast Breadcrumbs is like this You are here: Home » Uncategorized » Hello world! and the plugin has and admin option to edit the separator, but it is preventing HTML tag.

Post Views: 0

Related posts

Leave a Reply

4 comments

  1. There is a far-more cleaner way to do this.

    Read http://hookr.io/filters/wpseo_breadcrumb_separator/ , here they mention a hook. If u use this hook you can easily overwrite the seperator by just default HTML.

    For example:

    function filter_wpseo_breadcrumb_separator($this_options_breadcrumbs_sep) {
    return '<i class="fa fas fa-chevron-right"></i>';
};

// add the filter
add_filter('wpseo_breadcrumb_separator', 'filter_wpseo_breadcrumb_separator', 10, 1);

  3. I realize this is an old post, but I found this when searching for the same problem today. As of Yoast SEO Version 3.2.3, you CAN put HTML in the field for “Separator between breadcrumbs:” in Advanced settings for the plugin. I’ve used this code, for instance where I’m using Font Awesome but you could easily do the same thing for an image within your stylesheet:

    <span class="divider"></span>

    And my CSS:

    p#breadcrumbs span.divider:before {
    content: 'f105';
    font-family: 'FontAwesome';
    padding-left: 10px;
    padding-right: 6px;
}

    I hope this will help some =)

  4. In the settings for the separator you can add <span class="sprite breadcrumb-seperator">»</span>
    This way you have a visible separator. But you can set a sprite based image on it.