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

3 Views

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;  
}
Post Views: 3

Related posts

Leave a Reply

1 comment

  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…