I'm successfully adding buttons to the TinyMCE editor in Wordpress, but the problem is they all show up to the right of the Kitchen Sink button and I have so many that I need them to display on a new line. How do I make the buttons wrap to the next line and/or create a new row for my custom buttons? Here is my code:

tinymce.create('tinymce.plugins.boxlight', {
    init : function(ed, url) {
        ed.addButton('boxlight', {
            title : 'Add a light content box',
            image : url+'/images/box-light.png',
            theme_advanced_buttons3_add : 'boxlight',
            onclick : function() {
                 ed.selection.setContent('[box_light]' + ed.selection.getContent() + '[/box_light]');

    createControl : function(n, cm) {
        return null;

tinymce.PluginManager.add('boxlight', tinymce.plugins.boxlight);

That code just adds the buttons to the main TinyMCE toolbar and I can't figure out how to add the buttons to a new toolbar.

1 Answer 1


I imagine you're also adding a filter mce_buttons to add in the button to, something like..

add_filter( 'mce_buttons', 'add_my_tinymce_buttons' );

function add_my_tinymce_buttons( $items ) {
    $items[] = 'your-button';
    return $items;

Just change the filter to hook onto mce_buttons_2 instead, and the button will appear on the second row , eg..

add_filter( 'mce_buttons_2', 'add_my_tinymce_buttons' );

Hope that helps.. :)

  • That did it, thank you so much! Wish I had enough rep to vote up your answer since it was so clear and helpful :) Mar 31, 2011 at 15:39
  • No hurry on the rep, just happy to provide an answer and you're welcome.. ;)
    – t31os
    Mar 31, 2011 at 15:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.