Add Editor Style from Plugin

In WordPress 3.0.0 WP introduce add_editor_style() function to easily add custom stylesheet for WordPress TinyMCE visual editor. But you can also add them from a plugin.

It’s useful if you add a plugin to add dropdown style in visual editor, or you can also use this in a theme, if your theme add a visual editor in front end because add_editor_style() only load in admin. For example for bbPress supported theme.

/* Add Editor Style */
add_filter( 'mce_css', 'my_plugin_editor_style' );
/**
 * Add Editor Style
 * add additional editor style for my-plugin
 * 
 * @since 0.1.0
 */
function my_plugin_editor_style( $mce_css ){

    $mce_css .= ', ' . plugins_url( 'css/editor-style.css', __FILE__ );
    return $mce_css;
}

now you just need to add your additional CSS for visual editor in editor-style.css in css folder in your plugin.

3 Comments

  1. Farooq

    thanks for the code, i have tested it and stylesheet applies in mce editor but can you explain, how to apply this specific style on the post after it is published and viewed from the blog.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *