Add a "Formats" drop-down for styling text to the WordPress TinyMCE editor

functions.php

<?php
//* Add this to your functions.php file. Do NOT include the opening php tag

//* Add the "Formats" drop-down in the WP editor 
add_filter( 'mce_buttons_2', 'ab_mce_editor_buttons' );
function ab_mce_editor_buttons( $buttons ) {

    array_unshift( $buttons, 'styleselect' );
    return $buttons;
}
//* Add styles/classes to the "Formats" drop-down 
add_filter( 'tiny_mce_before_init', 'ab_mce_before_init' );

function ab_mce_before_init( $settings ) {

    $style_formats = array(
        array(
            'title' => 'Opening Paragraph',
            'selector' => 'p',
            'classes' => 'emph1',
            ),
        array(
            'title' => 'another style here',
            'block' => 'div',
            'classes' => 'alert_box',
            'wrapper' => true
        	),
        array(
            'title' => 'another style here',
            'inline' => 'span',
            'styles' => array(
                'color'         => 'red', // or hex value #ff0000
                'fontWeight'    => 'bold',
                'textTransform' => 'uppercase'
            )
        )
    );

    $settings['style_formats'] = json_encode( $style_formats );

    return $settings;

}