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:

paragraph and style drop downs

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

1 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
        '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)
  • hmmm i tried to keep things contained and only show the "allowed" styles to the editor in backend to prevent trouble. Had still the goal to modify the settings in the paragraph drop down menu. But i guess its more clean to go with your suggestion. Only one slight problem with the implementation. i've added the styles drop down via styleselect but somehow i am unable to apply the style to a text snippet. the custom style isn't clickable at all? also the set class isn't applied though :( and you think it would still make sense to hide the paragraph drop down?
    – rkoller
    Mar 7, 2014 at 11:40
  • or is the adding of the styleselect drop down not necessary, and just the code you've pasted stand alone? Means you assign a paragraph style h4 in the paragraph drop down and the class headliner gets applied automatically like defined in the function. but i've left out the styleselect now and only applied the function like you said but also same effect. the class isn't applied. :s
    – rkoller
    Mar 7, 2014 at 11:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.