Call Us - We're Here to Help! 800.675.8896

Adding Custom CSS Classes to TinyMCE Format Dropdown

I got this question at the Happiness Bar at WordCamp (in front of Andrew Ozz to boot!) also, so I’m committing it to bits here.

function custom_mce_styles( $init ) {
    $init['theme_advanced_buttons2_add_before'] = 'styleselect';
    $init['theme_advanced_styles'] = 'Style Name=styleclass,Style Name2=styleclass2';
    return $init;
}

add_filter( 'tiny_mce_before_init', 'custom_mce_styles'  );

function my_mce_css() {
    return get_bloginfo( 'template_url' ) . '/editor-style.css';
}

add_filter( 'mce_css', 'my_mce_css' );

Add this to your theme’s functions.php file. Obviously (or not) you’ll replace Style Name=styleclass,Style Name2=styleclass2 with your own comma sep. list of names and classes.

To style the appearance of the display within the visual editor, you need to create an editor stylesheet in your theme folder – ex: editor-style.css

To add the dropdown to the first row, revise line 2:

$init['theme_advanced_buttons1_add_before'] = 'styleselect';

WordPress.org Support Forum Post