How to remove the breadcrumb “separator” tag?

#55946
  • Resolved Bb
    Rank Math free

    I’m trying to remove the <span class="separator"></span> HTML tag, as I want to input my own via CSS. Also, having setup the breadcrumb list as a list, where each item is its own <li>, the <span> screws up the markup.

    I’ve had a look at https://rankmath.com/kb/filters-hooks-api-developer/#breadcrumbs and while I can edit the contents of the separator, I can’t seem to completely remove the tag.

    How do?

Viewing 8 replies - 1 through 8 (of 8 total)
  • Hello,

    Thank you for contacting Rank Math today.

    You can use the following filter to change the appearance of your breadcrumbs. Please add the relevant custom values for changes.

    /**
     * Filter to change breadcrumb html.
     *
     * @param  html  $html Breadcrumb html.
     * @param  array $crumbs Breadcrumb items
     * @param  class $class Breadcrumb class
     * @return html  $html.
     */
    add_filter( 'rank_math/frontend/breadcrumb/html', function( $html, $crumbs, $class ) {
    	// theme_breadcrumb_function();
    	return $html;
    }, 10, 3);
    5. Filter to change

    Looking forward to helping you. Thank you.

    ​​​​​​

    Bb
    Rank Math free

    Looked at, and tried, that filter.

    add_filter( 'rank_math/frontend/breadcrumb/html', function( $html, $crumbs, $class ) {
    	$html = str_replace('<span class="separator"> - </span>', 'TEST', $html);
    	return $html;
    }, 10, 3);

    (Having set “Separator Character” to hyphen in the Breadcrumbs settings in the backend)

    —–

    EDIT: tried again, and clicked view source this time, instead of inspect element. Apparently the inspector strips the whitespace.

    Works now. Thanks!

    Bb
    Rank Math free

    Follow up: How do I put in multiple str_replace?

    Alberto
    Rank Math business

    Hello,

    What do you mean with multiple str_replace? Do you want to replace multiple different characters?

    Looking forward to help you.

    Bb
    Rank Math free

    Hi Alberto

    That’s correct. That is, I want to replace both <span class="separator"></span> and “Home” (for a home-icon)

    Hello,

    Thank you for contacting Rank Math today.

    I didn’t get you well, do you want to replace the home text with an icon. If so you can use the following function, replace home with your homepage label

    add_filter( 'rank_math/frontend/breadcrumb/html', function( $html, $crumbs, $class ) {
    	$html = str_replace('<span class="separator"> - </span>', 'test', $html);
    	$html = str_replace('Home', 'your icon', $html); //your icon
    	return $html;
    }, 10, 3);

    Hoping that helps you. Thank you.

    ​​​​​​

    Bb
    Rank Math free

    Thanks, Michael!

    Todd
    Rank Math free

    Hello,

    We are super happy that this resolved your issue. If you have any other questions in the future, know that we are here to help you.

    If you don’t mind me asking, could you please leave us a review (if you haven’t already) on https://wordpress.org/support/plugin/seo-by-rank-math/reviews/#new-post about your overall experience with Rank Math? We appreciate your time and patience.

    If you do have another question in the future, please feel free to create a new forum topic, and it will be our pleasure to assist you again.

    Thank you.

Viewing 8 replies - 1 through 8 (of 8 total)

The ticket ‘How to remove the breadcrumb “separator” tag?’ is closed to new replies.