Adding dropdowns to the tinyMCE editor

I’m new to php and wordpress but I’ve managed to figure out both pretty easily thanks to the community, forums and blogs. I’m close to figuring out what i want to do here, but wasted hours without results yesterday, so i figured i’d reach out.

What i want to do is enable the user to select a block of text including <ul>, multiple <p> tags and select an item from the tinyMCE editor and wrap that entire block of text in a <div class="something">... </div>.

I’ve started with this great tutorial, but I think my lack of experience is causing me not to understand it, or I’m walking in circles again.

I’ve successfully managed to get this method to wrap each tag in it’s own div, so if i have an <ul> each <li> will be in that class, but that won’t work for what i’m attempting to do. I really need to wrap the entire selection in a new div.

Here’s my current array item (refer to step 2 of method 2 in the link above):

>  array(
>               'title' => 'Div Section',
>               'block' => 'div',
>               'classes' => 'newClass',
>               'wrapper' => true
>             ),

Thanks for any advice!


was asked to include the full array:

add_filter( 'tiny_mce_before_init', 'my_mce_before_init' );

function my_mce_before_init( $settings ) {

    $style_formats = array(
            'title' => 'Button',
            'selector' => 'a',
            'classes' => 'button'
            'title' => 'Callout Box',
            'block' => 'div',
            'classes' => 'callout',
            'wrapper' => true
           'title' => 'Div Section',
           'block' => 'div',
           'classes' => 'newClass',
           'wrapper' => true
            'title' => 'Bold Red Text',
            'inline' => 'span',
            'styles' => array(
                'color' => '#f00',
                'fontWeight' => 'bold'

    $settings['style_formats'] = json_encode( $style_formats );

    return $settings;


Solutions Collecting From Web of "Adding dropdowns to the tinyMCE editor"