You shouldn’t call add_editor_style()
directly in your functions.php
file. Instead, you should wait until the plugins and themes have been loaded:
add_action( 'after_setup_theme', 'add_editor_style' );
If you already have a function hooked to after_setup_theme
, you can call add_editor_style()
inside there instead.
You then need create a file called editor-style.css
and place it in your theme direcrory. You must not place it in a subfolder; otherwise it will not be found. Try using this code in editor-style.css
, just to see if it is working:
body#tinymce.wp-editor {
font-family: Arial, Helvetica, sans-serif;
margin:10px;
}
body#tinymce.wp-editor a {
color: #ffa500;
}
If the editor appears in a different font with orange links, then it works!
Contuary to what you are assuming, editor-style.css
will not show up under the “Stylesheets” section of Chrome’s developer tools. This is because the visual editor is loaded in an <iframe>
element; essentially it is on another webpage that is embedded into the new post page. On this external page is where the editor-style.css
stylesheet is loaded.
If you really want to check is editor-style.css
is loaded, you can right-click on the visual editor body and choose Inspect Element from the context menu. Just above the line that is highlighted, you should see a <link>
element pointing to your editor-style.css
file.
You should also read the Codex page for add_editor_style()
.