Customize Allowed Tags and Attributes

GD bbPress Toolbox Pro adds a Tweak to expand the list of allowed HTML tags and attributes for these tags for use in topics and replies for regular user roles (keymaster can use the unlimited set of tags and attributes).

But, even with GD bbPress Toolbox Pro, there are cases when you want to add some additional and non-standard tags and attributes. This is very important if you need to add special data attributes that don’t fit into normal attributes HTML tags have. To expand this list of tags and attributes, you can use a filter in bbPress core: bbp_kses_allowed_tags. This filter expects array with tags as keys, and each tag array of attributes as keys and each attribute that is allowed has a value set to true.

All these examples are to modify allowed tags for regular user roles. Keymaster/administrator can use any tag or attribute.

Examples from this tutorial can be added to the theme ‘functions.php’ file. All examples set the filter with priority 100, so it will run after most of the other code that might be hooked to this filter.

WordPress Limitations

The main issue with this process is that if you plan to add tags or attributes that WordPress doesn’t allow at all, they will be removed regardless what you set through the use of the bbp_kses_allowed_tags filter. So, to allow completely new tags or new attributes, you need to register them with the WordPress $allowedposttags global. The examples listed bellow will reflect that.

Examples

Add new tags to the list of allowed tags

This example is a simple way to add 2 new tags with some attributes.

<?php
add_filter('bbp_kses_allowed_tags', 'basic_allowed_tags', 100);
add_action('init', 'wp_basic_allowed_tags');
function basic_allowed_tags($tags) {
  $tags['main'] = array(
    'class' => true,
    'style' => true,
    'title' => true,
    'data-layout' => true
  );
  $tags['header'] = array(
    'class' => true,
    'style' => true,
    'data-layout' => true,
    'data-test' => true
  );
  return $tags;
}
function wp_basic_allowed_tags() {
  global $allowedposttags;
  $allowedposttags['main'] = array(
    'class' => true,
    'style' => true,
    'title' => true,
    'data-layout' => true
  );
  // header already exists in $allowedposttags //
  $allowedposttags['header']['data-layout'] = true;
  $allowedposttags['header']['data-test'] = true;
}
?>

This code will add two tags: MAIN and HEADER. For tag MAIN it is allowed to use attributes ‘class’, ‘style’, ‘title’ and ‘data-layout’. For HEADER tag it is allowed to use attributes ‘class’, ‘style’, ‘data-test’ and ‘data-layout’.

Add attributes to already allowed tags

This example will only add attributes to tags that are already registered.

<?php
add_filter('bbp_kses_allowed_tags', 'extra_allowed_tags', 100);
add_action('init', 'wp_extra_allowed_tags');
function extra_allowed_tags($tags) {
  $tags['img']['srcset'] = true;
  $tags['img']['data-extra'] = true;
  $tags['a']['data-extra'] = true;
  return $tags;
}
function wp_extra_allowed_tags() {
  global $allowedposttags;
  $allowedposttags['img']['srcset'] = true;
  $allowedposttags['img']['data-extra'] = true;
  $allowedposttags['a']['data-extra'] = true;
}
?>

Tag IMG will be expanded to allow ‘srcset’ and ‘data-extra’ attributes, and tag A will be expanded to allow ‘data-extra’.

Remove tags or attributes from allowed list

This example will remove one tag and one attributes from other tag.

<?php
add_filter('bbp_kses_allowed_tags', 'remove_allowed_tags', 100);
function remove_allowed_tags($tags) {
  if (isset($tags['h6'])) {
    unset($tags['h6']);
  }
  if (isset($tags['a']) && isset($tags['a']['rel'])) {
    unset($tags['a']['rel']);
  }
  return $tags;
}
?>

If tag H6 is allowed, this code will remove it from the allowed tags list. And if ‘rel’ attribute for A tag is allowed, it will be removed.