How to Add Custom WordPress Editor Styles (add_editor_style)

WordPress Custom Editor Styles (add_editor_style)

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.

What Are Your Thoughts?

All fields are required. Your email will not be published.

You can use standard <code> and <pre> tags to post code examples, or a service like codepen.io.