Add custom button to TinyMCE for create custom formats on Wordpress
/*
* Add custom button to TinyMCE for create custom formats on Wordpress
* From https://wordpress.stackexchange.com/questions/128931/tinymce-adding-css-to-format-dropdown/128950
*/
add_filter( 'mce_buttons_2', 'fb_mce_editor_buttons' );
function fb_mce_editor_buttons( $buttons ) {
array_unshift( $buttons, 'styleselect' );
return $buttons;
}
add_filter( 'tiny_mce_before_init', 'fb_mce_before_init' );
function fb_mce_before_init( $settings ) {
$style_formats = [
[
'title' => 'My Test',
'selector' => 'p',
'classes' => 'mytest',
],
[
'title' => 'AlertBox',
'block' => 'div',
'classes' => 'alert_box',
'wrapper' => true
],
[
'title' => 'Red Uppercase Text',
'block' => 'span',
'classes' => 'builder-subtitle',
'styles' => [
'color' => 'red', // or hex value #ff0000
'fontWeight' => 'bold',
'textTransform' => 'uppercase'
]
]
];
$settings['style_formats'] = json_encode( $style_formats );
return $settings;
}