add markup inside the link tag in breadcrumbs

#69103
  • Resolved adamnicolson
    Rank Math free

    Im hoping this one will be an easy question to answer. Im looking to customise the output of the links in the breadcrumbs. Id like to add a span inside the link. I can do this by editing the source files like this https://www.screencast.com/t/Zi2HYqd3 in the file wp-content/plugins/seo-by-rank-math/includes/frontend/class-breadcrumbs.php However, i know this would be overwritten on the next update. Is there any way to achieve this in my functions.php file?

    Thanks – Adam

Viewing 9 replies - 1 through 9 (of 9 total)
  • Alberto
    Rank Math business

    Hello,

    Thank you for contacting Rank Math and sorry for any inconvenience that might have been caused due to that.

    Yes, as you say, it would be lost on each update. It is better if you use a filter. I was thinking about this one: https://rankmath.com/kb/filters-hooks-api-developer/#change-breadcrumb-html

    Looking forward to helping you. Thank you.

    ​​​​​​​

    Hi Alberto. Ive been able to hack something together, although its not idea, it is not outside of your core files.

    Im able to wrap the titles in a <b> tag/

    add_filter( ‘rank_math/frontend/breadcrumb/items’, function( $crumbs, $class ) {
    foreach ( $crumbs as $key => $crumb ) {
    $crumbs[$key][0] = ‘<b>’ . $crumb[0] . ‘</b>’;
    }
    return $crumbs;
    }, 10, 2);

    but as this gets escaped in the function, i have to look for each part of the escaped code and convert it to what i need.

    echo str_replace(‘<b>’,'<span>’,
    str_replace(‘</b>’,'</span>’,rank_math_get_breadcrumbs()));

    its not a pretty solution, and your before and after callbacks were so close to what i needed. If there is a better way of achieving what I’m doing, do let me know.

    Sorry, some of the escaped code ended up rendering on the this page. The string-replace actually looks like this https://www.screencast.com/t/hrwVFSRa

    Alberto
    Rank Math business

    Hello,

    I think it is a hacky solution, but if it works for you it is fine. Anyway, I will ask our devs if there is a better way to do it.

    Looking forward to help you.

    Hello,

    You can use preg_replace function to wrap anchor text into spans. Please try adding following code to your theme’s function.php file:

    
    add_filter( 'rank_math/frontend/breadcrumb/html', function( $html, $crumbs, $bc ) {
        return preg_replace('/<a (.*?)>(.*?)<\/a>/', '<a $1 ><span>$2</span></a>', $html );
    }, 10, 3 );
    

    I hope that helps.

    Hi Pratik

    This solution is beautifully simple! It works perfectly for me without any of my hacky methods.

    Many thanks,
    Adam

    Alberto
    Rank Math business

    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.

    That sounds like a great idea! As soon as I have launched my site and I have no more issues with your product, ill be sure to give you a glowing review. So far so good 🙂

    Hi,

    Thank you so much.

    We are always here if you need us.

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

The ticket ‘add markup inside the link tag in breadcrumbs’ is closed to new replies.