add_editor_style() │ WP 3.0.0

Connects a custom CSS file for the TinyMCE visual editor.

It searches for the specified file in the current theme directory (and parent theme if a child theme is used). Then:

  • If the file is found, it is connected
  • If not found, the function tries to find and connect the file editor-style.css from the theme folder.

If the specified file exists in both the child and parent theme, both style files will be connected.

This function also connects styles for the Gutenberg Block Editor. Read the specifics of connection here.

When to call the function?

The function should be called before TinyMCE is configured, for example on hooks:

Do not attach:

  • to init, because it is only needed for the admin panel.
  • to admin_init, because it triggers on AJAX.

To connect CSS from another location (for example, a plugin) — use the filter mce_css.

RTL (right-to-left writing)

This function automatically adds another style file with the rtl prefix, for example, editor-style-rtl.css. If this file does not exist, it is removed before adding styles to TinyMCE. If an array of style files is passed, the RTL prefix is added only for the first file.

Starting from version 3.4, the <body> tag of TinyMCE has the class .rtl. It is better to use this class and add any RTL styles to the main stylesheet.

Notes:

Since version 3.4, WordPress will connect the stylesheet file specified in the $stylesheet parameter only if it exists - the is_file() check has passed. Therefore, for example, if you pass the string editor.css?ver=1.0, it will not work.

Similar hooks:

  • enqueue_block_assets — allows you to connect styles and scripts for both the frontend and the block editor (including inside iframes). It is used for common styles and scripts of blocks that should be everywhere. For example, for CSS that styles blocks on the site and in the editor.

  • enqueue_block_editor_assets — allows you to connect styles and scripts only in the Gutenberg editor (in the admin panel). It is used for resources that are needed exclusively for the editor's operation (for example, block settings panel, styles for the panel, etc.).

No Hooks.

Returns

null. Returns nothing.

Usage

add_editor_style( $stylesheet );
$stylesheet(string/array)

Path to the stylesheet relative to the theme folder.

For example, if the file is in the theme folder, you just need to specify the file name: my-editor-style.css.

You can specify multiple paths in an array.

Default: "editor-style.css"

Examples

4

#1 Use of theme styles

You can also include theme styles in this file using the CSS @import rule. Do everything as in the first example and in the file editor-styles.css add this line:

@import url( 'style.css' );

/* reset rules. Indicate zero indent and white background */
body { padding: 0; background: #fff; }

It is assumed that the file editor-styles.css lies in the theme directory and theme style file (style.css) also lies in this directory. If the theme styles file (style.css) lies in the css folder of theme directory, the path needs to be such:

@import url ('css/style.css' );
2

#2 Styles for the Gutenberg Block Editor 

add_action( 'after_setup_theme', 'guten_editor_styles' );

function guten_editor_styles(){

	add_theme_support( 'editor-styles' ); // обязательно!
	add_editor_style( 'style-editor.css' );

}

Now you need to create a file style-editor.css in the root of the theme and write css styles there. Read more.

0

#3 Connect the style file to the WordPress visual editor

Let's connect the stylesheets file to the WordPress TinyMCE editor. As a result, when editing a post, we will see stylized content. For example, you can copy the styles from the front of the site and when editing the post, we will immediately see how the content looks on the front-end.

First, add the following code to the theme file functions.php:

add_action( 'current_screen', 'my_theme_add_editor_styles' );
function my_theme_add_editor_styles() {
	add_editor_style( 'editor-styles.css' );
}

Then, create a file named editor-styles.css in the theme directory. And write in it some CSS rules that will be applied to the TinyMCE visual editor. The content of the file may look like this:

body#tinymce.wp-editor { 
	font-family: Arial, Helvetica, sans-serif; 
	margin: 10px; 
}

body#tinymce.wp-editor a {
	color: #4CA6CF;
}
0

#4 Select a style file based on the post type

To connect a style file based on what post type we are editing, you can use the following code in the functions.php. It is assumed that the style files with the names: editor_styles_{post_type}.css is already in the theme folder.

add_action( 'current_screen', 'my_theme_add_editor_styles' );
function my_theme_add_editor_styles($screen){
	if( $screen->base !== 'post' ) return;

	global $post;

	$post_type = isset($post->post_type) ? $post->post_type : ( isset($_GET['post_type']) ? $_GET['post_type'] : 'post' );

	add_editor_style( 'editor_styles_' . $post_type . '.css' );
}
0

#5 Using Google fonts

The Google fonts API allows you to connect multiple variants of the font (comma separated options in the link). Commas must be encoded before the string is passed to add_editor_styles(). It looks like this:

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

Notes

  • Global. Array. $editor_styles

Changelog

Since 3.0.0 Introduced.

add_editor_style() code WP 7.0

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 );
}

TinyMCE (editor)

Scripts and Styles