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.

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.

TinyMCEin WordPress with Font Options

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

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.

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:

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

Add a Button to TinyMCE in WordPress

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:

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 🙂

Looking to Customize your WordPress Website?

Send Your Development Worries to Us! Our Expert WordPress Developers can provide you a custom solution to meet your business needs.

Comments

Paul:

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).