You can add this code to your functions.php
function add_style_select_buttons( $buttons ) {
array_unshift( $buttons, 'styleselect' );
return $buttons;
}
// Register our callback to the appropriate filter
add_filter( 'mce_buttons_2', 'add_style_select_buttons' );
//add custom styles to the WordPress editor
function my_custom_styles( $init_array ) {
$style_formats = array(
// These are the custom styles
array(
'title' => 'Fancy Words',
'block' => 'div',
'classes' => 'fancywords',
'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_custom_styles' );
After adding the code when you select your text in the editor and choose the formatting from the Formats dropdown you will see a div wrapper with your class named fancywords.
For displaying the style in the editor you need to do couple of more steps.
-
Create a file name wp-editor-style.css or any name you like you wish in root folder of your active theme. You can add the style in this file, i.e.
.fancywords { background: #4ab9ff; color: #fff; font-family: 'Oswald'; }
NOTE: If you change the file name here, change the same in the next step too. -
Add this code in your active theme functions.php
function my_theme_add_editor_styles() {
add_editor_style( 'wp-editor-style.css' );
}
add_action( 'init', 'my_theme_add_editor_styles' );