How to style the WordPress Visual Editor

If you’ve taken the time to dress your custom theme up in a tuxedo and button-up shirt, it behoves you to consider putting a bow tie on the WordPress visual editor.

In other words, what beauty you implement on the front-end should likewise exist—to some degree, anyway—in the WordPress back-end. At the very least, a little attention should be paid to the WP editor.

Let’s say you designed a theme that allows the use all 9 standard post formats: aside, gallery, link, image, quote, status, video, audio, and chat.

In the WordPress admin, the visual editor (WYSIWYG) will not respect your, shall we say, “front-facing” directives unless you tell it to. The typography will default to the incongruent/un-styled/considered serif font…

Let’s say that at a minimum, when composing posts, we’d like the type/fonts we see in the WP editor to match what it/they looks like on the front-end. If we use a H2, it should resemble, if not mirror, what our front-end h2 would look like. Same for paragraphs, strong tags and block quotes.

Defining admin styles

Or: How to make What You See actually equal What You Get

Luckily, there’s a function for this! This function allows you to use custom CSS to style the WordPress TinyMCE visual editor.

In functions.php, we simply add the following function:

add_editor_style();

Next, we create a CSS file named editor-style.css and save it in the theme directory. Now we’re ready to start defining our admin styles.

Target the Visual Editor WYSIWYG

Our first order of business is to make sure whatever we write in the editor is never wider than 650px (same as we defined in our style.css for the front-end of things).

First, we need to target the very specific part of the page and of the WordPress visual editor. The CSS class “.mceContentBody” is assigned by WordPress to the content part of the WYSIWYG editor. That’s the class we’ll be targeting.

To do so, in the editor-style.css file we just created, we add the following style declarations:

html .mceContentBody {
	max-width: 650px;
}

With that in place, things are already starting to take shape. Now, we can style the headings, paragraphs and blockquotes to match our style.css by simply copy/pasting the CSS rules.

sample editor-style.css

Visual Editor Styles for RTL languages

While we’re at it, we might as well style the editor for right-to-left languages. If you don’t write in a RTL language, you can still make intuitive decisions on how things should look. In any case, its easy enough. Positioned and floated elements as well as lists and tables are key elements to consider re-defining for RTL. At a minimum, we’ll want to target the .mceContentBody class and set the text/writing direction to RTL (this is more CSS and not strictly WordPress specific). In the theme directory, create a CSS file called editor-style-rtl.css and include the following CSS definition:

html .mceContentBody {
	direction: rtl;
	unicode-bidi: embed;
}

After that, have a look at the styles you defined in the editor-style.css and overwriting all the horizontal positioning attributes you set.

e.g. if inside editor-style.css you had:

li {
   text-align: left;
   float: right;
   clear: left;
}

in the editor-style-rtl.css, you’d have the following:

li {
  text-align: right;
  float: left;
  clear: right;
}

You can then go through and add similar rules for definition lists, table, captions, etc.

*** sample editor-rtl.css file ***

If you prefer to have all your styles in a CSS directory, go ahead and move the editor-style.css in there.

Hop back into the functions.php and adjust the add_editor_style() function you defined earlier to reflect this change so WordPress is able to find and utilize the styles.

add_editor_style('css/editor-style.css');

More than 1 stylesheet

The add_editor_style() accepts a $stylesheet parameter which is either a string with a path to a single stylesheet or an array of paths to multiple stylesheets. In the above example, we just had the one stylesheet so we’re done. If, however, you wanted to add another CSS files, you would do so in an array like so:

add_editor_style( array( 'css/editor-style.css', ‘path-to-another-css-file.css’ ) );

Google/Custom Fonts

Lets say you’re using a Google font on the front-end and would like to use that in the WordPress visual editor.

Google Fonts API provides a single URL for a CSS file that can include multiple variants of a type face, separated by commas. Commas in a URL need to be encoded before the string can be passed to add_editor_style.
codex

We need to define the “complex” Google font URL in a separate function then call that function as part of our add_editor_style() array.

To define a path to a Google stylesheet and encode the URL, we add the following in our functions.php file:

function twentyfourteen_font_url() {
$font_url = '';
/*
* Translators: If there are characters in your language that are not supported
* by Lato, translate this to 'off'. Do not translate into your own language.
*/
if ( 'off' !== _x( 'on', 'Lato font: on or off', 'twentyfourteen' ) ) {
$font_url = add_query_arg( 'family', urlencode( 'Lato:300,400,700,900,300italic,400italic,700italic' ), "//fonts.googleapis.com/css" );
}

return $font_url;
}

Simpler ???

function my_theme_add_editor_styles() {
$font_url = 'http://fonts.googleapis.com/css?family=Lato:300,400,700';
add_editor_style( str_replace( ',', '%2C', $font_url ) );
}
add_action( 'init', 'my_theme_add_editor_styles' );

Once we have the function defined, we simple have to go back to our add_editor_style() function and include it like so:

add_editor_style( array( 'css/editor-style.css', twentyfourteen_font_url() ) );

With that in place, you can simply use the font as you normally would. For instance, if the h2 of our theme uses Lato in a 700 weight, inside the editor-style.css you’d have:

h2 {
font-family: Lato, sans-serif;
font-weight: 700;
}

The quick/lazy/reductive approach

As opposed to defining new CSS rules and mirroring them, as you go, to your style.css rules, you can simply @import your entire styles into editor-style.css

At the very top of the editor-style.css file, add a call to import the style.css like so:

@import “style.css”;

Make sure the path to style.css is correct. e.g. if you moved the editor-style.css inside CSS directory, you’ll need to adjust the path to ../style.css

At this point the visual editor will likely be in disarray. From here, you’ll have to strategically target and adjust any CSS rules that are throwing things in the editor out of whack.

I’d only suggest this reductive approach if you just want to get up and running quickly as overwriting CSS rules one-at-a-time can be rather tedious not to mention importing an entire stylesheet but only actively using very little of it just incurs unnecessary overhead and slows down load-times. Nonetheless, its an option.

Style the editor based on Post Type

If you’ve defined and are using Custom Post Types, it makes sense to style them — as you did in the front-end — in the back-end/visual editor as well. Assuming you have multiple custom post types all styled differently, the first thing you’ll need to do is create a different stylesheet for each post type and save it in the theme directory.

The function we’ll implement will expect stylesheets with names consistent with the post type they[‘re supposed to style] style i.e. editor-style-{post_type}.css. So, if you created 3 post types for, say, clients, cats and dogs, you’d then need three stylesheets for the same: editor-style-client.css, editor-style-cat.css and editor-style-dog.css.

Once we have those stylesheets created and our desired CSS rules defined, we then need to define the function. Open functions.php and add the following:

function my_theme_add_editor_styles() {
global $post;
$post_type = get_post_type( $post->ID );
$editor_style = 'editor-style-' . $post_type . '.css';
add_editor_style( $editor_style );
}
add_action( 'pre_get_posts', 'my_theme_add_editor_styles' );