WordPress Tips: Style the Visual Editor

I’m starting my first series on the blog today, called WordPress Tips. These are bite-sized (kinda) recommendations, code snippets, and examples for improving your WordPress site and theme-creating skills.

I’ve seen a lot of poorly written code and even worse instruction as answers to some of the most important and popular questions about theming a WordPress website. With this series, I hope to improve the ratio of good to bad advice on the topic.

The Visual Editor

In the WordPress admin, whenever you add or edit a page or post, your main content goes in the Visual Editor. You may see this referred to as the Content Editor, Body, WYSIWYG, or Editor. These all mean the same thing. It has two tabs (in the top right corner) which let you edit the content as plain text / HTML or visually as a WYSIWYG editor. The visual mode is the default.

Writing content for your site is a breeze with the visual editor, and you likely spend all your time in that mode. But the default styles (what you see) are not at all what your front-end looks like (what you get). Check out this image of some content using the default styling.

the WordPress visual editor

The default styles give you a general idea of what your formatting will do to the content.
But it doesn’t quite match your website, does it?

Customize the Visual Editor Styling

To get your admin to reflect your theme’s content styling, you need to create a stylesheet tailored for the editor and tell WordPress where it is.

Create a Custom Editor Stylesheet

Your front-end stylesheet(s) are probably huge and have selectors for just about everything. We don’t need anything that isn’t pertinent to the main content area. So we need to creat a new stylesheet with only regular content styling.

So first put all your CSS in a new file and name it something like editor-style.css so it’s obvious. Then remove anything that doesn’t affect your main content. Things like headers, footers, sidebars, and any other layout and specialty styling can go.

.main-content p {
    margin: 1em 0;
    color: #333;
}

…should become…

p {
    margin: 1em 0;
    color: #333;
}

Once you have all of the selectors cleaned up and ready for the editor, you’ll need to style the body of the editor itself. Find all of the styles you have applied to the body element and any other containers that your content sits within, like div.wrapper, etc. Put them into one body {} selector.

body {
    margin: 0.5em 1em;
    color: #333;
    font-family: 'Roboto', sans-serif;
    font-size: 1.125em; /* 18px / 16px */
    font-weight: 300;
}

If you’re using web fonts… you’ll need to get those font files loaded in your editor too. Use the @import declaration at the top of your editor stylesheet to reference your font files. Below is an example using Google Web Fonts.

@import url(http://fonts.googleapis.com/css?family=Bitter|Roboto:300,700);

Tell WordPress to Use Your Stylesheet

Now we need to open up the functions.php file of our theme. We need to add the following code with the relative path to our editor stylesheet. If you’re like me, you’ll have your CSS in a folder to keep the theme clean. If not, just remove the css/ part of the following code.

// Add stylesheet for the editor
add_editor_style('css/editor-style.css');

That’s it. Now when you add or edit a post or page, you’ll see your styles reflected in the visual editor, just like in this image.

the WordPress visual editor with custom stylesheet added

Adding custom styles to match your front-end takes all the guesswork out of it!

Now that the editor has styles that match your front-end, you can format your content with confidence. You’ll know exactly how the content will look when you hit publish. You (and your clients) will be much more efficient and accurate with this small change.

Final Thoughts

Make sure to get your styling correct the first time or you may have trouble updating it. The editor caches the stylesheet file a little more aggresively than your browser, so hitting refresh won’t always grab the latest version. To get around this, you can change the name of the file and update your functions.php code to match. The new stylesheet will be loaded and you’ll see your updated CSS reflected in the editor.

WordPress Documentation: Function Reference/add_editor_style