Over the years, it’s been really neat to see how the WordPress project has incorporated the TinyMCE editor into the software. That is, it’s one thing to include it into the core project, but it’s another thing to add features to it (and around it) that help improve the writing experience.
But as developers, we’re often tasked with introducing another feature into the software. Sometimes this comes in the form of adding something like custom taxonomies or custom post types.
Other times, it comes in the form of having to introduce a new button to the TinyMCE editor. When you do that, you’re working simultaneously with the WordPress API and you’re working with the TinyMCE editor API.
Over the next few posts, I’m going to outline the process that I take whenever this is needed. Ultimately, this will aim to provide a foundation and set of steps that can be followed if you need to do the same thing, as well.
TinyMCE Buttons and WordPress
As previously mentioned, when adding a new button, you’re going to need to work with both the WordPress APIs – such as using a couple of filters and hooks – and you’re going to need to work with the TinyMCE API (which has its own documentation) in order to introduce the button and integrate it into WordPress.
Throughout this series of posts, I’ll show you how I typically go about doing this. Note that I use an object-oriented approach to building my plugins so this may not jive with with your particular style of writing code, but the gist of how to do it is still there.
Plus, I’m planning on starting small and gradually integrating more as the series moves forward. But enough chatting about what I’m going to do.
Let’s look at some source code.
1. Define Your Project’s Organization
This step should be pretty self-explanatory. How you opt to organize your code is your business. How I’ve opted to do so is below:
Here’s a short description of what each file in the directory does:
- `acme-editor-button.php` is the plugin file that bootstraps the entire plugin and sets everything into motion
- `admin` is a directory that includes all files relevant to what will appear throughout the dashboard as the plugin is under development
- `admin/assets` includes all of the assets needed to power the plugin
- `admin/assets/img` has the image (or images) that will be used to add a button to the TinyMCE editor in WordPress
- `CHANGES.md` is the changelog
- `config.codekit` is the file that’s created by CodeKit to store its configuration settings
- `includes` has all of the files necessary to help power the plugin. In this class, it just includes a `Loader` class that’s sole responsibility is to handle actions and filters.
- `LICENSE` is a copy of the GPL
- `README.md` is a copy of the instructions for how to use the plugin
Straightforward stuff. Some of the files are more populated right now than others, some will grow over time, and some will be added as we continue to build out the plugin.
The initial file should look something like this:
However when it comes to actually enqueuing this file with WordPress, we don’t use the standard
admin_enqueue_scripts hook. Instead, we use a different set of filters.
If you’re not familiar with object-oriented programming, this part can be a little bit confusing so I’m only going to talk about the hooks that are necessary to register the button.
In a follow up post, I’ll go into more detail as to how to organize the classes to these hooks are contained in the proper classes, and said classes communicate with one another.
First, you need to two define two hooks (which means that you’ll need to define two filters):
For the first hook, the definition and corresponding function will look something like this:
For the second hook, you’ll need to register button. The definition for this hook and the corresponding hook will look about like this:
return the updated array.
In the next post, we’ll look at how the above functions fit into the context of a single class. From there, we’ll then look at how other plugin classes can communicate with said class and we can actually make the TinyMCE button in WordPress do something useful for us.