How to use mce_buttons_2 filter in WordPress

mce_buttons_2 Filter

This filter allows you to customize the second-row list of TinyMCE buttons (Visual tab). To use the mce_buttons_2 filter, you first have to register it using add_filter. You can write this code into the functions.php file of your activated theme or in a custom WordPress Plugin.

We at WePlugins always prefer to create a custom WordPress Plugin while using hooks so nothing breaks when you update your WordPress theme in the future.

In the below live example, we have defined a function modify_mce_buttons_2_defaults which takes 2 parameters and we registered using add_filter. The first parameter mce_buttons_2 is the name of the hook. The second parameter modify_mce_buttons_2_defaults is the name of the function which needs to be called. The third parameter is the priority of calling the hook if the same hook is used multiple times, and the last parameter is the number of arguments (if any) to be passed in the registered function.

Sometimes, you have to remove a registered hook, so you can use remove_filter to remove the mce_buttons_2 filter.

Parameters

Below are the 2 parameters required to use this hook:

• $mce_buttons_2: (array) Second-row list of buttons.
• $editor_id: (string) Unique editor identifier, e.g., ‘content’. Accepts ‘classic-block’ when called from block editor’s Classic block.

Live Example 1

This example demonstrates how to add a style selector to the beginning of the toolbar.

    add_filter( 'mce_buttons_2', 'weplugins_tinymce_buttons' );
    function weplugins_tinymce_buttons( $buttons ) {
        // Add style selector to the beginning of the toolbar
        array_unshift( $buttons, 'styleselect' );
        return $buttons;
    }
    

Live Example 2

Below is an example of how you can use this hook to modify the second-row buttons according to your requirements.

    function weplugins_modify_mce_buttons_2_defaults($mce_buttons_2, $editor_id) {
        // Update the $mce_buttons_2 variable according to your website requirements and return this variable. You can modify the $mce_buttons_2 variable conditionally too if you want.
        return $mce_buttons_2;
    }
    // Add the filter
    add_filter( "mce_buttons_2", "weplugins_modify_mce_buttons_2_defaults", 10, 2 );
    

Live Example 3

To remove a hook callback, use the example below.

    remove_filter( "mce_buttons_2", "weplugins_modify_mce_buttons_2_defaults", 10, 2 );
    

Please make sure to provide the same callback function name, priority, and number of arguments while removing the hook callback.

Contact Us

If you need customization or are having any trouble using this hook, please contact us and we’d be happy to assist you.