How do I separate my theme's styles from editor styles?

Question

Do I need to implement an editor-specific stylesheet for the WordPress WYSIWYG? In doing so will this eliminate style conflicts that I am currently experiencing?I am have not implemented an editor stylesheet so I am noticing that it is becoming very difficult to separate surrounding website styles and editor styles. What's the best way to implement this?

Answer 1

The WordPress editor shouldn't be pulling in the themes CSS files unless you have a file that is named editor-style.css. You can either use the editor-style.css and simply place it in your themes root directory, add certain styles to the stylesheet (not all the theme div and id tags will apply to the WordPress Editor).

Another way to do it is to use wp_enqueue_script to enqueue a CSS file with whatever name you wish, or in a different file location other than the themes root directory. Some authors use this method to minimize the amount of files that live in the theme root directory.

If your theme is incorrectly registering or enqueueing a script it can cause the files to be loaded into the WordPress admin area. Let me know what your theme is using for the editor stylesheet if this doesn't help so I can give you better assistance.

Answer 2

Adding a callback for custom TinyMCE editor stylesheet in your theme is a good (standard) way to implement an editor-specific stylesheet in WordPress. This is how it's done:

add_editor_style('custom-editor-style.css');

This function is ONLY for in-theme stylesheets, in the sense:

• The code should be added in your theme's functions.php

• The stylesheet file should reside right inside the theme directory i.e. for instance .../wp-content/themes/MY-THEME/custom-editor-style.css

READ: Function Reference / add_editor_style (WordPress Codex) and WordPress Editor Style (Article)