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