How to have custom tinyMCE buttons break onto next line when too long

Question

There is probably a really simple solution that I am missing here but I have added multiple custom buttons to the tinyMCE editor in Wordpress and my problem is the row of buttons is too long (they're all on the same row - their own row) so since I am hooking into mce_buttons_3 and I have a lot of buttons, is there anyway of breaking this up so that if the row is too long to where it breaks the default WP layout that I could have the additional buttons on another row? Below is a sample of what I am working with:

add_action('init', 'add_button');  
function add_button() {  
   if ( current_user_can('edit_posts') &&  current_user_can('edit_pages') )  
   {  
     add_filter('mce_external_plugins', 'add_plugin');  
     add_filter('mce_buttons_3', 'register_button');  
   }  
} 

function register_button($buttons) {  
   array_push($buttons, "quote", "one-fourth", "one-fourth-last", "one-third", "one-third-last", "one-half", "one-half-last", "two-third", "two-third-last", "three-fourth", "three-fourth-last", "custom-list-1", "custom-list-2", "custom-list-3", "custom-list-4", "message-box-info", "message-box-success", "message-box-warning", "message-box-erroneous", "message-box-simple", "message-box-custom", "recent-posts", "custom-frame-left", "custom-frame-center", "custom-frame-right", "custom-table", "accordion", "accordion-toggle", "tabs", "tabs-content", "toggle-content", "dropcap", "pull-quote", "clear", "divider", "divider-top", "custom-button", "round-button", "small-button", "button", "read-more" );  
   return $buttons;  
} 

Answer 1

The problem is that you have way too many buttons...

I had the same problem with a plugin I created but I had only 21 buttons - and you have 41 buttons...

The solution would be to split them in two: add the first 20 buttons to the 3rd row (mce_buttons_3) and the next 21 buttons to the 4th row (mce_buttons_4)

You will need to create a function for each row...

The code will look like this:

add_action('init', 'add_button');  
add_action('init', 'add_button2'); 

function add_button() {  
   if ( current_user_can('edit_posts') &&  current_user_can('edit_pages') )  
   {  
     add_filter('mce_external_plugins', 'add_plugin');  
     add_filter('mce_buttons_3', 'register_button');  
   }  
}

function add_button2() {  
   if ( current_user_can('edit_posts') &&  current_user_can('edit_pages') )  
   {  
     add_filter('mce_external_plugins', 'add_plugin2');  
     add_filter('mce_buttons_4', 'register_button2');  
   }  
}

function register_button($buttons) {  
   array_push($buttons, "quote", "one-fourth", "one-fourth-last", "one-third", "one-third-last", "one-half", "one-half-last", "two-third", "two-third-last", "three-fourth", "three-fourth-last", "custom-list-1", "custom-list-2", "custom-list-3", "custom-list-4", "message-box-info", "message-box-success", "message-box-warning", "message-box-erroneous", "message-box-simple" );  
   return $buttons;  
}

function register_button2($buttons) {  
   array_push($buttons, "message-box-custom", "recent-posts", "custom-frame-left", "custom-frame-center", "custom-frame-right", "custom-table", "accordion", "accordion-toggle", "tabs", "tabs-content", "toggle-content", "dropcap", "pull-quote", "clear", "divider", "divider-top", "custom-button", "round-button", "small-button", "button", "read-more" );  
   return $buttons;  
}

Of course, you will have to create the "add_plugin" and the "add_plugin2" functions too...

I hope this helps...