add_editor_style()
Links (connect) specified stylesheets CSS file to the TinyMCE visual editor.
The function checks if there is a CSS style file specified in the $stylesheet parameter (the file path must be specified relative to the theme directory). If the file is found, it connects. If not found, the function tries to find and connect the default file editor-style.css from the theme directory.
If you use a child theme, both the child and parent directories are checked, and if there are two files, both will be linked.
The function should be called before TinyMCE is configured, for example on hooks: current_screen or admin_menu. It's a bad idea to call this function on hooks: init (because it is necessary only in admin), admin_init (because it is triggered by AJAX).
To connect a file not relative to the theme directory, but, for example, relative to the plugin directory, use the filter mce_css.
RTL (right-to-left)
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 this function, -rtl is only added for the first stylesheet.
Since version 3.4 the TinyMCE <body> has .rtl CSS class. It is a better to use that class and add any RTL styles to the main stylesheet.
Notes
-
Since version 3.4. WordPress will link specified in $styleweet file, only in the case of its existence. So if you pass the string editor.css?version=1.0 it will not work.
-
In version 3.4. when you connect a file from a child theme, the function did not attach this file if a file with the same path was already connected from the parent theme. In version 3.5. this behavior has been changed and files are connected from both the child and the parent theme.
- The function uses a global variable: $editor_styles.
No Hooks.
Returns
null. Nothing (null).
Usage
add_editor_style( $stylesheet );
- $stylesheet(array|string)
- Stylesheet name or array thereof, relative to theme root.
Default: 'editor-style.css'
Usage
add_editor_style( $stylesheet );
- $stylesheet(array/string)
- The path to the style file relative to the theme folder. For example, if the file is located in the theme folder, you just need to specify the file name - 'my-editor-style.css'. Multiple files can be passed in array.
Default: 'editor-style.css'
Examples
#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 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.
#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;
} #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' );
} #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() add editor style code WP 6.8.1
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 );
} 