Is there a way to add another row to the tinyMCE kitchen sink toggle?

Question

The tinyMCE "kitchen sink" toggle button shows/hides a row of buttons. I have successfully added my row of shortcode buttons to the tinyMCE editor, but I was wondering if there was a way to make my row only display when the kitchen sink button is clicked. I don't want to add the buttons directly to the kitchen sink row because I have lots of buttons that need their own row. So, can I make the kitchen sink button show two rows instead of one? Or is there some sort of modifier when I add my row to indicate that it should be toggled when the kitchen sink button is clicked?

Here is the code I'm using to add my third row of buttons:

    // add shortcode buttons to the tinyMCE editor row 3
function add_button_3() {
   if ( current_user_can('edit_posts') &&  current_user_can('edit_pages') )
   {
     add_filter('mce_external_plugins', 'add_plugin_3');
     add_filter('mce_buttons_3', 'register_button_3');
   }
}
//setup array of shortcode buttons to add
function register_button_3($buttons) {
   array_push($buttons, "dropcap", "divider", "quote", "pullquoteleft", "pullquoteright", "boxdark", "boxlight", "togglesimple", "togglebox", "tabs", "signoff", "columns", "smallbuttons", "largebuttons", "lists");  
   return $buttons;
}
//setup array for tinyMCE editor interface
function add_plugin_3($plugin_array) {
   $plugin_array['lists'] = get_bloginfo('template_url').'/js/customcodes.js';
   $plugin_array['signoff'] = get_bloginfo('template_url').'/js/customcodes.js';
   $plugin_array['dropcap'] = get_bloginfo('template_url').'/js/customcodes.js';
   $plugin_array['divider'] = get_bloginfo('template_url').'/js/customcodes.js';
   $plugin_array['quote'] = get_bloginfo('template_url').'/js/customcodes.js';
   $plugin_array['pullquoteleft'] = get_bloginfo('template_url').'/js/customcodes.js';
   $plugin_array['pullquoteright'] = get_bloginfo('template_url').'/js/customcodes.js';
   $plugin_array['boxdark'] = get_bloginfo('template_url').'/js/customcodes.js';
   $plugin_array['boxlight'] = get_bloginfo('template_url').'/js/customcodes.js';
   $plugin_array['togglesimple'] = get_bloginfo('template_url').'/js/customcodes.js';
   $plugin_array['togglebox'] = get_bloginfo('template_url').'/js/customcodes.js';
   $plugin_array['tabs'] = get_bloginfo('template_url').'/js/customcodes.js'; 
   $plugin_array['columns'] = get_bloginfo('template_url').'/js/customcodes.js';
   $plugin_array['smallbuttons'] = get_bloginfo('template_url').'/js/customcodes.js';
   $plugin_array['largebuttons'] = get_bloginfo('template_url').'/js/customcodes.js';
   return $plugin_array;
}
add_action('init', 'add_button_3'); // add the add_button function to the page init

However, the row that adds is not toggled by the kitchen sink button.

Answer 1

Yes!

• Use the mce_buttons_2 filter to add buttons to the second row.
• Use the mce_buttons_3 filter to add buttons to the third row.

Here's an example of what I use:

function mytheme_mce_buttons_row_3($buttons) {

     $buttons[] = 'fontselect';
     $buttons[] = 'fontsizeselect';
     $buttons[] = 'code';
     $buttons[] = 'sup';
     $buttons[] = 'sub';
     $buttons[] = 'backcolor';
     $buttons[] = 'separator';
     $buttons[] = 'hr';
     $buttons[] = 'wp_page';

     return $buttons;

}
add_filter("mce_buttons_3", "mytheme_mce_buttons_row_3");

Just drop this in functions.php. (I put it in my Theme setup function, that gets hooked into after_setup_theme.)

EDIT:

I don't know if it makes a difference or not, but you're using array_push($buttons, $button), while I'm using $buttons[] = $button

Here's your code:

//setup array of shortcode buttons to add
function register_button_3($buttons) {
   array_push($buttons, "dropcap");
   array_push($buttons, "divider");
   array_push($buttons, "quote");
   array_push($buttons, "pullquoteleft");
   array_push($buttons, "pullquoteright");
   array_push($buttons, "boxdark");
   array_push($buttons, "boxlight");
   array_push($buttons, "togglesimple");
   array_push($buttons, "togglebox");
   array_push($buttons, "tabs");
   array_push($buttons, "signoff"); 
   array_push($buttons, "columns");
   array_push($buttons, "smallbuttons");
   array_push($buttons, "largebuttons");
   array_push($buttons, "lists");     
   return $buttons;
}
add_filter('mce_buttons_3', 'register_button_3');

Which, using my method, would look like this:

//setup array of shortcode buttons to add
function register_button_3($buttons) {
   $buttons[] = 'dropcap';
   $buttons[] = 'divider';
   $buttons[] = 'quote';
   $buttons[] = 'pullquoteleft';
   $buttons[] = 'pullquoteright';
   $buttons[] = 'boxdark';
   $buttons[] = 'boxlight';
   $buttons[] = 'togglesimple';
   $buttons[] = 'togglebox';
   $buttons[] = 'tabs';
   $buttons[] = 'signoff'; 
   $buttons[] = 'columns';
   $buttons[] = 'smallbuttons';
   $buttons[] = 'largebuttons';
   $buttons[] = 'lists';     
   return $buttons;
}
add_filter('mce_buttons_3', 'register_button_3');

Give that a try?

Answer 2

I hit this same problem myself, and after a little jQuery work I was able to find a solution.

I wrote my answer to the toggle issue in a blog post.

The JavaScript you need for your editor plugin looks like this:

init : function( ed, url ) {
    ed.onInit.add(function( ed ) {
        if ( getUserSetting( 'hidetb', '0' ) == '0' ) {
            jQuery( '#content_toolbar3' ).hide();
        }

        jQuery( '#wp-content-editor-container #content_wp_adv' ).click(function() {
            if ( jQuery( '#content_toolbar2' ).is( ':visible' ) ) {
                jQuery( '#content_toolbar3' ).show();
            } else {
                jQuery( '#content_toolbar3' ).hide();
            }
        });
    });
}

I hope this helps anyone else who has come across this thread!