How to Add Buttons and Menu Options to TinyMCE WordPress Post Editor

Do you know what TinyMCE is? You would know it, if you’ve ever accessed the WordPress dashboard (especially the Page or Post Edit screen). TinyMCE is the WYSIWYG Post editor, used by WordPress. Up until WordPress 3.8, the editor had limited capabilities (not that much has changed now). However, a great deal of effort was involved to add additional options.

With WordPress 3.9, a new version of TinyMCE has been included: TinyMCE V4. The great thing about the new version is that, the code is much cleaner. The editor brings with it a nice feature as compared to it’s older generations. You can now customize the options provided in the WordPress Post Editor easily. In this article, I will provide you some custom snippets of code which you can use, to enhance TinyMCE.

 

Add Font Type and Font Size Option in TinyMCE

By default, the TinyMCE WordPress Post Editor does not provide an option for user’s to select a font type or a font size. To provide these options you will need to add the following code in your theme’s functions.php file.

// add font type & font size selection option in the WYSIWYG editor
if ( ! function_exists( 'wdm_add_mce_fontoptions' ) ) {
           function wdm_add_mce_fontoptions( $buttons ) {
                 array_unshift( $buttons, 'fontselect' );
                 array_unshift( $buttons, 'fontsizeselect' );
                 return $buttons;
           }
}
add_filter( 'mce_buttons_3', 'wdm_add_mce_fontoptions' );

We have added the function on ‘mce_buttons_3’ hook, to display the font options on a separate row. You can similarly use other hooks (mce_buttons_1 or mce_buttons_2) to display the fields on a different row.

Going okay so far? Now, how about adding a button?

[space]

Add Custom Button in TinyMCE

A button dedicated to perform a particular function, can be a feature you can add in the Post Editor. For example, you may have seen many plugins adding buttons which are used to insert plugin related shortcodes. Similarly instead of expecting users to remember shortcodes, you can simply provide buttons, to insert a shortcode in the post editor. There isn’t a need to add a button for every shortcode, rather only for the most used ones.

Below given are steps to create a simple button to add a shortcode on the click event. Write the following in functions.php of your theme, or your plugin which contains the shortcode.

// hooks your functions into the correct filters
function wdm_add_mce_button() {
            // check user permissions
            if ( !current_user_can( 'edit_posts' ) &&  !current_user_can( 'edit_pages' ) ) {
                       return;
               }
           // check if WYSIWYG is enabled
           if ( 'true' == get_user_option( 'rich_editing' ) ) {
               add_filter( 'mce_external_plugins', 'wdm_add_tinymce_plugin' );
               add_filter( 'mce_buttons', 'wdm_register_mce_button' );
               }
}
add_action('admin_head', 'wdm_add_mce_button');

// register new button in the editor
function wdm_register_mce_button( $buttons ) {
            array_push( $buttons, 'wdm_mce_button' );
            return $buttons;
}


// declare a script for the new button
// the script will insert the shortcode on the click event
function wdm_add_tinymce_plugin( $plugin_array ) {
          $plugin_array['wdm_mce_button'] = get_stylesheet_directory_uri() .'/js/wdm-mce-button.js';
          return $plugin_array;
}

Add JavaScript Code

The Javascript code needed should be added in a JavaScript file you create ‘wdm-mce-button.js’. To maintain a decent directory structure, add the file under a ‘js’ folder, in your theme’s directory. The JavaScript code to be added, is as given below:

(function() {
       tinymce.PluginManager.add('wdm_mce_button', function( editor, url ) {
           editor.addButton('wdm_mce_button', {
                       text: 'WDM',
                       icon: false,
                       onclick: function() {
                         // change the shortcode as per your requirement
                          editor.insertContent('[wdm_shortcode]');
                      }
             });
       });
})();

And voila! You now have a new button in your WordPress Post Editor, which will print your needed shortcode on click 🙂

[space]

Adding a Dropdown Option

So, you’re not happy with the simple button, and are looking for more?! Not a problem. Adding a dropdown option, with sub-menus, is only a matter of a few tweaks to your JS code. This can be useful, when you want to add multiple shortcodes.

Replace the JS code you have used, in  wdm-mce-button.js, with the following:

(function() {
        tinymce.PluginManager.add('wdm_mce_dropbutton', function( editor, url ) {
           editor.addButton( 'wdm_mce_dropbutton', {
                 text: 'WDM Dropdown',
                 icon: false,
                 type: 'menubutton',
                 menu: [
                       {
                        text: 'Sample Item 1',
                        onclick: function() {
                           editor.insertContent('[wdm_shortcode 1]');
                                  }
                        },
                       {
                        text: 'Sample Item 2',
                        onclick: function() {
                           editor.insertContent('[wdm_shortcode 2]');
                                 }
                       }
                       ]
              });
        });
})();

And the outcome should be:

[space]

This was only a basic introduction. You can use your imagination (and some help from WordPress Codex: TinyMCE)  to add any kind of option you need, to extend the TinyMCE functionality. If you have any questions with regards to the implementation, do let me know, using the comment section below, and I will try my best to help you out 🙂