Unable to add CSS styles with editor-style.css

[cocas]

How can i add more Styles for the TinyMCE, just like the “Impact Text” that is already in the theme?
I tried to edit the file css/editor-styles.css, but nothing happens. I’m using a child theme, and changed the “editor-styles.css” file on both the parent and child theme, and still only see the “Impact Text” style on the TinyMCE.
So, my question is how do I add my custom styles on my child theme?
Thank you!

[Kyle – SUPPORT]

Please give solution for this, I have same problem

[Swift Ideas – Ed]

Hi Andy/Kyle,

Apologies for the delay in reply. We do this with some simple code added to the functions.php file, and you could easily add it in the child theme functions.php file:

	function sf_custom_mce_styles( $init ) {
	    $init['theme_advanced_buttons2_add_before'] = 'styleselect';
	    //First, we define the styles we want to add in format 'Style Name' => 'css classes'
        $classes = array(
            __('Impact Text', 'swift-framework-admin')     => 'impact-text',
            __('Impact Text Large', 'swift-framework-admin')     => 'impact-text-large',
        );
    
        //Delimit styles by semicolon in format 'Title=classes;' so TinyMCE can use it
        if ( ! empty($settings['theme_advanced_styles']) )
        {
            $settings['theme_advanced_styles'] .= ';';
        }
        else
        {
            //If there's nothing defined yet, define it
            $settings['theme_advanced_styles'] = '';
        }
    
        //Loop through our newly defined classes and add them to TinyMCE
        $class_settings = '';
        foreach ( $classes as $name => $value )
        {
            $class_settings .= "{$name}={$value};";
        }
    
        //Add our new class settings to the TinyMCE $settings array
        $settings['theme_advanced_styles'] .= trim($class_settings, '; ');

	    return $init;
	}
	 
	add_filter('tiny_mce_before_init', 'sf_custom_mce_styles');
	 
	function sf_mce_css() {
	    return get_template_directory_uri() . '/css/editor-style.css';
	}
	 
	add_filter( 'mce_css', 'sf_mce_css' );

Hope that helps!

– Ed