Customize tinyMCE in wordpress with selfdefined styles

editor-styles.css

.red {
	color: #89191e;
	font-weight: bold;
}

wp-custom_tinyMCE.php

<?php

  //Add "Styles" drop-down on the 2nd line
  function tuts_mce_editor_buttons( $buttons ) {
      array_unshift( $buttons, 'styleselect' );
      return $buttons;
  }
  add_filter( 'mce_buttons_2', 'tuts_mce_editor_buttons' );
   
  function tuts_mce_before_init( $settings ) {
      $style_formats = array(
          array(
              'title' => 'red Emphasized',
              'inline' => 'span',
              'classes' => 'red',
          ),
      );
   
      $settings['style_formats'] = json_encode( $style_formats );
      return $settings;
   
  }
  add_filter( 'tiny_mce_before_init', 'tuts_mce_before_init' );
  
  
  
  //Remove the text color selector
  function myplugin_tinymce_buttons($buttons) {
      
    $remove = 'forecolor';
    //Find the array key and then unset
    if ( ( $key = array_search($remove,$buttons) ) !== false )
		unset($buttons[$key]);

      return $buttons;
  }
  add_filter('mce_buttons_2','myplugin_tinymce_buttons');
  
  
  
  //Include the stylesheet
  function my_theme_add_editor_styles() {
    add_editor_style( get_stylesheet_directory_uri() . '/editor-styles.css' );
  }
  add_action( 'init', 'my_theme_add_editor_styles' );

?>