This is default wordpress add_editor_style function:

function add_editor_style( $stylesheet = 'editor-style.css' ) {

    add_theme_support( 'editor-style' );

    if ( ! is_admin() )

    global $editor_styles;
    $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 );

As you see if ( ! is_admin() ) return; is there and basically we cant add custom styles to frontend wp_editor.. What is proper solution for it?

  • What "frontend wp_editor" are you referring to? Likely, we'd need to see that code, as well. Feb 17, 2013 at 14:28
  • i added solution and example of a live page. Thank you for your time Feb 17, 2013 at 18:05

2 Answers 2


Here is my solution:

add_filter('the_editor_content', "firmasite_tinymce_style");
function firmasite_tinymce_style($content) {

    // This is for front-end tinymce customization
    if ( ! is_admin() ) {
        global $editor_styles;
        $editor_styles = (array) $editor_styles;
        $stylesheet    = (array) $stylesheet;

        $stylesheet[] = 'assets/css/custom.css';

        $editor_styles = array_merge( $editor_styles, $stylesheet );

    return $content;

Live Example: http://unsalkorkmaz.com/firmasite-social-buddypress-bbpress-theme-based-on-bootstrap/ Check comments wp_editor.. its loading bootstrap.css and google fonts etc..

This code is extra:

// Removing wordpress version from script and styles
add_action("wp_head", "firmasite_remove_version_from_assets",1);
function firmasite_remove_version_from_assets(){
    function remove_cssjs_ver( $src ) {
        if( strpos( $src, '?ver=' ) )
            $src = remove_query_arg( 'ver', $src );
        return $src;
    add_filter( 'style_loader_src', 'remove_cssjs_ver', 999 );
    add_filter( 'script_loader_src', 'remove_cssjs_ver', 999 );

Its removing version from styles and scripts. So browser wont load same style double times.

  • You are loading that custom.css stylesheet twice-- once with a version number and once without. Take a look in the source, but it is easier to spot using the Firefox plugins JSView or HttpFox. Browser caching probably mediates the problem somewhat, but I'd still try to sort it out.
    – s_ha_dum
    Feb 17, 2013 at 16:29
  • Dunno what can i do about it. I didnt even try to fix that. Any opinion? Feb 17, 2013 at 16:33
  • There is no iframe on that page. I searched the whole source, several times. I am not exactly sure why you are getting two copies of that stylesheet. I'd start commenting code until I could isolate the lines repsonsible, then try to work out why.
    – s_ha_dum
    Feb 17, 2013 at 16:54
  • there is iframe.. #wp-comment-editor-container becomes iframe.. You can check it with chrome/firefox inspect.. just right click to textarea and inspect Feb 17, 2013 at 17:23
  • i added solution to answer Feb 17, 2013 at 17:53

add_editor_style is not meant to load a stylesheet on the front end. It is meant to make the visual editor display on the backend of the site look more like the final version of the post on the front end. There is no filter (you found the function source) that lets you change that behavior.

If you have an editor on the front end, style it just like you style anything else- on the front end-- by editing style.css or by conditionally loading another stylesheet with wp_register_style, wp_enqueue_style, and wp_enqueue_scripts

function load_front_editor_style_wpse_87256() {
  if (!is_page_template('editor.php')) return false;
  wp_register_style( 'fedstyle', get_stylesheet_directory().'/path/to/stylesheet', false, null, 'all' );
  wp_enqueue_style( 'fedstyle' );
add_action( 'wp_enqueue_scripts', 'load_front_editor_style_wpse_87256' ); 

I don't know how your editor works but I included a condition that should only load the editor on a template named editor.php. I am sure that is wrong but should be illustrative.

Caveat: I don't know what your front end editor is or how it works. I am assuming it is the core editor that you've loaded on the front. I know that directly editing an admin stylesheet (appropriate or not) will alter the appearance of the backend editor. The same thing should be true on the front.


  • This is essentially the approach I was thinking of, except I would consider manually enqueueing editor-style.css in the same callback/hook used to enqueue the front-end wp_editor instance. Feb 17, 2013 at 15:19
  • @ChipBennett ... yes, chances are you would want to enqueue the same stylesheet for both cases and doing it at the same time would be the safest way to go.
    – s_ha_dum
    Feb 17, 2013 at 15:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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