How to add custom buttons in WordPress TinyMCE Editor?

WordPress comes with a visual editor of TinyMCE by default. You can use this to add and edit posts and pages. There are several buttons on the editor toolbar that you can use to format the content. You can also add your own buttons to the editor toolbar. Creating  custom TinyMCE buttons is a great feature that can add a lot of value to WordPress plugins or themes. In this article, we’ll show you how to add or remove some existing buttons that are hidden by default in WordPress and create your own custom buttons.

Do these tasks by following the example codes below, enter this code into the current active theme in the function.php file or add it to the new plugin or click the github button below to get the complete source code.
Custom buttons in WordPress Page or Post Editor.

1.How to add TinyMCE Editor Available Buttons ?
WordPress’s part of the available options for TinyMCE was disabled to clean up the interface. They can be added without too much power. It’s pretty easy and straight in advance to find all available buttons in TinyMCE documentation and WordPress provides a “mce_buttons” filter group that lets you add or remove buttons on the TinyMCE toolbar. Please follow the buttons built-in, but hidden buttons, such as copy, cut, and paste the example below.

Added TinyMCE Editor Available Buttons
2.How to hide or remove TinyMCE Editor Available Buttons ?

Hide or remove TinyMCE Editor Available Buttons

3.How to create your own custom buttons in WordPress’s TinyMCE Editor?
Adding a custom button to a very simple, you can do a simple three step process, you need to add a button (i.e with filter hook “mce_buttons”), load a JavaScript file (i.e with filter hook “mce_external_plugins”) and enter the contents of the JavaScript file.Today I will introduce a basic example, using the short code(i.e [logged_users] logged users content [/logged_users]) of my previous article “How to Restrict Content in WordPress to Logged & Non-Logged in Users ?“, you will find an additional example available from TinyMCE Editor documents.

i.Initialize process for registering your custom TinyMCE buttons.

ii.Add plug-in js files and buttons to TinyMCE.

iii. Create a TinyMCE plugin file (i.e custom_editor.js) that tells TinyMCE what to do when we click a button.

 TinyMCE Editor Custom Buttons

I hope it is useful to create various custom buttons on WordPress TinyMCE Editor themes and plug-ins, then please Subscribe to ScriptHere.Com by Email. You can also find us on Facebook and Twitter. If you have any comments or queries, please do the following in the comments section.

Thanks, HaPpY Coding …!

2 replies to How to add custom buttons in WordPress TinyMCE Editor?

  1. Where do I put the custom js file?

    • // if your using code in theme use get_template_directory_uri with – ‘path/to/custom_editor.js’;
      //$url = get_template_directory_uri().’/assets/custom_editor.js’;
      // if your using code in plugin use plugins_url with – ‘path/to/custom_editor.js’;
      $url = plugins_url().’/custom-tinymce-buttons/assets/custom_editor.js’;

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.