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 27 year old California girl living in England (I fell in love with a Brit!). I like to inject a little #girlpower into the WordPress development community by teaching women how to be coding badasses. 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

Leave a Reply

(Enter your URL then click here to include a link to one of your blog posts.)

This site uses Akismet to reduce spam. Learn how your comment data is processed.

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