is it possible to add a custom style to the dropdown in the classic WordPress editor, say a div with the class of "fancywords"?

is it possible to add a custom style to the dropdown in the classic WordPress editor, say a div with the class of "fancywords"?

• customization
• wp-admin
• editor
• visual-editor
• code

• Since that's really meant for text formatting rather than adding divs, you might look into creating a shortcode instead. – WebElaine Commented May 19, 2020 at 20:18
• how about a p with a class of fancywords? – Gusto Commented May 19, 2020 at 20:22
• You'd have to mess with TinyMCE to add anything to the dropdown. A shortcode would be much easier. – WebElaine Commented May 19, 2020 at 21:26

1 Answer 1

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.

1. 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.

2. 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' );