Prevent TinyMCE from Removing span tags in WordPress
If you are working in WordPress as a front-end developer, most of the time you use HTML editor to add contents using HTML code for a better styling. <span> tag is one of the important tags in HTML which provides a hook to style the elements with CSS, or even manipulate with JavaScript.
However, If you have used <span> tag in a TinyMCE editor while creating Posts/Pages, you may have noticed the <span> tag gets disappeared when you switch to View Tab. Your whole effort will be vanished in a thing air with no time. By default, the WordPress doesn’t recognize some inline elements like <span>, <p>, and others. We can, however, prevent this from happening.
Insert the following code in your active theme’s functions.php file
function pp_override_mce_options($initArray) {
$opts = '*[*]';
$initArray['valid_elements'] = $opts;
$initArray['extended_valid_elements'] = $opts;
return $initArray;
}
add_filter('tiny_mce_before_init', 'pp_override_mce_options');
Credits: wpengineer.com for this amazing trick.
There are few plugins which let you use different inline tags without any issues. Here are some of them:
