Stop TinyMCE in WordPress 3.x messing up your HTML code

Article Primary image
Author Image - Phil Middlemass

By Phil Middlemass

Our Creative Director giving his opinion on 17 years in the digitial industry working with leading brands and companies

We've been using WordPress for over a year now on our site and quite frankly we love it! But as with everything in life nothing is perfect, unfortunately this is true for WordPress too.

One of the biggest annoyances we've encountered with WordPress has been the way TinyMCE handles your HTML source code when switching between Visual and HTML views and saving when using the editor, tags would be removed, empty <div>'s and <span>'s would be removed or converted to <br /> tags,  it just doesn't make sense why this continues to be the default behaviour in WordPress or why there isn't a simple option in the Settings > Writing or Users > Profile pages to enable a truly free writing/coding experience

Apparent solutions, that aren't

There are a number of solutions we have tried over the last 12 months, which have been anything but ideal or not solutions at all in some cases.

TinyMCE Advanced:
This plugin purports to offer a feature that stops empty <p> tags being removed, enabled through the Settings > TinyMCE Advanced screen, along with a new-ish option to support HTML5 tags. We had limited success with this plugin it seemed to work sporadically, possibly introducing an even more bizzare behaviour when re-opening a post/page saved with custom HTML that would mangle the HTML code further, although the initial save of the content before retrieving it again worked well.

Modifying the TinyMCE JavaScript file:
This was the most successful solution we came across until now, it involved editing a core WordPress/TinyMCE JavaScript file: wp-includes > js > tinymce > tiny_mce.js




Obviously this is a faux pas in WordPress and updating to newer releases of WordPress resulted in the modified .js being constantly overwritten, requiring the modification to be re-applied as part of an extended upgrade process before deploying to a production environment.

A solution that works

After making do with a setup that was marginally better than the out-of-the-box way of working for 6 months, we found that the JavaScript modification method above no longer worked due to changes in the core TinyMCE.js file introduced with recent versions of WordPress 3.x, and that there had been an easy, clean and highly effective solution under our noses all the time that essentially replicates our old JavaScript method but using PHP and WordPress hooks to change the parameters TinyMCE uses when it is initiated.

This short bit of PHP code should be put into your themes functions.php file

function override_mce_options($initArray) {
	$opts = '*[*]';
	$initArray['valid_elements'] = $opts;
	$initArray['extended_valid_elements'] = $opts;
	return $initArray;
add_filter('tiny_mce_before_init', 'override_mce_options');

... and voila! no more messing with your source code when saving or switching views

Credit for this solution, thanks guys.