How to edit the actual paragraph dropdown in TinyMCE with custom text styles

Question

I was having the same issue and here is what you can do. The code below disables the h1 tag from the block formats section. The same way you can disable other tags and also add your own. But I’m not sure about how to add custom CSS styles to them. Hope this code will give you a hint in which way to dig.

//Modify TinyMCE editor to hide H1. 
function tiny_mce_remove_unused_formats( $initFormats ) {
    // Add block format elements you want to show in dropdown
    $initFormats['block_formats'] = 'Paragraph=p;Heading 2=h2;Heading 3=h3;Heading 4=h4;Heading 5=h5;Heading 6=h6;Preformatted=pre';
    return $initFormats;
}
add_filter( 'tiny_mce_before_init', 'tiny_mce_remove_unused_formats' );

Update:

The thing you are looking for was possible before WordPress 3.9 had been released.
Earlier you had to write those lines of code to make it possible. But unfortunately, theme_advanced_styles is deprecated since WP 3.9 updated the TinyMCE to version 4 (see the Change Log). More information on the Andrew Ozz blog.

This is how it was earlier (source):

function make_mce_awesome( $init ) {
    // deprecated settings
    $init['theme_advanced_blockformats'] = 'h2,h3,h4,p';
    $init['theme_advanced_disable'] = 'underline,spellchecker,wp_help';
    $init['theme_advanced_text_colors'] = '0f3156,636466,0486d3';
    $init['theme_advanced_buttons2_add'] = 'styleselect';
    $init['theme_advanced_styles'] = "bigTitle=bigTitle;Call To Action Button=ctaButton,Rounded Corners=rounded";
    return $init;
}

add_filter('tiny_mce_before_init', 'make_mce_awesome');

Solution:

Anyway, I have my solution for your task. You can get rid of the default drop-down and add formats drop-down with four styles in it. This will help you to avoid confusions with the users, from what dropdowns they select styles.

Disable the default dropdown:

function remove_default_format_select( $buttons ) {
    //Remove the format dropdown select and text color selector
    $remove = array( 'formatselect' );

    return array_diff( $buttons, $remove );
 }
add_filter( 'mce_buttons', 'remove_default_format_select' );

Add new Formats dropdown (more here):

// Callback function to insert 'styleselect' into the $buttons array
function my_new_mce_buttons( $buttons ) {
    array_unshift( $buttons, 'styleselect' );
    return $buttons;
}
// Register our callback to the appropriate filter
add_filter( 'mce_buttons', 'my_new_mce_buttons' );


// Callback function to filter the MCE settings
function my_mce_before_init_insert_formats( $init_array ) {  
    // Define the style_formats array
    $style_formats = array(
            array(
                'title' => 'Headline',
                'block' => 'h1'
                ),
            array(
                'title' => 'SubHeadline',
                'block' => 'h2'
                ),
            array(
                'title' => 'Statement',
                'block' => 'div',
                'classes' => 'statement_class',
                '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_mce_before_init_insert_formats' );

The last one. Register the css file to get the visual look in your editor: (Learn more)

/**
 * Registers an editor stylesheet for the theme.
 */
function wpdocs_theme_add_editor_styles() {
    add_editor_style( 'custom-editor-style.css' );
}
add_action( 'admin_init', 'wpdocs_theme_add_editor_styles' );

Hope this helps.

Leave a Comment Cancel reply