You can add a custom style sheet to format the WordPress editor using add_editor_style.
A frustrating problem with this technique is that browsers will typically cache this css file pretty hard, and so it’s tricky to see that changes you made appear in the editor.
This is how you would typically add a custom style sheet.
add_editor_style('editor-style.css');Add the code below to you theme’s functions.php file and the editor-style.css will be given a version number that changes each time the file is saved, and avoiding any caching issues.
// Change cache suffix on editor-style.css
function my_tiny_mce_before_init( $mce_init ) {
// Get the timestamp of the file
$time = filemtime(get_template_directory().'/editor-style.css');
// Add the timestamp
$mce_init['cache_suffix'] = 'v='.$time;
return $mce_init;
}
add_filter( 'tiny_mce_before_init', 'my_tiny_mce_before_init' );
Thanks!
It took some time to find out that it’s not possible to ‘just add’ it as an extra in add_editor_style()..
This is super helpful! What would be the most efficient way to add it to multiple CSS files?
You would need to add the version number to each style sheet when it get’s enqueued, most likely in your wp_enqueue_scripts action.
editor-style.css is a bit different as it get’s enqueued by WordPress , rather than in your theme.