Useful WordPress snippet: Adding styles dropdown & custom css to the TinyMCE editor

The following php code snippet for WordPress does two things:
1) Specifies a new stylesheet that will be referred to by the TinyMCE editor in WordPress, so you can add the default font styles for the users so that when they are typing their copy it more closely mimics what they will see on the live site
2) Adds a new Styles drop down which lists all the classes that are available to allow users to specify a class to be applied to a particular paragraph

Add the following to your functions.php – making sure you have created your “custom-editor-styles.css” file within your theme folder also.

/********* CUSTOM STYLES FOR CMS **************/
function my_theme_add_editor_styles() {
    add_editor_style( 'custom-editor-style.css' );
}
add_action( 'init', 'my_theme_add_editor_styles' );

// Callback function to insert 'styleselect' into the $buttons array
function my_mce_buttons_2( $buttons ) {
	array_unshift( $buttons, 'styleselect' );
	return $buttons;
}
// Register our callback to the appropriate filter
add_filter('mce_buttons_2', 'my_mce_buttons_2');