Styleselect control in TinyMCE

Let's start from the beginning; activating the styleselect control. All you need to do is use the filter mcebuttons2 and add the styleselect element to the top of the list of buttons:

add_filter('mce_buttons_2', 'gk_activate_styleselect');
function gk_activate_styleselect($buttons) {
   array_unshift( $buttons, 'styleselect' );
   return $buttons;
}

As a result, a new selection list will appear in the editor:

Image may be NSFW.
Clik here to view.

Looking at the content, we can see that many of the available styling methods are combined with the default styling formats, which makes everything a little hard to keep track of. Fortunately, we may easily change it, making this control the easiest way for wrapping a selected text fragment with your own HTML tags.

To do this we need to modify the default settings of the TinyMCE editor using the tinymcebefore_init filter:

function gk_own_styles($config) {
    $temp_array = array(
        array(
            'title' => 'Testimonial',
            'block' => 'blockquote',
            'classes' => 'testimonial'
        ),
        array(
            'title' => 'Info block',
            'block' => 'p',
            'classes' => 'info-block'
        )       
    );
    $config['style_formats'] = json_encode( $temp_array );
    return $config;
}
add_filter('tiny_mce_before_init', 'gk_own_styles');

As you can see in the style_formats settings we define our own array in the JSON format. Each element of the array contains three main properties - the name of the submenu item (title),the name of the HTML tag (block) and the CSS class to be added to this marker (classes).

In effect, we we have a selection list with our own definitions:

Image may be NSFW.
Clik here to view.

Now, when you select some text and click a styling method in HTML we may see the effect of the styleselect control:

Image may be NSFW.
Clik here to view.