Add Custom Styles to the WordPress Editor

Wouldn’t it be handy if you could see exactly how your blog post or page would look without having to keep switching back and forth from the preview? Well, now you can with this nifty little tutorial.

We’re going to use the add_editor_style() function which allows us to use a custom stylesheet to style the WordPress visual editor.

Note, the following method only works for your currently active theme. You’ll need to use the mce_css filter if you’d rather write a plugin which makes it portable across any theme.

Step 1 – Edit your theme’s functions.php file

Tell WordPress you want to use your own stylesheet. Paste the following code towards the top of your functions.php file.

// use a custom visual editor stylesheet
add_editor_style( 'style.css' );

As you can see, we’re just pointing to your theme’s existing style.css so it will inherit those styles.

Step 2 – View results

Login to WordPress & edit an existing page or post in visual editor mode. You should now see that everything matches your website. If not, do a shift/command + R to refresh the page.

Step 3 – Tweak your styles (optional)

If your site is like ours, you have a sidebar. The new styling we set above is great, but the problem is the WordPress visual editor doesn’t reflect the true width of the post.

In our case, the main content section (left side) is 650px wide. We want to replicate that in our editor so we added the following css in our theme’s style.css file.

body#tinymce.wp-editor { 
    max-width:650px; 
    margin:10px; 
}

You could also use a percentage if your site has fluid width.

For those of you who need text displayed right-to-left, you can style the visual editor by using the body#tinymce.rtl class. This has been included in WordPress since version 3.4.

Now you’re done!

Further enhancements

If you prefer to have a completely separate stylesheet for your WordPress visual editor, you can easily do that. Why would we want to do that? Here are a couple of reasons:

It’s easier to keep things separate from the main theme’s stylesheet
No need to load an entire stylesheet just for the visual editor
You created a parent theme and want to give child themes the ability to override the styles

Leave out the optional stylesheet parameter so the function looks like this:

// custom TinyMCE editor stylesheet editor-style.css
add_editor_style();

Excluding the optional parameter will default to editor-style.css. You’ll need to create that file in your theme directory and add any styles in there. Just make sure to reference the correct classes and/or ids otherwise you’ll have trouble.

/* example styling the WordPress visual editor */
body#tinymce.wp-editor { 
    max-width:650px; 
    margin:10px; 
}
body#tinymce.wp-editor h1 { 
    font-size:24px; 
}

We used a browser add-on like Firebug or the native Developer Tools in Chrome & Safari to figure out what id & class to reference.