Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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:

  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?

share|improve this question
    
On which action do you call add_editor_style()? –  toscho Jul 29 '12 at 20:36
    
I'm calling it directly within my theme as is. Is that incorrect? –  Brian Jul 29 '12 at 22:12
    
You should always wait until after_setup_theme. Does that work? –  toscho Jul 29 '12 at 22:34
    
It doesn't...I activated the TwentyEleven theme and I don't even see editor-style.css getting loaded into the source here either. Am I missing something amount the way this works? I see editor-style.css in TwentyEleven's theme root... –  Brian Jul 29 '12 at 22:47
    
The editor style is applied to the iframe in TinyMCE’s visual editor only. Make sure to inspect exactly that. Try to set a red background for .mceContentBody to see immediately if the CSS is used. –  toscho Jul 29 '12 at 23:03
show 2 more comments

2 Answers 2

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

share|improve this answer
    
@Brian Did my answer work for you? –  bungeshea Jan 20 '13 at 6:49
add comment

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.

share|improve this answer
2  
The parameter is actually optional. WordPress will include the editor-style.css stylesheet just fine if no parameter is passed. Also: you should always put functional code inside callbacks hooked into an appropriate action hook in functions.php. –  Chip Bennett Jan 18 '13 at 19:26
    
Thanks for the clarification. –  Abhinav Sood Jan 19 '13 at 18:22
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.