Improve WordPress Visual Editor for any theme with Editor Stylesheets

What good is a WYSIWYG editing interface if it fails to show what your marked-up content really looks like? Many themes do not make use of editor styles, even though they’ve been available since WordPress version 3. Let’s cover how to:

Enable editor style sheets in your theme.
Tell your theme to acknowledge the editor style sheet.
Then port over your theme’s post CSS to make your editing screen snazzy (and correct.)

Editor stylesheets: an egg is an egg

Editor stylesheets allow the Edit Post screen’s content area to use special styles for the WYSIWYG editor. By building a correct stylesheet based on a WordPress theme’s main stylesheet, the editor can show exactly what different elements will look like on the published page.

Been there, done that

Hacks for properly styling the edit screen’s content have been around for some time. WordPress version 3 brought the “add_editor_style” functionality to make it even easier. Despite all this, many otherwise wonderful themes still leave content in the editor window styled with WordPress defaults.

Examples of themes with and without support.

The 2011 theme that ships with WordPress supports editor stylesheets. Compare the editor content area with the same content in the published page. Pretty neat!

The “typebased” theme—a great looking free theme—does not support editor stylesheets. Again, compare the editor and published page screen.

How to add editor stylesheets to any theme

With a little work, you can add editor stylesheets to any WordPress theme. Some themes may be more difficult than others—based on the CSS file’s quality—but the process is always the same.

Watch the video below to see this process, every step of the way. If you prefer text, you can find it below.

fNgjvtr4Rk4

Step-by-step instructions:

Add a new file called “editor-style.css” to the theme directory.
In the theme’s “functions.php” file, add “add_editor_style();” line so WordPress will look for that new stylesheet you just made when using the editor.
Prepare a sample post that contains all the elements you need to style. I recommend your post contain the following elements:
1. p
2. strong text in a paragraph
3. emphasis text in a paragraph
4. h1, h2, h3
5. h4 … h6 if applicable to your theme
6. ul with 3 list items
7. ol with 3 list items
8. blockquote
9. some linked text
10. An image with no alignment.
11. An image right aligned.
12. An image left aligned.
13. …depending on your theme, you may need others
Add global CSS rules from your main style.css to the editor-style.css. By “global CSS,” I mean rules for basic HTML tags such as body, p, h1, h2, ul, li, etc.
Add any direct rules for .alignleft, .alignright, and .aligncenter. These are for images, and I mention them because they are often overlooked, and sometimes not near the top of CSS files by the basic HTML tags.
View you published page and use Firebug, Chrome developer tools, or whatever you like for checking the HTML / CSS in your browser. (The following video uses FireBug for the FireFox browser.)
Using Firebug’s element selector, click on the first HTML element in the page’s content to check the style rules assigned to it.
Firebug’s CSS pane will show specific styles at the top, and move down to more general styles. The “global CSS rules” we added in step 4 above will show at the bottom of this pane.
Add any specific styles found in the live page to the corresponding generic styles in your editor-style.css file.
1. Example 1:
  1. “.post-content h2 {font-color:#eee;}” discovered using Firebug on the live page.
  2. “font-color:#eee;” needs added to the h2 rules in the editor stylesheet.
2. Example 2:
  1. “img.alignright {margin:3px 0 2px 10px;}” discovered using Firebug on the live page.
  2. “margin:3px 0 2px 10px;” needs added to an img.alignright rule in the editor stylesheet.
  3. Since there is a specific rule for img.alignright, you should also add and test a left-aligned image.
Check the edit screen for the test page. While you will probably see your styles coming through, you might also notice some of the global CSS rules are inappropriate.
1. Example: With typebased, we had a background-color on the body element, but we did not want this on our post-containing element. We simply remove that background color from the body element in our editor CSS file.
NOTE that if your site uses plugins that add their own CSS, and it affects items you would add and see in your editor, you need to add those CSS rules to editor-style.css as well. Firebug should still show you these rules, unless they are dynamically added via JavaScript.
CUFON and other font replacements are not practical to implement in the WYSIWYG editor.