How to Add li and Other Tags to Breadcrumb Templates

Since Breadcrumb NavXT 4.3.0, all settings that can contain HTML are passed through wp_kses(). With this change, only a basic set of acceptable tags and properties within tags were allowed. Naturally, this restricted users more than they were used to. The restriction wasn’t the biggest problem, the lack of a filter to allow users to add their own tags in to the allowed HTML tag list. However, with Breadcrumb NavXT 4.4, a new filter bcn_allowed_html has been introduced to fix this issue.

The default set of allowed HTML tags in Breadcrumb NavXT 4.4 consists of: <a>, <img>, <span>, <h1>, and <h2>. For the purposes of this guide, let’s assume you don’t want to use the built in bcn_display_list() function to output breadcrumbs wrapped in <li> tags. The reason you would want to do this is if you need additional properties within the tag (Breadcrumb NavXT will by default add a class but that’s it).

In Breadcrumb NavXT 4.4, adding a tag to the allowed HTML list for Breadcrumb NavXT is really easy. Just create a function with one input argument ($allowed_html in this example). Within that function append, using the HTML tag name as the array entry key, assign an array of properties that tag is allowed to have, using the property name as the array entry key and a value of true. Then add your filter function to the ‘bcn_allowed_html’ filter hook. Below is an example of this for the <li> tag with a selection of properties.

function my_bcn_allowed_html($allowed_html)
{
	$allowed_html['li'] = array(
		'title' => true,
		'class' => true,
		'id' => true,
		'dir' => true,
		'align' => true,
		'lang' => true,
		'xml:lang' => true,
		'aria-hidden' => true,
		'data-icon' => true,
		'itemref' => true,
		'itemid' => true,
		'itemprop' => true,
		'itemscope' => true,
		'itemtype' => true
	);
	return $allowed_html;
}
add_filter('bcn_allowed_html', 'my_bcn_allowed_html');

To get started quickly, just copy and paste the above code into a site specific plugin and start playing.

-John Havlik

[end of transmission, stay tuned]

Trackbacks/Pingbacks

  1. Pingback: Using microdata RDFa with Breadcrumb NavXT 4.4 (schema.org) | Orion42's Weblog

  2. Pingback: [備忘録]wordpressのパンくずリストプラグイン「Breadcrumb NavXT」でリストタグを使いたい!問題について。 | ultimate-ez.com

  3. Pingback: How to Implement RDFa Breadcrumbs with Breadcrumb NavXT | mtekk's Crib

4 thoughts on “How to Add li and Other Tags to Breadcrumb Templates

  1. For the RDFa Breadcrumbs I added a file called breadcrumbs.php in the wp-content/plugins/rdfabreadcrumbs directory with the content <?php
    /*
    Plugin Name: RDFa Breadcrumb for Responsive Bootstrap Theme and NavXT 5.0.1
    Description: Site specific code for Responsive Bootstrap Theme and NavXT 5.0.1
    */
    function my_bcn_allowed_html($allowed_html)
    {
    $allowed_html['span'] = array(
    'typeof' => true,
    'property' => true,
    'title' => true,
    'class' => true,
    'id' => true,
    'dir' => true,
    'align' => true,
    'lang' => true,
    'xml:lang' => true,
    'aria-hidden' => true,
    'data-icon' => true,
    'itemref' => true,
    'itemid' => true,
    'itemprop' => true,
    'itemscope' => true,
    'itemtype' => true
    );
    return $allowed_html;
    }
    add_filter('bcn_allowed_html', 'my_bcn_allowed_html');
    ?>

    It’s not cleaned from the li attributes in this post, just added two lines as inclined.
    Followed the guide at http://mtekk.us/archives/guides/how-to-implement-rdfa-breadcrumbs-with-breadcrumb-navxt/

    Thanks John for this plugin.

Leave a Reply

Your email address will not be published. Required fields are marked *