You’ll need two code snippets. The first puts the select menu there. The second populates it.
This is based on this tutorial, but slimmed down a bit.
add_filter( 'mce_buttons_2', 'mrw_mce_bad_buttons' );
add_filter( 'tiny_mce_before_init', 'mrw_mce_init' );
function my_mce_buttons() {
return array('formatselect', 'styleselect', '|', 'forecolor', 'underline', 'justifyfull', '|', 'pastetext', 'pasteword', 'removeformat', '|', 'charmap', '|', 'outdent', 'indent', '|', 'undo', 'redo', 'wp_help' );
}
function my_mce_init( $args ) {
$args['theme_advanced_styles'] = 'Display Name=class-name,Display Name=class-name,etc.';
return $args;
}
The “Display Name” and “class-name” above are up to you, but that’s what determines what classes get listed. I also usually use this as an opportunity to kill off the 3rd, 4th, and 5th options in the second row of buttons, but I put them back in for this snippet.