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: for this amazing trick.

There are few plugins which let you use different inline tags without any issues. Here are some of them:

  1. Raw HTML
  2. WP Unformatted
  3. Ultimate TinyMCE
  4. TinyMCE Preformatted