How To Add A Custom Button To WordPress TinyMCE Editor

By -

You know what’s the best part about using WordPress? You can customize WordPress just the way you want! Today, I’ll show you how to add a custom button to WordPress TinyMCE Editor. You can use this for your plugins or you can use your favorite button to TinyMCE

For those who are wondering, WordPress uses TinyMCE editor as its visual editor. So, we are going to use TinyMCE API to create a TinyMCE plugin. It’s really easy. Instead of using functions.php file, I’d recommend you to create a site-specific plugin for this task.

Registering A New TinyMCE Plugin

First, we need to register our button with WordPress to integrate it into the TinyMCE editor. Here’s the code:

Us used mce_external_plugins filter to register a new plugin to TinyMCE. We added the plugin ID (mycodebutton) and the URL pointing to our shortcode.js file, which will do the action. We also used mce_buttons hook to tell the TinyMCE which buttons in our plugin we want to show in the editor.

The codebutton is the ID value our button. We will create code button, which will wrap text in TinyMCE within the <code> element. We need to create shortcode.js file within our plugin folder, which will do the rest of the action.

Creating Buttons

Now, we will create shortcode.js file, which will be according to TinyMCE’s API. So, here’s the code that we will put in shortcode.js file:

First, we added the title, cmd, and image of the button Then, we added the action of our button. Our button will wrap selected code within a the <code> element.

Hope this article helped you. If it helped you then please consider making a small amount of donation. Any amount, even $1.00, is appreciated.

Teen blogger and a huge pro-wrestling fan. Also known for bunch of websites. Formerly worked as a lawn gnome and scare crow.

Leave a Reply

Are you concerned about your WordPress website's security? Download our FREE PDF book to learn about WordPress security and how you can make your WordPress hacker-proof!