How to add class to an html output element in tinyMCE paragraph drop down menu

Question

I tried to modify the TinyMCE behaviour in the functions.php. I try to accomplish that e.g. h4 gets a class of "headliner" per default. I am half way there. I found a setting to create a drop down menu and within it is populated with my custom styles/classes:

function tinymce_mod( $init ) {
    $init['theme_advanced_buttons2_add'] = 'styleselect';
    $init['theme_advanced_styles'] = "Header 4=mus-bi";
    return $init;
}
add_filter('tiny_mce_before_init', 'tinymce_mod');

but that way it is rather confusing to have two style related drop down menus:

So would it be possible to just alter the wp native styles in the paragraph dropdown and assign the class "headliner" to the Header 4 in the paragraph drop down there and drop the style drop down? Best regards Ralf

Answer 1

In my opinion, using the Styles dropdown is useful to show that the particular style you are adding is special and not the theme's standard element styling for p, h1, h2, etc.

The examples in the Codex to be pretty good at outlining this: http://codex.wordpress.org/TinyMCE_Custom_Styles

// Callback function to filter the MCE settings
function my_mce_before_init_insert_formats( $init_array ) {

// Define the style_formats array
$style_formats = array(  

    // Each array child is a format with it's own settings
    array(  
        'title' => 'H4 Headliner',  
        'block' => 'h4',  
        'classes' => 'headliner',
        'wrapper' => true,          
    ),  
);  

// Insert the array, JSON ENCODED, into 'style_formats'
$init_array['style_formats'] = json_encode( $style_formats );  
return $init_array;  

 } 
// Attach callback to 'tiny_mce_before_init' 
add_filter( 'tiny_mce_before_init', 'my_mce_before_init_insert_formats' );  

Another option would be to just style the h4 element with the "headliner" style you want in your stylesheet. If the "headliner" style is the default, then you wouldn't really need to add a special class or id.

#content h4 {
    (your styles here)
}