WordPress tinymce style dropdown

editor-style.css

/*
 editor styles
*/

.Bold{
	font-weight:bold;
}
.Medium{
	font-size:140%;
}
.Large{
	font-size:190%;
}
.Orange{
	color:orange;
}
.Grey{
	color:grey;
}
.Green{
	color:green;
}

functions.php

<?php

/**
 * -----------------------
 * TINYMCE STYLES DROPDOWN
 * -----------------------
 */


/*
 Add style select dropdown to tinymce
*/

add_filter( 'mce_buttons_2', 'my_mce_buttons_2' );

function my_mce_buttons_2( $buttons ) {
    array_unshift( $buttons, 'styleselect' );
    return $buttons;
}


/*
 Create some tinymce style definitions for the dropdown
*/

add_filter( 'tiny_mce_before_init', 'my_mce_before_init' );

function my_mce_before_init( $settings ) {

 $style_formats = array(
        array(
        	'title' => 'Orange',
            'inline' => 'span',
        	'classes' => 'Orange'
    	),
	array(
        	'title' => 'Orange Bold',
            'inline' => 'span',
        	'classes' => 'Orange Bold'
    	),
	array(
        	'title' => 'Orange Medium',
            'inline' => 'span',
        	'classes' => 'Orange Medium'
    	),
	array(
        	'title' => 'Orange Large',
            'inline' => 'span',
        	'classes' => 'Orange Large'
    	),
        array(
        	'title' => 'Grey',
        	'inline' => 'span',
        	'classes' => 'Grey'
        ),
	array(
        	'title' => 'Grey Bold',
            'inline' => 'span',
        	'classes' => 'Grey Bold'
    	),
	array(
        	'title' => 'Grey Medium',
            'inline' => 'span',
        	'classes' => 'Grey Medium'
    	),
	array(
        	'title' => 'Grey Large',
            'inline' => 'span',
        	'classes' => 'Grey Large'
    	),
        array(
        	'title' => 'Green',
        	'inline' => 'span',
        	'classes' => 'Green'
        ),
	array(
        	'title' => 'Green Bold',
            'inline' => 'span',
        	'classes' => 'Green Bold'
    	),
	array(
        	'title' => 'Green Medium', 
            'inline' => 'span',
        	'classes' => 'Green Medium'
    	),
	array(
        	'title' => 'Green Large',
            'inline' => 'span',
        	'classes' => 'Green Large'
    	),
	
	
	
	

    );

/* FURTHER EXAMPLES

    $style_formats = array(
        array(
    		'title' => 'Button',
    		'selector' => 'a',
    		'classes' => 'button'
    	),
        array(
        	'title' => 'Callout Box',
        	'block' => 'div',
        	'classes' => 'callout',
        	'wrapper' => true
        ),
        array(
        	'title' => 'Bold Red Text',
        	'inline' => 'span',
        	'styles' => array(
        		'color' => '#f00',
        		'fontWeight' => 'bold'
        	)
        )
    );
    
*/

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

    return $settings;

}

/*
 Add your editor stylesheet to tinymce so that they can be previewed.
 You'll still need to make sure these styles are represented in your client side less/css
*/

add_action( 'admin_init', 'add_my_editor_style' );

function add_my_editor_style() {
    add_editor_style( 'editor-style.css' );
}

styles.css

/*
 editor styles
*/


.Bold{
	font-weight:bold;
}
.Medium{
	font-size:140%;
}
.Large{
	font-size:190%;
}
.Orange{
	color:orange;
}
.Grey{
	color:grey;
}
.Green{
	color:green;
}