Genesis breadcrumbs markup issues

In certain circumstances, permitted markup for page titles breaks the Genesis breadcrumbs.

In this example  the <sup> tag is being used in parent page title.

This is because Genesis’ breadcrumbs uses esc_html  ( genesis/lib/classes/breadcrumbs.php ) in most cases (note that it doesn’t in all cases as the far right is rendering correctly )

One solution would be to remove the esc_html from the core genesis file, but that would of course create problems when you upgrade.

This particular problem (parent page) is solved by removing the esc_html on line 758 changing

$link = sprintf( '<a href="%s"%s>%s</a>', esc_attr( $url ), $title, esc_html( $content ) );

to

$link = sprintf( '<a href="%s"%s>%s</a>', esc_attr( $url ), $title,  $content );

But this isn’t a great way to go about it, changing core files in Genesis

esc_html is filtered, which means you can change the behavior by adding a filter to your functions.php

( you can see the code for esc_html here https://core.trac.wordpress.org/browser/tags/4.1/src/wp-includes/formatting.php )

If you add the following code esc_html is modified across your whole site, so I can’t take any responsibility, its up to you to test and make sure your site works fine and is secure.

The code essentially replaces the call to  _wp_specialchars( $safe_text, ENT_QUOTES ); to a call to wp_kses, allowing in this example the <sup> tag ( http://codex.wordpress.org/Function_Reference/wp_kses )

// filter to allow <sup> tag through esc_html
add_filter('esc_html', 'bw_esc_html',10,2);
function bw_esc_html($val, $text, $content = null)
    {
       $text = wp_check_invalid_utf8( $text );
       return wp_kses($text, array ( 'sup' => array()));
    }

 

 

The end result

end note: in my screenshots the <sup> tag isn’t doing anything, that is simply because mytest theme hasn’t styled it with any css

Addendum:

I raised this with StudioPress and they provided two alternative workarounds, so there are plenty of ways to solve this

We’ve been tracking this issue in our system and may resolve it in a future update.

For now, another workaround you are welcome to use that filters Genesis breadcrumb links only and not esc_html throughout WordPress is this:

 

add_filter( 'genesis_breadcrumb_link', 'sp_html_crumbs', 10, 4 );
function sp_html_crumbs( $link, $url, $title, $content ) {
	$link = sprintf( '<a href="%s"%s>%s</a>', esc_attr( $url ), $title,
$content ); 	return $link;
}

 

If you prefer, you can also solve the issue without writing code by installing the WordPress SEO plugin and activating breadcrumbs under SEO > Internal Links. This works because WordPress SEO doesn’t escape HTML in breadcrumb links by default like Genesis does. (That may change in the future, though.)