How to Style the WordPress Visual Editor

The WordPress visual editor applies styles to certain formats… like headings:

The default visual editor styles in WordPress

That’s not very pretty, is it?

What if you could make those styles actually match your theme? This would make the visual editor look more like a real preview of your post.

YOU CAN!

Step 1: Create the Stylesheet

Inside your theme folder, create a new CSS file called editor-style.css

This is where you’ll be putting all of your custom CSS. You can even import Google fonts using the @import feature. Here’s an example of what mine might look like:

/* Import Google Fonts */
@import url(http://fonts.googleapis.com/css?family=Playfair+Display:400,700,400italic,700italic);

/* Set the visual editor width to the width of my blog content area */
body {
    max-width: 683px;

    /* This is also where you can edit the paragraph text. Uncomment to use:
     * color: #222;
     * font-family: Arial, sans-serif;
     * font-size: 15px;
     */
}

/* Style heading tags */
h1, h2, h3, h4, h5, h6 {
    color: #ff7878;
    font-family: 'Playfair Display', 'EB Garamond', Georgia, serif;
    font-weight: normal;
    line-height: 1.1;
}

/* h1 */
h1 {
    color: #6B6B6B;
    font-size: 36px;
    margin: 0 0 5px;
    text-align: center;
}

/* h2 */
h2 {
    background: #ffe1e3;
    border: 4px double white;
    color: #6B6B6B;
    font-size: 30px;
    margin: 20px 0 20px;
    padding: 5px;
    text-align: center;
}

/* h3 */
h3 {
    border-bottom: 4px solid #efebe8;
    color: #546164;
    font-size: 24px;
    margin: 0 auto 15px;
    padding-bottom: 5px;
}

/* Captions */
.wp-caption {
    background: #efebe8 !important;
    padding: 5px !important;
}

Okay, so you’ve added your stylesheet. Now what? How do we get it to show up?

Step 2: Editing your functions.php file

In order to get WordPress to recognize your custom stylesheet, you have to tell WordPress it exists. To do that, you have to add a code snippet to your theme’s functions.php file:

function my_theme_add_editor_styles() {
    add_editor_style();
}
add_action( 'after_setup_theme', 'my_theme_add_editor_styles' );

That’s it!

Here’s how my example looks:

Custom stylesheet for the WordPress visual editor

I think this feature is pretty under-utilized, but it’s certainly a nice one. I think it’s particularly great for clients who really like a more accurate “what you see is what you get” experience.

Will you be customizing your visual editor?

Photo of Ashley
I'm a 30-something California girl living in England (I fell in love with a Brit!). My three great passions are: books, coding, and fitness. more »

Don't miss my next post!

Sign up to get my blog posts sent directly to your inbox (plus exclusive store discounts!).

You might like these

15 comments

  1. This is awesome. I bookmarked this to come back to and I’d love to put it into practice. Is this possible and/or as easy to do if we’re using Book Host? I’m not very experienced in stuff like this!

Recent Posts

    Random Posts