Tutorials WordPress

How to Add Custom WordPress Editor Styles (add_editor_style)

Updated

Written by

Dave Warfel

Reading Time

5 minutes

If you buy something from one of our links, we may earn a commission.

Isn’t it annoying when you have to keep hitting the Preview button every time you want to see what your WordPress post will actually look like when it’s published? What if I told you there’s a way to add custom WordPress editor styles to the admin area? Awesome, right?!

Basically, you can take the same styles that your WordPress theme is using, and apply them to the post editor screen when you’re writing a post. Preview your WordPress posts & pages in real-time, as you write them.

The best WordPress themes will have already taken care of this for you, but many free themes (and even some premium ones) don’t bother to take this extra step.

If you’re a theme developer, or building a custom theme for a client, custom editor styles are a great way to add some polish to the editing experience.

Let’s dive in and take a look at…

  • how to add custom editor styles using WordPress’ add_editor_style function
  • which styles you should add to the post editor
  • how to format your editor-style.css file

Here’s what my WordPress editor styles look like when editing a post:

Custom WordPress editor styles animation

Really similar to the actual website, right?!

add_editor_style WordPress Function

First, let’s take a look at the add_editor_style function, what it does, where it goes, and the parameters we can use with it.

Where to place the code

Because WordPress editor styles are directly related to your theme, we’ll be placing this code in our theme’s functions.php file.

add_editor_style();

What add_editor_style actually does

When you reference add_editor_style in your theme, it tells WordPress to load a separate CSS file for the TinyMCE visual editor on your WordPress post editing screen.

This separate CSS stylesheet is only loaded in the backend of WordPress (not on your website itself), and only applies to the contents in the visual editor. It will not affect any other part of the WordPress admin area.

WordPress doesn’t specify exactly where in the functions.php file the code should be placed, but I recommend following the convention of the default WordPress themes, Twenty Seventeen, Twenty Sixteen, etc., and placing it inside a function that is hooked to the after_setup_theme action hook.

The simplest example would look like this:

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

If you’re using a theme that has already defined a function for setting up theme options, you’ll likely see other features like:

function themename_setup() {

	add_theme_support( 'automatic-feed-links' );
	add_theme_support( 'title-tag' );
	add_theme_support( 'post-thumbnails' );
	add_theme_support( 'html5', array(
		'search-form',
		'comment-form',
		'comment-list',
		'gallery',
		'caption',
	) );
	add_theme_support( 'customize-selective-refresh-widgets' );
	add_editor_style();
}
add_action( 'after_setup_theme', 'themename_setup' );

add_editor_style parameters

There is only one parameter, and it’s optional. You can define a specific filename for your editor styles. By default, just using add_editor_style(); will look for a file named editor-style.css placed in the root of your theme directory (i.e. /wp-content/themes/themename/).

If you’re OK using that default filename, and placing your CSS file in the root of your theme, then the simple add_editor_style(); will suffice.

If you want to put the CSS file in another folder, or call it something different, your code would look like this:

add_editor_style( 'css/custom-editor-styles.css' );

You would then need to create a file called custom-editor-styles.css, and place it in this directory:

/wp-content/themes/yourtheme/css/

What Do I Include in my WordPress Editor Styles?

Great question! You certainly DON’T want to include everything in your website’s style.css file. Remember, we’re just targeting the main content (think just the content after the page title and before the comments start). Here’s a rough checklist of which styles should be included, but keep in mind each scenario could be different.

Do include styles pertaining to:

  • Font family & font size
  • Links (<a>)
  • Headlines (<h2>, <h3>, etc.)
  • Blockquotes (<blockquote>)
  • Tables (<table>)
  • Images & captions
  • <pre> and <code> elements
  • Horizontal rules (<hr />)
  • Messages, alerts & callout boxes
  • Buttons, CTA (call-to-action) elements
  • Any custom CSS classes you use often (in the main content of your posts & pages)
  • Any third-party framework elements (i.e. Bootstrap, Foundation, etc.)

Do NOT include styles pertaining to:

  • Your site’s header, footer or sidebar
  • The layout or structure of your page
  • CSS animations or transitions

You could technically add Bootstrap or Foundation grid styles, and then use those classes to create rows/columns within your content, but this can quickly get messy. I would advise against it.

Formatting the WordPress Editor Styles CSS File

I manually copied items from my site’s style.css file, and hand-picked which ones to include in my editor styles. I broke my styles into sections, as follows:

