add_editor_style( array|string $stylesheet = 'editor-style.css' )

Add callback for custom TinyMCE editor stylesheets.


Description Description

The parameter $stylesheet is the name of the stylesheet, relative to the theme root. It also accepts an array of stylesheets. It is optional and defaults to ‘editor-style.css’.

This function automatically adds another stylesheet with -rtl prefix, e.g. editor-style-rtl.css. If that file doesn’t exist, it is removed before adding the stylesheet(s) to TinyMCE. If an array of stylesheets is passed to add_editor_style(), RTL is only added for the first stylesheet.

Since version 3.4 the TinyMCE body has .rtl CSS class. It is a better option to use that class and add any RTL styles to the main stylesheet.


Parameters Parameters

$stylesheet

(array|string) (Optional) Stylesheet name or array thereof, relative to theme root. Defaults to 'editor-style.css'

Default value: 'editor-style.css'


Top ↑

Source Source

File: wp-includes/theme.php

function add_editor_style( $stylesheet = 'editor-style.css' ) {
	global $editor_styles;

	add_theme_support( 'editor-style' );

	$editor_styles = (array) $editor_styles;
	$stylesheet    = (array) $stylesheet;

	if ( is_rtl() ) {
		$rtl_stylesheet = str_replace( '.css', '-rtl.css', $stylesheet[0] );
		$stylesheet[]   = $rtl_stylesheet;
	}

	$editor_styles = array_merge( $editor_styles, $stylesheet );
}

Top ↑

Changelog Changelog

Changelog
Version Description
3.0.0 Introduced.

Top ↑

More Information More Information

Allows theme developers to link a custom stylesheet file to the TinyMCE visual editor. The function tests for the existence of the relative path(s) given as the $stylesheet argument against the current theme directory and links the file(s) on success. If no $stylesheet argument is specified, the function will test for the existence of the default editor stylesheet file, editor-style.css, against the current theme directory, and link that file on success.

If a child theme is used, both the current child and parent theme directories are tested and both the files with the same relative path are linked with this single call if they are found.

To link a stylesheet file from a location other than the current theme directory, such as under your plugin directory, use a filter attached to the mce_css hook instead.



Top ↑

User Contributed Notes User Contributed Notes

  1. Skip to note 1 content
    Contributed by Codex

    Basic Example

    Add the following to the functions.php file of your theme.

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

    Next, create a file named custom-editor-style.css in your themes root directory. Any CSS rules added to that file will be reflected within the TinyMCE visual editor. The contents of the file might look like this:

    body#tinymce.wp-editor { 
        font-family: Arial, Helvetica, sans-serif; 
        margin: 10px; 
    }
    
    body#tinymce.wp-editor a {
        color: #4CA6CF;
    }
    
  2. Skip to note 2 content
    Contributed by majick

    If you want to add styles dynamically (eg. from theme mods) you can use the tiny_mce_before_init filter and add them to the content_style key.

    add_filter('tiny_mce_before_init','wpdocs_theme_editor_dynamic_styles');
    function wpdocs_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;
    }
    

    Note that any new lines or double quotes should be removed or double escaped in your CSS.

  3. Skip to note 3 content
    Contributed by Codex

    Using Google Fonts

    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.

    /**
     * Registers an editor stylesheet for the current theme.
     */
    function wpdocs_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', 'wpdocs_theme_add_editor_styles' );
    
  4. Skip to note 4 content
    Contributed by Codex

    Choosing Styles Based on Post Type

    To link a custom editor stylesheet file based on the post type being edited, you can use the following in the functions.php file of your theme. This assumes the stylesheet files with names in the form of editor-style-{post_type}.css are present directly under your theme directory.

    /**
     * Registers an editor stylesheet for the current theme.
     *
     * @global WP_Post $post Global post object.
     */
    function wpdocs_theme_add_editor_styles() {
    	global $post;
    
    	$my_post_type = 'posttype';
    
    	// New post (init hook).
    	if ( false !== stristr( $_SERVER['REQUEST_URI'], 'post-new.php' )
    			&& ( isset( $_GET['post_type'] ) === true && $my_post_type == $_GET['post_type'] )
    	) {
    		add_editor_style( get_stylesheet_directory_uri() . '/css/editor-style-' . $my_post_type . '.css' );
    	}
    
    	// Edit post (pre_get_posts hook).
    	if ( stristr( $_SERVER['REQUEST_URI'], 'post.php' ) !== false
    			&& is_object( $post )
    			&& $my_post_type == get_post_type( $post->ID )
    	) {
    		add_editor_style( get_stylesheet_directory_uri() . '/css/editor-style-' . $my_post_type . '.css' );
    	}
    }
    add_action( 'init',          'wpdocs_theme_add_editor_styles' );
    add_action( 'pre_get_posts', 'wpdocs_theme_add_editor_styles' );
    

    Note that the pre_get_posts action hook is used to ensure that the post type is already determined but, at the same time, that TinyMCE has not been configured yet. That hook is not run when creating new posts, that is why we need to use it in combination with the init hook to achieve a consistent result.

  5. Skip to note 5 content
    Contributed by olik9

    The example above can be rewritten simpler:

    function value( $ar, $key, $default = '' ) {
    	if ( is_array( $ar ) && isset( $ar[ $key ] ) ) { return $ar[ $key ]; }
    	//else
    
    	return $default;
    }
    
    /**
     * Registers an editor stylesheet for the current theme.
     *
     * @global WP_Post $post Global post object.
     */
    function wpdocs_theme_add_editor_styles() {
    	global $pagenow;
        global $post;
        $my_post_type = 'posttype';
     
        if ( ( ( 'post-new.php' === $pagenow ) && ( value( $_GET, 'post_type' ) == $my_post_type ) ) ||   // New post (init hook)
             ( ( 'post.php' === $pagenow ) && is_object( $post ) && ( get_post_type( $post->ID ) == $my_post_type ) ) ) {  // Edit post (pre_get_posts hook).
            add_editor_style( get_stylesheet_directory_uri() . '/css/editor-style-' . $my_post_type . '.css' );
        }
    }
    
    add_action( 'admin_init',    'wpdocs_theme_add_editor_styles' );
    add_action( 'pre_get_posts', 'wpdocs_theme_add_editor_styles' );
    
  6. Skip to note 6 content
    Contributed by Brad Davis

    If you are keeping your style files in a sub-directory, eg, css, you add the editor style with:

    /**
     * Registers an editor stylesheet in a sub-directory.
     */
    function add_editor_styles_sub_dir() {
        add_editor_style( trailingslashit( get_template_directory_uri() ) . 'css/editor-style.css' );
    }
    add_action( 'after_setup_theme', 'add_editor_styles_sub_dir' );
    
  7. Skip to note 7 content
    Contributed by Codex

    Reusing Your Theme Styles

    You can reuse the styles from your theme stylesheet file in your custom editor stylesheet file using the @import CSS rule. Working on the previous example, put the following instead into the custom-editor-style.css file.

    @import url( 'style.css' );
    
    /* Add overwrites as needed so that the content of the editor field is attractive and not broken */
    body { padding: 0; background: #fff; } 
    

    If necessary, change ‘style.css’ to the path to your theme stylesheet, relative to the custom-editor-style.css file.

You must log in before being able to contribute a note or feedback.