Custom TinyMCE Editor Formats in Dropdown

Question

I use custom TinyMCE Formats in my wordpress editor. Actually i use just two formats which i created in the functions.php:

/* TINY MCE FORMATE */
function my_mce_before_init_insert_formats( $init_array ) {  
    $style_formats = array(  
        array(  
            'title' => 'Button',  
            'selector' => 'a',  
            'classes' => 'btn'             
        ),          
        array(  
            'title' => 'Download',  
            'selector' => 'a',  
            'classes' => 'download'             
        ),          
    ); 

    $init_array['style_formats'] = json_encode( $style_formats );  

    return $init_array;  

} 

add_filter( 'tiny_mce_before_init', 'my_mce_before_init_insert_formats' );

This works perfect and i can choose them in the formats tab:

But now i need more formats and i want to group the formats in a hover-menu called "Links". The standard tinymce groups the headings, inline, blocks and aligning in hover-menus:

How can i group my custom formats?

Answer 1

You can group styles using the items key - you can nest multiple times too!

/* TINY MCE FORMATE */
function my_mce_before_init_insert_formats( $init_array ) {  
    $style_formats = array(  
        array(  
            'title' => 'Buttons',
            'items' => array(
                array(
                    'title' => 'Green',
                    'selector' => 'a',
                    'classes' => 'btn--green'
                )
                array(
                    'title' => 'Blue Button',
                    'selector' => 'a',
                    'classes' => 'btn--blue'
                )
            ),
        ),          
        array(  
            'title' => 'Download',
            'items' => array(
                array(
                    'title' => 'Style 1',
                    'selector' => 'a',  
                    'classes' => 'download-style-1'
                ),
                array(
                    'title' => 'Style 2',
                    'selector' => 'a',  
                    'classes' => 'download-style-2'
                )
            )
        )
    ); 

    $init_array['style_formats'] = json_encode( $style_formats );  

    return $init_array;  
} 

add_filter( 'tiny_mce_before_init', 'my_mce_before_init_insert_formats' );