add_editor_style() │ WP 3.0.0

Loads CSS files to style the block editor content and the TinyMCE visual editor.

The function registers files that WordPress enqueues when configuring the editor. Missing local files are skipped. When called without arguments, it uses the file editor-style.css from the theme folder.

If a child theme is used:

• TinyMCE enqueues the found files from both themes: first the parent theme, then the child theme.
• The block editor uses the child theme file and, if it is missing, uses the parent theme file.

No Hooks.

Returns

null. Nothing is returned.

Usage

add_editor_style( $stylesheet );

$stylesheet(string/array)

Path to the CSS file relative to the theme folder or a full HTTP/HTTPS URL.

For example, for a file in the theme root, specify my-editor-style.css, and for a file in a subfolder - css/editor.css.

Pass multiple files as an array.

Default: 'editor-style.css'

Examples

#1 Connect the style file to the WordPress visual editor

Add the following to functions.php theme:

add_action( 'after_setup_theme', 'my_theme_add_editor_styles' );

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

Create a file editor-styles.css in the root of the theme. For example:

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

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

These selectors are intended for TinyMCE. For the block editor, use regular selectors, as in example #5.

#2 Use of theme styles

For TinyMCE, you can import theme styles into a file editor-styles.css:

@import url( 'style.css' );

body {
	padding: 0;
	background: #fff;
}

The path in @import is relative to the location of the editor-styles.css file. If both files are in the theme root, just use style.css. If the theme file is in a subfolder css, specify css/style.css.

For the block editor, it’s preferable to register the files separately:

add_action( 'after_setup_theme', 'my_theme_add_editor_styles' );

function my_theme_add_editor_styles() {
	add_theme_support( 'editor-styles' );

	add_editor_style( [
		'style.css',
		'editor-styles.css',
	] );
}

Make sure that the general theme styles do not break the editor elements.

#3 Select a style file based on the post type

The example connects editor_styles_post.css for posts and editor_styles_page.css for pages. The files must be located in the root of the theme.

add_action( 'after_setup_theme', 'my_theme_setup_editor_styles' );
add_action( 'current_screen', 'my_theme_add_post_type_editor_styles' );

function my_theme_setup_editor_styles() {
	add_theme_support( 'editor-styles' );
}

function my_theme_add_post_type_editor_styles( $screen ) {
	if ( 'post' !== $screen->base ) {
		return;
	}

	$styles = [
		'post' => 'editor_styles_post.css',
		'page' => 'editor_styles_page.css',
	];

	if ( isset( $styles[ $screen->post_type ] ) ) {
		add_editor_style( $styles[ $screen->post_type ] );
	}
}

Works on the post creation and editing screens.

#4 Using Google fonts

You can pass the URL of the CSS file with the font description:

add_action( 'after_setup_theme', 'my_theme_add_editor_fonts' );

function my_theme_add_editor_fonts() {
	add_theme_support( 'editor-styles' );

	add_editor_style( [
		'https://fonts.googleapis.com/css?family=Lato:300,400,700',
		'editor-styles.css',
	] );
}

In the editor-styles.css file, set the font:

body {
	font-family: 'Lato', sans-serif;
}

Commas in the URL are automatically encoded before being connected to TinyMCE by WordPress.

In the block editor, CSS is loaded by the server by URL through wp_remote_get(). Therefore, the URL must be accessible to the server. A request error, for example due to a self-signed SSL certificate, prevents the CSS from being loaded.

#5 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' );
}

In a block theme, you can remove the line add_theme_support( 'editor-styles' ): this support is enabled automatically.

Create a file style-editor.css in the root of the theme:

body {
	font-family: Arial, sans-serif;
	color: #222;
	background-color: #fff;
}

a {
	color: #0073aa;
}

The body rules will apply to the editor content area.

For more details read here.

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