Allow HTML 5 in WordPress Comments

If you’ve taken the time to convert Thesis 1.8.5 to HTML 5 or if you’re using a theme that already is HTML 5, you may have wondered how, if at all, you could allow your visitors to leave rich comments on your posts, marked up in all the rich HTML 5 semantic markup they could need.

First, some basics. If you’re not even sure what tags are allowed for use in your site’s comments, then it is likely that your theme doesn’t display them along with the comment form. This is a quick fix and makes use of the allowed_tags() WordPress function. Boutros AbiChedid explains how to display the allowed tags in almost any theme, as well as how to modify what tags are allowed.

Follow the tutorial at that link if you want to put together a custom list of tags and attributes which you want your users to be able to use. However, if you want to quickly and simply enable tons of HTML 5 tags while also disallowing tags which WordPress by default allows but which are no longer valid markup in HTML 5, continue reading.

The process is simple. You’ll want to open your customization file — either a customizations plugin, your theme’s functions.php, or Thesis 1.8.5‘s custom_functions.php file.

Add it to the following block of code, which includes comments for just what it causes to happen:

/**
 * HTML5 comments
 * as seen on RickBeckman.org
 */
function brazenly_enhance_allowed_tags() {

	# WordPress' object containing all of the tags & attributes allowed in comments
	global $allowedtags;

	# Array of new tags and attributes to allow
	$newtags = array(
		'aside' => array(),
		'audio' => array(
			'controls' => true,
			'loop' => true,
			'mediagroup' => true,
			'muted' => true,
			'src' => true,
		),
		'details' => array(
			'open' => true,
		),
		'dd' => array(),
		'dfn' => array(),
		'dl' => array(),
		'dt' => array(),
		'figure' => array(),
		'figcaption' => array(),
		'img' => array(
			'alt' => true,
			'src' => true,
			'title' => true,
		),
		'li' => array(),
		'ol' => array(
			'reversed' => true,
			'start' => true,
			'type' => true,
		),
		'param' => array(
			'name' => true,
			'value' => true,
		),
		'pre' => array(),
		'source' => array(
			'media' => true,
			'src' => true,
			'type' => true,
		),
		'small' => array(),
		'sub' => array(),
		'summary' => array(),
		'sup' => array(),
		'time' => array(
			'datetime' => true,
		),
		'track' => array(
			'default' => true,
			'kind' => true,
			'label' => true,
			'src' => true,
			'srclang' => true,
		),
		'ul' => array(),
		'video' => array(
			'controls' => true,
			'height' => true,
			'loop' => true,
			'mediagroup' => true,
			'muted' => true,
			'poster' => true,
			'src' => true,
			'width' => true,
		),
	);

	# Obsolete default tags to remove
	unset( $allowedtags['acronym'] );
	unset( $allowedtags['strike'] );

	# Merge the default tags with the list of new tags
	$allowedtags = array_merge( $allowedtags, $newtags );

	# Sort the array alphabetically
	ksort( $allowedtags );

}
add_action( 'init', 'brazenly_enhance_allowed_tags' );

As you can see, a good number of tags are added for your users to utilize while writing their comments. They’ll now have the ability to add informative figures to their comments, audio and video, lists, and so much more. And you can of course customize the list of tags to suit your site’s needs.

I tried to be as thorough as possible in what was added, along with all relevant attributes, but as it’s entirely possible I’ve missed some, feel free to share suggestions in the comments.