Using main style.css with add_editor_style

by

All the resources I’ve read online suggest using a different CSS file (i.e. editor-style.css) in order to style the WYSIWYG editor to better resemble what the actual content will look like.

For the purpose of testing I tried to just use the main style.css file that I’ve been using for the rest of the site and the styling in the WYSIWYG editor looks great and so far I haven’t noticed any problems by doing this.

Should I still create a new editor-style.css and use that or is it an acceptable practice to use my main style.css?

For reference, this is the code I used below:

function wysiwyg_styles() {
    add_editor_style( 'style.css' );
}
add_action( 'init', 'wysiwyg_styles' );

3 Answers
3

The simplest answer is: you can use whatever stylesheet you want for the editor. editor-style.css is just the default stylesheet loaded if none is passed to add_editor_style().

This will load the specified stylesheet:

add_editor_style( 'some-stylsheet.css' );

This will load editor-style.css:

add_editor_style();

Use whatever better fits your needs.

By the way, it is better practice to add the editor stylesheet using after_setup_theme action, not init, as it is something specific for the theme:

add_action( 'after_setup_theme', 'cyb_theme_setup' );
fucntion cyb_theme_setup() {
    add_editor_style();
}

Leave a Comment