To achieve the dropdown styles we have to use the filter hook tiny_mce_before_init
. This filter grants developers access to the TinyMCE settings array.
The following example adds custom style options to an existing Style dropdown.
add_filter( 'tiny_mce_before_init', 'my_mce_before_init' );
function my_mce_before_init( $settings ) {
$style_formats = array(
array(
'title' => '1/5 Block',
'block' => 'div',
'classes' => 'col-md-5',
'wrapper' => true
),
array(
'title' => 'Pull Left',
'block' => 'div',
'classes' => 'pull-left',
'wrapper' => true
),
array(
'title' => 'Button R',
'selector' => 'a',
'classes' => 'btn btn-default pull-right'
),
array(
'title' => 'Text Center Green Button',
'selector' => 'a',
'classes' => 'btn btn-green center'
),
array(
'title' => 'Clearfix',
'block' => 'div',
'classes' => 'clearfix'
),
);
$settings['style_formats'] = json_encode( $style_formats );
return $settings;
}
You can read more about the tinymce buttons and their uses and hooks from here.