Adding Editor Styles

Editor Styles allow you to provide the CSS used by WordPress’ Visual Editor so that it can match the frontend styling. This allows content creators a better picture of what their content will look like while they are creating it.

In my theme, I have a “css” directory that holds additional CSS files. I create an editor-style.css file, then add this to my theme’s functions.php file:

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

I’ve arranged my theme’s main stylesheet so that more generic styles come first, followed by theme-specific styling. Once I’m finished with the base styling, I copy the top half of my stylesheet into editor-style.css.

I use @import to include any custom fonts (ex: Google Fonts, Icon Fonts…), and include the following sections from my main stylesheet: Base Typography (body, a, strong…), Headings, Images, Forms (input, select, buttons…), Gallery, Tables, Column Classes, and any Shortcake Styling.

css editor

Bill Erickson

Bill Erickson is a freelance WordPress developer and a contributing developer to the Genesis framework. For the past 14 years he has worked with attorneys, publishers, corporations, and non-profits, building custom websites tailored to their needs and goals.

Ready to upgrade your website?

I build custom WordPress websites that look great and are easy to manage.

Let's Talk