I have disabled many of the TinyMCE buttons making the two rows quite empty. Is it possible to move the remaining buttons from the second row (that is displayed when hitting the Kitchen Sink button) to the top row?

1 Answer 1


Solved it.

So, in order to move the default buttons from first row to second row, we will need to hook into the mce_buttons filter:

function move_mce_buttons_to_top($buttons) {    

    $buttons[] = 'redo';
    // buttons

    return $buttons;
add_filter('mce_buttons', 'move_mce_buttons_to_top');

Then, to add the Paragraph drop-down to top row, we will add them as custom styles.

Firstly, let us enable the styleselect into mce_buttons (top row):

// Callback function to insert 'styleselect' into the $buttons array
function my_mce_buttons( $buttons ) {
    array_unshift( $buttons, 'styleselect' );
    return $buttons;
// Register our callback to the appropriate filter
add_filter('mce_buttons', 'my_mce_buttons');

And then register each item accordingly:

add_filter( 'tiny_mce_before_init', 'drop_mce_before_init' );  

function drop_mce_before_init( $settings ) {  

    $style_formats = array(  
            'title' => 'Paragraph',  
            'block' => 'p', 
            'title' => 'Heading 2',  
            'block' => 'h2',  

    $settings['style_formats'] = json_encode( $style_formats );  

    return $settings;  


EDIT: Updated code to function properly with the P tag.

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.