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. http://alisothegeek.com/2011/05/tinymce-styles-dropdown-wordpress-visual-editor/

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;

  • Ryan, whenever possible, a Question should be self-contained without the need of external information to understand and provide an answer. Can you post your current code? – brasofilo Jan 22 '13 at 17:46
  • I put the relevant code in here already; however, i'll put the rest of the array from the plugin in there now. Thanks for the feedback – Ryan Hollingsworth Jan 22 '13 at 18:33
  • I was referring to a complete working sample. The tutorial is one thing, another is the code that you are using. Whomever is interested in answering should be able to simply copy the code here (not there) and paste to test it. ::: Oh, can you specify exactly what is not working? What goes wrong? – brasofilo Jan 22 '13 at 18:53
  • I must have been ambiguous. This is a plugin, put it in your plugins folder, then there's an multidimensional array where you add/alter the items and styles you wish to show up in the tinyMCE editor. The only addition/ change i made was listed in the original post. The result was also mentioned: i can get the code to wrap each item (for instance, each li) in the class, but what i was hoping to do was wrap the entire selection in a div. Since the result is in your wordpress install in the edit post/page section it's a little more than copy/paste... – Ryan Hollingsworth Jan 22 '13 at 19:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.