TinyMCE style_select – Append Classes

EDIT

The quick and easy method is just a simple setting: style_formats_merge…

function myformatTinyMCE($in) { 
         $style_formats = array(
            array(
                'title' => 'Classes',
                'items' =>  array(  
                    array(
                        'title' => 'Blue Color',
                        'selector' => 'p,strong,u,em,ol,ul',
                        'classes' => 'blueColor'
                    )
                )
            )
        );
        $in['style_formats_merge'] = true;
        $in['style_formats'] = json_encode( $style_formats );

        return $in; 
    }
    add_filter('tiny_mce_before_init', 'myformatTinyMCE' );

Everything below this point is a much longer way to go about it but may be helpful to future viewers so I’ll keep it in.

So pretty much right after I asked this question I found the answer on the TinyMCE Forms: Adding Class to TinyMCE style_formats – not the last line of the code. In WordPress format it looks like this:

function myformatTinyMCE($in) { 
     $style_formats = array(
        array(
            'title' => 'Classes',
            'items' =>  array(  
                array(
                    'title' => 'Blue Color',
                    'selector' => 'p,strong,u,em,ol,ul',
                    'classes' => 'blueColor'
                )
            )
        )
    );  
    $in['style_formats'] = json_encode( $style_formats );

    return $in; 
}
add_filter('tiny_mce_before_init', 'myformatTinyMCE' );

Unfortunately it still clears out all the old TinyMCE Menu Items. I then used the style_format docs to recreate the menu items. The long version looks like this (without the class).

function myformatTinyMCE($in) { 
     $style_formats = array(
        array(
            'title' => 'Headers', 
            'items' => array(
                array(
                    'title' => 'Header 1', 
                    'format' => 'h1'
                ),
                array(
                    'title' => 'Header 2', 
                    'format' => 'h2',
                ),
                array(
                    'title' => 'Header 3', 
                    'format' => 'h3'
                ),
                array(
                    'title' => 'Header 4', 
                    'format' => 'h4'
                ),
                array(
                    'title' => 'Header 5', 
                    'format' => 'h5'
                ),
                array(
                    'title' => 'Header 6', 
                    'format' => 'h6'
                )
            )
        ),
        array(
            'title' => 'Inline', 
            'items' => array(
                array(
                    'title' => 'Bold', 
                    'icon' => 'bold', 
                    'format' => 'bold'
                ),
                array(
                    'title' => 'Italic', 
                    'icon' => 'italic', 
                    'format' => 'italic'
                ),
                array(
                    'title' => 'Underline', 
                    'icon' => 'underline', 
                    'format' => 'underline'
                ),
                array(
                    'title' => 'Strikethrough', 
                    'icon' => 'strikethrough', 
                    'format' => 'strikethrough'
                ),
                array(
                    'title' => 'Superscript', 
                    'icon' => 'superscript', 
                    'format' => 'superscript'
                ),
                array(
                    'title' => 'Subscript', 
                    'icon' => 'subscript', 
                    'format' => 'subscript'
                ),
                array(
                    'title' => 'Code', 
                    'icon' => 'code', 
                    'format' => 'code'
                )
            )
        ),
        array(
            'title' => 'Blocks', 
            'items' => array(
                array(
                    'title' => 'Paragraph', 
                    'format' => 'p'
                ),
                array(
                    'title' => 'Blockquote', 
                    'format' => 'blockquote'
                ),
                array(
                    'title' => 'Div', 
                    'format' => 'div'
                ),
                array(
                    'title' => 'Pre', 
                    'format' => 'pre'
                )
            )
        ),
        array(
            'title' => 'Alignment', 
            'items' => array(
                array(
                    'title' => 'Left', 
                    'icon' => 'alignleft', 
                    'format' => 'alignleft'
                ),
                array(
                    'title' => 'Center', 
                    'icon' => 'aligncenter', 
                    'format' => 'aligncenter'
                ),
                array(
                    'title' => 'Right', 
                    'icon' => 'alignright', 
                    'format' => 'alignright'
                ),
                array(
                    'title' => 'Justify', 
                    'icon' => 'alignjustify', 
                    'format' => 'alignjustify'
                )
            )
        )
    );  
    $in['style_formats'] = json_encode( $style_formats );

    return $in; 
}
add_filter('tiny_mce_before_init', 'myformatTinyMCE' );

You can just append the classes array in the first function to this existing function to add it as the last menu item. Here’s the compact version, with the class:

function myformatTinyMCE($in) { 
     $style_formats = array(
        array('title'=>'Headers','items'=>array(array('title'=>'Header 1','format'=>'h1'),array('title'=>'Header 2','format'=>'h2',),array('title'=>'Header 3','format'=>'h3'),array('title'=>'Header 4','format'=>'h4'),array('title'=>'Header 5','format'=>'h5'),array('title'=>'Header 6','format'=>'h6'))),array('title'=>'Inline','items'=>array(array('title'=>'Bold','icon'=>'bold','format'=>'bold'),array('title'=>'Italic','icon'=>'italic','format'=>'italic'),array('title'=>'Underline','icon'=>'underline','format'=>'underline'),array('title'=>'Strikethrough','icon'=>'strikethrough','format'=>'strikethrough'),array('title'=>'Superscript','icon'=>'superscript','format'=>'superscript'),array('title'=>'Subscript','icon'=>'subscript','format'=>'subscript'),array('title'=>'Code','icon'=>'code','format'=>'code'))),array('title'=>'Blocks','items'=>array(array('title'=>'Paragraph','format'=>'p'),array('title'=>'Blockquote','format'=>'blockquote'),array('title'=>'Div','format'=>'div'),array('title'=>'Pre','format'=>'pre'))),array('title'=>'Alignment','items'=>array(array('title'=>'Left','icon'=>'alignleft','format'=>'alignleft'),array('title'=>'Center','icon'=>'aligncenter','format'=>'aligncenter'),array('title'=>'Right','icon'=>'alignright','format'=>'alignright'),array('title'=>'Justify','icon'=>'alignjustify','format'=>'alignjustify')))
        ,array(
            'title' => 'Classes',
            'items' =>  array(  
                array(
                    'title' => 'Blue Color',
                    'selector' => 'p,strong,u,em,ol,ul',
                    'classes' => 'blueColor'
                )
            )
        )
    );   
    $in['style_formats'] = json_encode( $style_formats );

    return $in; 
}
add_filter('tiny_mce_before_init', 'myformatTinyMCE' );