Customizing the display in the visual editor

The whole appeal of a WYSIWYG interface is to see what the page is going to look like before publishing … yet when the typography and other styling is customized in the theme the visual editor will still show the default/core back-end styling. So…

First insert this code into the active theme’s functions file:

Then create the referenced stylesheet (in this case custom-editor-style.css under the root of the theme folder)

Here;s a sample:

… a side note… I couldn’t get the “clear” style to show properly in the visual editor, but the hr clearing shows properly ….