Customize WordPress Content Editor March 18th, 2013

Add this to your theme’s functions.php file…

/******** ADD CUSTOM STYLES TO TINYMCE EDITOR ********/
add_filter('mce_buttons_2', 'my_mce_buttons_2');
function my_mce_buttons_2($buttons) {
    array_unshift($buttons, 'styleselect');
    return $buttons;
}
add_filter('tiny_mce_before_init', 'my_mce_before_init');
function my_mce_before_init($settings) {
    $style_formats = array(
        array(
            'title' => 'Button',
            'selector' => 'a',
            'classes' => 'button'
        ),
        array(
            'title' => 'Callout Box',
            'block' => 'div',
            'classes' => 'callout',
            'wrapper' => true
        ),
        array(
            'title' => 'Bold Red Text',
            'inline' => 'span',
            'styles' => array(
                'color' => '#f00',
                'fontWeight' => 'bold'
            )
        )
     );
     $settings['style_formats'] = json_encode($style_formats);
     return $settings;
 }
 add_action('admin_init', 'add_my_editor_style');
 function add_my_editor_style() {
     add_editor_style();
 }

Full article and array reference.

This is also fairly simple once you know the syntax. All we’re doing is defining the formats, then encoding them as JSON so they’re TinyMCE-friendly, then assigning them to the TinyMCE settings.

Let’s break apart the array and look at the different options.

title [required] label for this dropdown item
selector | block |inline [required]
  • selector limits the style to a specific HTML tag, and will apply the style to an existing tag instead of creating one
  • block creates a new block-level element with the style applied, and will replace the existing block element around the cursor
  • inline creates a new inline element with the style applied, and will wrap whatever is selected in the editor, not replacing any tags
classes [optional] space-separated list of classes to apply to the element
styles [optional] array of inline styles to apply to the element (two-word attributes, like font-weight, are written in Javascript-friendly camel case: fontWeight)
attributes [optional] assigns attributes to the element (same syntax as styles)
wrapper [optional, default = false] if set to true, creates a new block-level element around any selected block-level elements
exact [optional, default = false] disables the “merge similar styles” feature, needed for some CSS inheritance issues

Note that while classes and styles are both optional, one of the two should be present in each array. (Otherwise, why are you adding this to the dropdown anyway?)