not so elementary, my dear watson

May 04 2011 | 2 Comments

For about a week and a half now, I’ve been fighting with WordPress. While I really like using the tool, it’s been very frustrating when trying to use some new HTML5 web elements, specifically the HTML5 video tag. I mentioned my first foray into the latest web language addition a while ago in a past post and tried again with my previous post. Out of the box, WordPress’ post editor doesn’t allow you to enter any HTML elements other than the specific elements and attributes of those elements defined within a file called kses.php. This means that if you try to add a <video> tag to the HTML area of the post editor, for example, flip back to the visual editor, your spiffy new elements are kaput. Tears. Sadness. Frustration.

The kses file basically tells WordPress which HTML elements are safe for blog post entries. Anything other than what’s defined here will be torn asunder. (See Otto’s post for a more detailed description.) Many queries to the all powerful Google resulted in this post by Rhys Burnie for a solution to my quandary. Rhys’ code basically creates an addendum to the allowed HTML elements defined in the kses file. The additional elements and their attributes are then plopped into the filter used for the WordPress editor, called tinyMCE, before it’s initialized. The additional PHP code can then be added to your theme’s functions.php file, a quick FTP upload, and you’re off! Pretty slick, eh?

I found, however, that Rhys’ element list wasn’t quite up to date, most likely because the HTML5 spec has changed since the post was made last year. I added some additional element attributes, particularly for the video tag. You can see the attributes for each element noted by [#|attribute|attribute|etc….] on the various lines. Here’s the code:

//extending valid elements
function extend_valid_html5($init) {
	//Standard attributes
	$atts = 'role|accesskey|class|contenteditable|contextmenu|dir|draggable|hidden|id|item|itemprop|lang|spellcheck|style|subject|tabindex|title';
	$html5Elements = array(
		'article[#|cite|pubdate]',
		'aside[#]',
		'audio[#]',
		'canvas[#]',
		'command[#]',
		'datalist[#]',
		'details[#]',
		'figure[#]',
		'figcaption[#]',
		'footer[#]',
		'header[#]',
		'hgroup[#]',
		'mark[#]',
		'meter[#]',
		'nav[#]',
		'output[#]',
		'progress[#]',
		'section[#]',
		'summary[#]',
		'time[#|datetime]',
		'video[#|src|poster|autoplay|loop|controls|width|height|type|style|id|preload]',
		'param[#|name|value]',
		'source[#|src|type]'
	);
	if(!isset($init['extended_valid_elements'])) {
		$init['extended_valid_elements'] = '';
	}
	$init['extended_valid_elements'] .= str_replace('#',$atts,implode(',',$html5Elements));
	return $init;
}
add_filter('tiny_mce_before_init', 'extend_valid_html5');

Rhys also gives mention to Nick Gallagher’s approach to solve the HTML5 element issue, which I also tried, but found the kses modification technique to work more successfully. An additional note, if you plan on giving the whole thing a whirl: I found that even by adding all of the attributes for the video tag above, the editor was still stripping out the controls and preload attributes. By HTML5 definition, so far, these attributes can be used by declaration only, as follows: <video controls width=”640″ height=”360″ preload>. But the gosh darn editor stripped out these anyway. Trial and error found that if you add these declarations with values set: <video controls=”true” width=”640″ height=”360″ preload=”auto”>, everything stays put :) An additional additional note, don’t forget to update your doctype to HTML5 :P

For more info on the video tag, check out Dive into HTML5 and Camen Design.

Sooo, I finally beat the system. And I feel great. And now I can post with HTML5 video galore and be accessible all around and everyone can enjoy my multimedia-tastic posts with the browser of his or her choice. Without silly Flash. You can use Chrome. Or Safari. Or Firefox. Or even Opera. I guess you can use IE too. I’m falling back to a Flash player if you’re still using that silly browser. Enjoy.

(At least until WordPress releases an update that fixes the problem in core and makes this fix obsolete  :P, which according to their bug tracker, will be the case. ;)


2 Responses to “not so elementary, my dear watson”

  1. Note that if you’re logged in as an Administrator or Editor (or a Super-Admin for multi-site setups), then you have a capability called “unfiltered_html”. This allows you to post any HTML you want. The kses filtering only applies to unprivileged users.


  2. Ahh, good to know. Thanks Otto!


Post a Comment