How to get WordPress to accept the <style> tag in articles (or other alternatives)

Question

WordPress (i.e. TinyMCE) automatically strips the <style> tag from articles in newer version. This means, you can only rely on inline CSS which makes the code ugly for more complex styling options and is also limited.

In my case, I want to include :hover functionality, but :hover does not work with inline CSS. Using the <style> tag in the body does not work either though.

I've tried this fix/hack, but it doesn't work with newer versions of WordPress.

Any suggestions how to change this?

(An alternative would be to get WordPress to accept the inclusion of external CSS files for individual articles.)

Answer 1

The <style> tag needs to be added to tinyMCE's extended_valid_elements array to prevent on that tag from being stomped:

function wpse211235_add_tiny_mce_before_init( $options ) {

    if ( ! isset( $options['extended_valid_elements'] ) ) {
            $options['extended_valid_elements'] = 'style';
    } else {
            $options['extended_valid_elements'] .= ',style';
    }

    return $options;
}
add_filter( 'tiny_mce_before_init', 'wpse211235_add_tiny_mce_before_init' );