Search

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

Listen to this article
Enhance-TinyMCE-WordPress
Enhance TinyMCE in WordPress

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.

TinyMCE-with-Font-Options-WordPress
TinyMCEin WordPress with Font Options

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 🙂

TinyMCE-Add-Button-WordPress
Add a Button to TinyMCE in WordPress

[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:

TinyMCE-Custom-DropDown-WordPress
Add a Custom DropDown to TinyMCE in WordPress

[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 🙂

 

Bharat Pareek

Bharat Pareek

13 Responses

  1. Hello, Thanks a lot for this very good tuto ! The Font Type and Font Size Option worked perfectly but when I tried to add a custom button, it doesn’t appear on my editor. I followed the steps “Add Custom Button in TinyMCE” and “Add JavaScript Code” but nothing change. (I pasted exactly the same code as you for the test).

    Do you know how to fix that ?

    Thanks 😉

    1. Hi Paul,

      Apologies for the delayed reply. There was a gaffe in the JS code, I’ve updated it, kindly try it out now.

  2. Thanks for the tutorial. It made things very simple to visualize. However there are some errors in your code that I had to track down to get it to work. However, you might have a better way to do it.

    In the plugin part I had to change
    ‘add_action(‘admin_head’, ‘wdm_add_mce_button’);’ to ‘add_action(‘init’, ‘wdm_add_mce_button’);’

    Also with using the Dropbutton I ran into some errors. Mainly just note that the name in the plugin has to match the name in the .js file.
    ‘wdm_mce_button’

    Just a note to help others.

      1. Hey jberg1,

        Thanks for the tip. I’ll have to try out the code again to check if it works as expected. In the meanwhile, your comment should surely help others 🙂

  3. Hi! Thanks a lot for your tutorial, it is very helpful. I’m trying to add in my editor the button and the dropdown (not just one or the other, both). However I don’t success to make it work between the PHP and JS… How could I do that?

    Thank you!

  4. Hi

    Please tell me how can i do two buttons next to eachother?
    Im trying but without success 🙂

    Thank for advice

Leave a Reply

Your email address will not be published. Required fields are marked *

Get The Latest Updates

Subscribe to our Newsletter

A key to unlock the world of open-source. We promise not to spam your inbox.

Suggested Reads

WordPress Development

Custom WordPress Solutions, for You

LearnDash Development

Custom LearnDash Solutions, for You

WooCommerce Development

Custom WooCommerce Solutions, for You

WordPress Plugins

Scale your WordPress Business

WooCommerce Plugins

Scale your WooCommerce Business

LearnDash Plugins

Scale your LearnDash Business

Label

Title

Subtext

Label

Title

Subtext

Join our 55,000+ Subscribers

    The Wisdm Digest delivers all the latest news, and resources from the world of open-source businesses to your inbox.

    Suggested Reads