yoast breadcrumb image separator

Question

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

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.

What is your question? What have you tried? Where did you get stuck? Do you have some example code of what you tried? — Stephan Muller, Nov 30 '12 at 10:55

score 11 · Answer 1 · edited Aug 17 '18 at 10:24

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);

score 3 · Accepted Answer · answered Dec 01 '12 at 00:29

3

Yoast breadcrumb is now succeeded by WordPress SEO Plugin according to: http://yoast.com/wordpress/breadcrumbs/ you can customize the breadcrumb separator in the Wordpress SEO admin under Internal Links

answered Dec 01 '12 at 00:29

jec

156
4

score 3 · Answer 3 · answered Apr 24 '16 at 10:43

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 =)

janw · Answer 4 · 2012-11-30T14:01:26.420

0

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.

edited Nov 30 '12 at 14:01

answered Nov 30 '12 at 10:58

janw

6,672
6
26
45

Thanks for quick reply. I already tried that sir but the field prevent HTML Code. The code output is like this ` $\"fdgfdg\"$ ` or `»` and the field gave value like this `<span>»</span>` – jho1086 Nov 30 '12 at 11:07
is the version uptodate? I use `»` thsi one more then 1 site no tweaks involved – janw Nov 30 '12 at 14:00
Ohh did see that, I assumed you where using SEO. good luck ;) – janw Dec 01 '12 at 08:41

yoast breadcrumb image separator

4 Answers4