Apply Classes to post text inside editor

Question

I am using a theme that comes with several different font stylings for headers and text. However there is no simple way to apply these classes inside the editor. How can I enable a drop down similar to TinyMCE that allows me to select text and apply a class/style to it in order to have my marketing and sales department style their posts.

Answer 1

You'll need two code snippets. The first puts the select menu there. The second populates it.

This is based on this tutorial, but slimmed down a bit.

add_filter( 'mce_buttons_2', 'mrw_mce_bad_buttons' );
add_filter( 'tiny_mce_before_init', 'mrw_mce_init' );
function my_mce_buttons() {
    return array('formatselect', 'styleselect', '|', 'forecolor', 'underline', 'justifyfull', '|', 'pastetext', 'pasteword', 'removeformat', '|', 'charmap', '|', 'outdent', 'indent', '|', 'undo', 'redo', 'wp_help' );
}
function my_mce_init( $args ) {
    $args['theme_advanced_styles'] = 'Display Name=class-name,Display Name=class-name,etc.';
    return $args;
}

The "Display Name" and "class-name" above are up to you, but that's what determines what classes get listed. I also usually use this as an opportunity to kill off the 3rd, 4th, and 5th options in the second row of buttons, but I put them back in for this snippet.

Answer 2

If you install the plugin TinyMce Advanced you can go to the settings page and drag the styles button into the editor. This gives you the ability to add classes to inline text:

TinyMce Advanced Plugin Link