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

1 Views

I have tried many different things to get add_editor_style() to load into the source code on my site without any luck. I would like to use editor-style.css to customize CSS properties for my WordPress WYSIWYG. However, I am unable to get it working. Even when I look in Chrome Inspector’s Resources tab and scroll down to “Stylesheets” I don’t see any listing of editor-style.css

Here’s what I tried so far:

Read More
  1. Placed editor-style.css in the root of my theme directory
  2. <?php add_editor_style(); ?> is placed in my functions.php file for my theme (I’ve even moved around this function call to editor style in my functions.php to see if that would do the trick … no luck.
  3. All of my CSS and JavaScripts are registered and enqueued in my functions.php file

Is there some type of override going on that I am not aware of?

Post Views: 1

Related posts

Leave a Reply

3 comments

  1. 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().

  2. Had difficulty until finding parent theme was calling add_editor_style()

    The Twenty Fourteen should wrap this so it’s possible dequeueing the call with remove_action, not editing the parent functions.php

  3. Correct Answer: Put add_editor_style('editor-style.css'); in a function hooked to after_setup_theme action hook. Pass the name of file you want to use for editor CSS as the argument, or skip the argument if you want the name to be ‘editor-style.css’ as it’s optional.

    Wrong Answer: The optional parameter doesn’t seem to be optional. This works for me:

    add_editor_style('editor-style.css');

    And yep, it’s okay to call it directly in your theme’s functions.php.