This is pretty much an exact duplicate of: How to make WordPress and TinyMCE accept <a> tags wrapping block-level elements as allowed in HTML5? and HTML5, WordPress and Tiny MCE issue – wrapping anchor tag around div results in funky output
My problem is that the suggested solution (tiny_mce_before_init filter) doesn’t seem to solve my problem. I have HTML that looks like this:
<a href="#">
<img src="path/to/file.jpg" />
<p>Some amazing descriptive text</p>
</a>
The is perfectly legal in HTML5. However, the WP editor doesn’t like it and transforms it to:
<a href="#">
<img src="path/to/file.jpg" />
</a>
<p>Some amazing descriptive text</p>
This, of course, breaks my layout. Does anyone know of a way I can prevent this behavior? I can’t give up the Visual component of the editor and stick to plain text. Any suggestions are welcome.
Just to be clear, when I use the code below (suggested here), the <p> tags are allowed to remain inside the anchors but a lot of extra space is added along with an entity which multiplies every time you switch between Visual and Text mode.
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;
}