add custom styles to the WordPress TinyMCE editor

gistfile1.txt

/*================= custom wysiwyg editor styles ==============*/
//add custom styles to the WordPress editor
function my_custom_styles( $init_array ) {

    $style_formats = array(
        // These are the custom styles
        array(
            'title' => 'Testimonials',
            'block' => 'div',
            'classes' => 'testimonials',
            'wrapper' => true,
        ),
        array(
            'title' => 'Custom H3',
            'block' => 'h3',
            'classes' => 'custom-h3',
            'wrapper' => false,
        ),
    );
    // Insert the array, JSON ENCODED, into 'style_formats'
    $init_array['style_formats'] = json_encode( $style_formats );

    return $init_array;

}
// Attach callback to 'tiny_mce_before_init'
add_filter( 'tiny_mce_before_init', 'my_custom_styles' );


function add_style_select_buttons( $buttons ) {
    array_unshift( $buttons, 'styleselect' );
    return $buttons;
}
// Register our callback to the appropriate filter
add_filter( 'mce_buttons_2', 'add_style_select_buttons' );

// add .testimonials and .custom-h3 classes and styles to you style.css file