the logo of HTML 5

Allow HTML 5 in WordPress Comments

If you’ve tak­en the time to con­vert The­sis 1.8.5 to HTML 5 or if you’re using a theme that already is HTML 5, you may have won­dered how, if at all, you could allow your vis­i­tors to leave rich com­ments on your posts, marked up in all the rich HTML 5 seman­tic markup they could need. 

First, some basics. If you’re not even sure what tags are allowed for use in your site’s com­ments, then it is like­ly that your theme does­n’t dis­play them along with the com­ment form. This is a quick fix and makes use of the allowed_tags() Word­Press func­tion. Boutros AbiChe­did explains how to dis­play the allowed tags in almost any theme, as well as how to mod­i­fy what tags are allowed.

Fol­low the tuto­r­i­al at that link if you want to put togeth­er a cus­tom list of tags and attrib­ut­es which you want your users to be able to use. How­ev­er, if you want to quick­ly and sim­ply enable tons of HTML 5 tags while also dis­al­low­ing tags which Word­Press by default allows but which are no longer valid markup in HTML 5, con­tin­ue reading.

The process is sim­ple. You’ll want to open your cus­tomiza­tion file — either a cus­tomiza­tions plu­g­in, your the­me’s functions.php, or The­sis 1.8.5’s custom_functions.php file.

Add it to the fol­low­ing block of code, which includes com­ments for just what it caus­es 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 num­ber of tags are added for your users to uti­lize while writ­ing their com­ments. They’ll now have the abil­i­ty to add infor­ma­tive fig­ures to their com­ments, audio and video, lists, and so much more. And you can of course cus­tomize the list of tags to suit your site’s needs.

I tried to be as thor­ough as pos­si­ble in what was added, along with all rel­e­vant attrib­ut­es, but as it’s entire­ly pos­si­ble I’ve missed some, feel free to share sug­ges­tions in the comments.

Leave a Comment

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

Use your Gravatar-enabled email address while commenting to automatically enhance your comment with some of Gravatar's open profile data.

Comments must be made in accordance with the comment policy. This site uses Akismet to reduce spam; learn how your comment data is processed.

You may use Markdown to format your comments; additionally, these HTML tags and attributes may be used: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Rick Beckman