View my complete editor-style.css file here.

  • 1.0 – Body & Base Elements
  • 2.0 – Headlines
  • 3.0 – General Elements
  • 3.1 – Links
  • 3.2 – Images
  • 4.0 – Tables
  • 5.0 – Buttons
  • 6.0 – Custom CSS Classes
  • 7.0 – Alerts & Messages
  • 8.0 – Inherited from Twenty Seventeen
  • 9.0 – Text Editor

The 9.0 – Text Editor section is there to change the appearance of the “Text” mode in the WordPress editor (as opposed to the Visual mode). When looking at the raw code, I prefer to use a dark background with light text, and a larger font size. The CSS classes I’ve used here should target just the Text editor, and not the Visual styles.

.wp-editor-container .wp-editor-area {
	...your text editor styles here...
}

Here’s my preferred styling. I increase the padding, darken the background, lighten the text, increase the font size, and adjust the letter spacing. This makes the WordPress Text Editor a little easier on my eyes.

.wp-editor-container .wp-editor-area {
	padding: 2rem 12rem;
	background: #232323;
	color: #999;
	font-size: 17px;
	letter-spacing: -0.03rem;
}

Hopefully this provides you with an easy way to implement your website’s actual styles into the WordPress editor. If you have any trouble implementing WordPress editor styles onto your site, or have additional tips, please let me know in the comments.

Dave Warfel

LinkedIn  •  X (Twitter)
Dave has been working with WordPress since 2011. He's built 100s of client sites and almost a dozen of his own. He's tested almost every plugin you can think of, hosted with at least 10 different companies, and gone down every SEO rabbit hole you can imagine. When's he's not tinkering with new software, you'll find him in the mountains of Colorado, trail running, summiting peaks, and rippin' downhills on his mountain bike. 🏔️🏃🚴🤸

10 responses to “How to Add Custom WordPress Editor Styles (add_editor_style)”

  1. Sarah Avatar
    Sarah

    It would be great to have some practical examples, for instance making ordered lists look right.

    1. Dave Warfel Avatar

      Hey Sarah — Thanks for taking the time to comment.

      I’m not sure if you looked through my own editor-style.css file that I linked to above, but if you did, you didn’t find any styles for ordered lists (<ol>). The reason for that is because usually, the default styling for ordered lists is very close to how most themes display them. So there’s no need to apply specific styling.

      Making them “look right” could be different for each specific theme.

      What theme are you using? If you send me a link to the theme, I’ll take a look and provide you with an example of how you can customize the ordered lists.

      In general, to create a basic ordered list style, you would use code that looks something like this:

      ol {
      	margin: 1rem 0;
      	padding-left: 2rem;
      }
      ol li {
      	margin-bottom: 0.75rem;
      }

      That should apply some basic spacing, and then numbers for each list item should be applied automatically.

      I hope that helps answer your request, and if you want to let me know some specifics you are trying to achieve with the theme you are using, I’m happy to give you some specific code examples.

    2. Sarah Avatar
      Sarah

      I ended up with something a bit more intense than that because I needed the whole 1.1.10 style of numbering and I needed to see it both in the editor and in the theme.

      I’ve certainly noticed that themes tend not to honour lists well – a bugbear :) – and I’m obviously swimming against the tide.

    3. Dave Warfel Avatar

      Gotcha. Did you get it all figured out?

  2. Sarah Avatar
    Sarah

    Yes, thanks

  3. Alex Avatar
    Alex

    What a terrific article! Many thanks! I spent a long time trying to find suitable plugins for this, but there’s practically nothing. And there are lots of articles from 2011 that no longer apply. So this is how easy it was, eventually.

    (I wish I could include the 4 buttons above in my own comment field, but when I did that using the Basic Comment Quicktags plugin, the buttons ended up being next to invisible, grey on grey. They’re very nice here… I wonder how you accomplished that.) ;-)

    1. Dave Warfel Avatar

      Thanks for the feedback, Alex :-)

      Yeah, the default styles for the Basic Comment Quicktags plugin weren’t what I was looking for either. The way I got them to appear as above is by adding my own CSS.

      You can view my custom CSS here.

      You could probably just use the CSS in a child theme or the Additional CSS in the Customizer, but I went a step further and removed the default styles as well. Place the PHP code in the functions.php file of a child theme, or better yet, use the Code Snippets plugin.

    2. Alex Avatar
      Alex

      Thanks a lot for your help, Dave. I do use a child theme, so your code should be easy to implement and modify to suit my theme. Thank you also for the plugin recommendation – looks terrific! Downloading it right away.

  4. Mary Avatar
    Mary

    Dave. Truly thank you for your gorgeous post about it.

    1. Dave Warfel Avatar

      Thank you for taking the time to leave a gorgeous comment, Mary. 🙂

Leave a Comment