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.)

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.)

• customization
• css

• Apparently you still CAN use the <style> tag as long as you never switch to WYSIWYG mode. Pretty bothersome, but better than nothing. – R.G. Commented Dec 9, 2015 at 15:59

1 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' );