Having a lot of difficulty getting add_editor_style() to load into source code

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.

Screenshot of using Chrome Developer Tools on my own dev site


You should also read the Codex page for add_editor_style().