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.

This is default wordpress add_editor_style function:

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

    add_theme_support( 'editor-style' );

    if ( ! is_admin() )
        return;

    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?

share|improve this question
    
What "frontend wp_editor" are you referring to? Likely, we'd need to see that code, as well. –  Chip Bennett Feb 17 '13 at 14:28
    
i added solution and example of a live page. Thank you for your time –  Ünsal Korkmaz Feb 17 '13 at 18:05

2 Answers 2

up vote 3 down vote accepted

Here is my solution:

add_filter('the_editor_content', "firmasite_tinymce_style");
function firmasite_tinymce_style($content) {
    add_editor_style('assets/css/custom.css');

    // 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.

share|improve this answer
    
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 '13 at 16:29
    
Dunno what can i do about it. I didnt even try to fix that. Any opinion? –  Ünsal Korkmaz Feb 17 '13 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 '13 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 –  Ünsal Korkmaz Feb 17 '13 at 17:23
    
i added solution to answer –  Ünsal Korkmaz Feb 17 '13 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.

http://codex.wordpress.org/Function_Reference/get_stylesheet_directory
http://codex.wordpress.org/Function_Reference/is_page_template

share|improve this answer
    
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. –  Chip Bennett Feb 17 '13 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 '13 at 15:25
    
i wrote my solution.. thank you for your time –  Ünsal Korkmaz Feb 17 '13 at 16:13

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.