We ALL know that WordPress just WOULDN’T exist without AWESOME SQL, yeah?
Yeah, okay, so this probably is NOT something that you always run across. And I bet in a LOT of circumstances, this is actually something that you actually WOULD want. I know it has come in handy many times while using the visual editor in WP. In this case, however, it isn’t so frickin’ handy. I have been working with a new site for a local legal office, Mast Firm in Smithfield NC, and the particular theme I chose had a great number of options and looked like it would work great.
However.
One of the spiffy little icon sets that is suggested to spruce up the site is used by adding a span tag with a class that drops a cool little icon in there. With that font set, there are dozens of icons – possibly over 100. Without looking yet again, I have no clue.
What is occurring is I put in a “ ” and it shows a slick little icon with some formatting. Super. Save. Crud, made a mistake – let me edit that text. Done. Save. WHERETHEHELLISMYICON??? Our friend TinyMCE doing its’ job for us. Stripping out the span tag with an empty space. “Well, if it wants a character so bad, how about a ‘.’?” nope. Rather as expected AND the period of course did show and it just wouldn’t be acceptable. Tried the ever popular “ ” but that threw the alignment off still. And it still didn’t hold the if memory serves me correctly. I actually tried that several weeks ago.
Ran across this post at Bash Bang Productions which led me to the solution…
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.
So *I* know where I found the solution, so they get a fat link of appreciation above from the Lizard. thanks guys!
Now, with my particular theme, the LawBusiness theme from ThemeForest, after adding in that little blurb, I threw an error right away. Crud. But it appears that the theme already has this particular function in there – but it doesn’t include the code for holding on to blank divs or spans. So here it is with the location.
The function is already there, and we are just going to add in a little juice to it to include those spans and divs.
/lawbusiness/framework/admin/inc/editor-additions.php
function change_mce_options($initArray) {
$ext = 'pre[id|name|class|style],div[*],span[*], iframe[align|longdesc|name|width|height|frameborder|scrolling|marginheight|marginwidth|src]';
if (isset($initArray['extended_valid_elements'])) {
$initArray['extended_valid_elements'] .= ',' . $ext;
} else {
$initArray['extended_valid_elements'] = $ext;
}
return $initArray;
}
add_filter('tiny_mce_before_init', 'change_mce_options');
And it works like a champ. One more headache down for the day. w00t.
One thing to note just for noting it – the code does get saved correctly into the database (probably as you would expect), but when it’s pulled OUT, that is when TinyMCE does the stripping…
Follow
