Using WordPress ‘add_editor_style()’ PHP function

by

The add_editor_style() WordPress PHP function allows you to add custom stylesheets to the TinyMCE editor. You can specify a stylesheet name, or an array of stylesheet names, relative to the theme root. By default, it refers to ‘editor-style.css’. The function also automatically creates a corresponding RTL stylesheet (e.g., ‘editor-style-rtl.css’) if it doesn’t exist.

Usage

Here’s an example of how to use this function in your theme’s functions.php file:

// Registers an editor stylesheet for the theme
function my_theme_add_editor_styles() {
    add_editor_style( 'custom-editor-style.css' );
}
add_action( 'admin_init', 'my_theme_add_editor_styles' );

This will apply the styles defined in ‘custom-editor-style.css’ to the TinyMCE editor.

Parameters

  • $stylesheet (array|string) – Optional. The name of the stylesheet or an array of stylesheets, relative to theme root. Defaults to ‘editor-style.css’.

More information

See WordPress Developer Resources: add_editor_style()
This function was introduced in version 3.0.0 of WordPress. As of version 3.4, the TinyMCE body has a .rtl CSS class. You may use this class to add any RTL styles to the main stylesheet instead of relying on automatically generated RTL stylesheets.

Examples

Adding Google Fonts

Add Google Fonts to your editor styles. Remember to encode commas in the URL.

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

Dynamic Styles from Theme Mods

Add dynamic styles based on theme modifications. In this example, we’re setting the background color of the editor’s body.

add_filter('tiny_mce_before_init','my_theme_editor_dynamic_styles');
function my_theme_editor_dynamic_styles( $mceInit ) {
    $styles = 'body.mce-content-body { background-color: #' . get_theme_mod( 'background-color', '#FFF' ) . '}';
    if ( isset( $mceInit['content_style'] ) ) {
        $mceInit['content_style'] .= ' ' . $styles . ' ';
    } else {
        $mceInit['content_style'] = $styles . ' ';
    }
    return $mceInit;
}

Different Styles for Different Post Types

Apply different editor styles based on the post type being edited.

function my_theme_add_editor_styles() {
    global $post;
    $post_type = 'posttype';
    if (isset($_GET['post_type']) && $post_type == $_GET['post_type']) {
        add_editor_style( 'css/editor-style-' . $post_type . '.css' );
    }
    if (is_object($post) && $post_type == get_post_type($post->ID)) {
        add_editor_style( 'css/editor-style-' . $post_type . '.css' );
    }
}
add_action( 'admin_init', 'my_theme_add_editor_styles' );

Adding an Editor Stylesheet

The following function, add_theme_editor_styles(), uses the add_editor_style() function to add a stylesheet ‘custom-editor-style.css’ to the TinyMCE editor. This function is then hooked into the admin_init action.

function add_theme_editor_styles() {
  add_editor_style( 'custom-editor-style.css' );
}
add_action( 'admin_init', 'add_theme_editor_styles' );

Adding Styles Based on Post Type

You can apply a specific editor stylesheet based on the type of post being edited. This example assumes that you have stylesheet files named in the format editor-style-{post_type}.css in your theme’s directory.

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

Adding Styles from Google Fonts

You can include styles from Google Fonts by encoding the URL and passing it to add_editor_style(). This example adds the Lato font in three different font weights.

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

Adding Styles from a Sub-directory

If your stylesheets are located in a sub-directory, you can specify the path when calling add_editor_style(). This example assumes your stylesheets are in a directory named ‘css’.

function add_sub_dir_editor_styles() {
  add_editor_style( 'css/editor-style.css' );
}
add_action( 'after_setup_theme', 'add_sub_dir_editor_styles' );

Using Gutenberg Editor Styles

When using the Gutenberg editor, you need to call add_theme_support( 'editor-styles' ); before calling add_editor_style(). This example adds ‘editor-style.css’ to the Gutenberg editor.

function add_gutenberg_editor_styles() {
  add_theme_support( 'editor-styles' );
  add_editor_style( 'editor-style.css' );
}
add_action( 'admin_init', 'add_gutenberg_editor_styles' );