Skip to content

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'; Support Forum Post

Schedule Your Discovery Call

Give us 30 minutes to get to know each other, to learn about your business and objectives. We'll offer solutions, advice and an honest assessment of how we can help you.

Posted in