Make the WordPress visual editor content look more like the finished output

Content in the visual post editor (TinyMCE) in WordPress doesn’t look that much like the finished article by default. Thankfully WordPress includes a style sheet that we can use to make things better.

The editor style sheet is called “editor-styles.css” and can be found in the root folder of the active theme along side the main style sheet “styles.css”. There is a really simple way to make the editor content look more like the live and to include all of the styles from the main style sheet. Simply include the main style sheet at the top of the editor style sheet:

Then add an override for the content width to match your theme and force the background to be white (or to match your theme):

And there you have it. You might note that the editor style sheet for the twentyeleven theme is vastly more complex than this but I suspect that nearly all of the settings are already in the main style sheet and so are no longer required. You may of course find that you need to add a few more tweaks to cater for “edge cases”. You might also note a number of articles on the web that suggest that you need to do this by an addition to your functions.php file like this:

But in fact, this isn’t required if we simply change the editor style sheet as suggested which I think is much easier to manage and maintain.