HTML5, WordPress and Tiny MCE issue - wrapping anchor tag around div results in funky output

Question

So I'm using HTML5 on a website and am trying to wrap a div in an anchor tag, which is supposedly acceptable in HTML5 websites. But when I do this...

<a href="#mylink"><div class="some_class">Some content</div></a>

...through the WordPress Tiny MCE editor, I get this output:

<p><a href="#mylink">&nbsp;</a></p>
<a href="#mylink"><div class="some_class">Some content</div></a>
<p><a href="#mylink"></a></p>

All kinds of messed up. If I flip to the visual editor and back to Text in Tiny MCE, it has changed the code to this:

<a href="#mylink"> </a>
<div class="some_class">Some content</div>
&nbsp;

Does anyone know how to force Tiny MCE to allow this? (ideally without resorting to the advanced plugin version of Tiny MCE)

Thanks for any advice.

Answer 1

You need to modify the TinyMCE settings, specifically the valid_children setting. To accomplish this in Wordpress, use the tiny_mce_before_init filter reference.

Something like this (untested):

add_filter('tiny_mce_before_init', 'modify_valid_children');

function modify_valid_children($settings){
    $settings['valid_children']="+a[div|p|ul|ol|li|h1|h2|h3|h4|h5|h5|h6]";
    return $settings;
}

You may be able to use +a[*] to capture all elements, but you'll want to take care to avoid nested anchor tags.