2

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

that dropdown in editor

3
  • Since that's really meant for text formatting rather than adding divs, you might look into creating a shortcode instead.
    – WebElaine
    May 19, 2020 at 20:18
  • how about a p with a class of fancywords?
    – Gusto
    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
    May 19, 2020 at 21:26

1 Answer 1

2

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.

enter image description here

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

9
  • I don't see it when I add that code to my functions.php
    – Gusto
    May 19, 2020 at 22:11
  • Not sure. It can be due to your active theme or any plugin. I have tried the code myself and attached a screenshot of the result for the same. You can try to activate twenty twenty or any basic theme and try that code in functions.php May 19, 2020 at 22:15
  • Oh I see it, I wasn't toggling the toolbar
    – Gusto
    May 20, 2020 at 1:29
  • Glad I could help. :) May 20, 2020 at 1:29
  • Thanks. Do you know how do you make the style visible in the editor?
    – Gusto
    May 20, 2020 at 1:39

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.