Div Tag Disappears in TinyMCE

Wordpress

We’ve worked with WordPress as a simple website platform for some time now. Often we’ve run into scenarios where we’ve customized a section of a page or post that required us to add a set of DIV tags. This is all well and good and works great if you’re only ever going to work in HTML mode. But if you swap between HTML and Design modes (as a client would do once they took ownership of the content updates) then the DIV tag get’s removed (disappears).

Tiny MCE

This is due to the WYSIWYG editor in WordPress called TinyMCE. Now I know there’s various plugins to help manage TinyMCE, but we just needed to simply prevent the DIV tags from being removed. Oh, and any fix we make we want it to not be overwritten when we do a WordPress Upgrade.

The fix
In wp-content/themes/your_custom_theme either edit or create a file called functions.php. Inside there add the following:


function change_mce_options( $init ) {
$init['extended_valid_elements'] = 'div[*]';
return $init;
}
add_filter('tiny_mce_before_init', 'change_mce_options');

Of course if you have other TinyMCE customizations you want to make you can add them into there as well. For example I also have these:


$init['theme_advanced_blockformats'] = 'p,address,pre,code,h1,h2,h3,h4,h5,h6';
$init['theme_advanced_disable'] = 'forecolor';

At this point I’d generally give credit to the person and or site to figure this out…but it was some time ago that I found this fix and I just don’t recall where I got this information from. So I apologize for not being able to cite my source.