Support » Plugin: TinyMCE Advanced » [Plugin: TinyMCE Advanced] editor-style.css not working with

  • It appears that the way tinymce-advanced handles the use of the editor-style.css seems to be broken. To display styles in prior version (3.1) we had a line in the functions.php of the theme:
    and then copied the relevant styles from the theme to the out-editor-theme.css which was located in the theme directory.

    This seems to no longer work? Any suggestions on how to make the editor use the theme’s styles?


Viewing 5 replies - 1 through 5 (of 5 total)
  • I’ve found this solution working up to wp 3.2.1 and TinyMCE Advanced

    1) Go to Settings -> TinyMCE Advanced and drag&drop the “styles” box over one editor active toolbar, then save changes.

    2) Add a css file in your theme folder, for example:

    3) Open your theme functions.php and add code below:

    //load extra-editor-styles.css in tinymce
    add_filter('tiny_mce_before_init', 'myCustomTinyMCE' );
    /* Custom CSS styles on TinyMCE Editor */
    if ( ! function_exists( 'myCustomTinyMCE' ) ) {
    	function myCustomTinyMCE($init) {
    		$init['theme_advanced_styles'] = 'Style-01-name=css-01-identifier; Style-02-name=css-02-identifier; Style-03-name=css-03-identifier';
    	return $init;

    Style-XX-name is one of the option users can choose from in the styles dropdown
    css-XX-identifier is the relative class name that will be added to the selected dom element.
    Obviously you can go further and add as many classes you want, using “;” as separator.

    4) Insert in css/extra-editor-styles.css all css code relative to all classes you have defined at point 3) and all the defined custom styles will be applied directly in the editor textarea and on front-end.

    Hope this can help.

    Bye, Daniele.

    Plugin Author Andrew Ozz


    WordPress Dev

    The editor-stile.css support in TinyMCE Advanced is only for themes that don’t have it. If you’re adding it in the theme’s functions.php, you don’t need to turn it on in the plugin.



    Thanks, mad_max. Just what I was looking for.

    Mad Max


    A little addition I’ve coded recently that can be useful: if you have several page template with different styles, this code can auto-include (if it exists) a css relative to every page template in tinymce.

    If page template filename is page-something.php, it looks for TEMPLATEPATH/css/editor-style-page-something.css.
    Obviously it can be extended to take in account taxonomies or particular post ids etc, as it globalizes $post so you can extract all informations you need.
    Here is the code, hope it can be useful:

     * add_tinymce_custom_styles()
    add_filter( 'mce_css', 'add_tinymce_custom_styles' );
    function add_tinymce_custom_styles( $url ) {
    	global $post;
    	if ( isset( $post->page_template )){
    		$pagetemplate = array_shift( explode( '.php', $post->page_template ) );
    		if ( file_exists( TEMPLATEPATH.'/css/editor-style-'.$pagetemplate.'.css' ) ){
    			if ( !empty($url) ) $url .= ',';
    			$url .= trailingslashit( get_stylesheet_directory_uri() ) . 'css/editor-style-'.$pagetemplate.'.css';
    	return $url;

    thanks to Matt and Tyson suggestions here!



    Excellent. Thanks for sharing

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘[Plugin: TinyMCE Advanced] editor-style.css not working with’ is closed to new replies.