Adding a custom style button in the WordPress post editor

So my title is a little misleading as what we're creating is largely based on what your definition of a button. However, the point still stands :)

Here is an example of what we'll be creating today.

A quick note before we dive in, if you want to exactly copy my button, then you'll need to make Font Awesome accessible within the WordPress admin area. The easiest way to do this is to install the Better Font Awesome plugin from the WordPress repo, which can keep your site updated with the latest version of Font Awesome and adds an interface to add icons to your WordPress posts and pages.

So essentially this is a simple two step process. First, we need to show the styleselect dropdown for TinyMCE. This is that "Formats" dropdown from the screenshot above. I think putting a button here makes the most sense as it's largely presentational while the default dropdown (with Paragraph & Heading 1) changes the physical element being edited. After we add this, we can insert some new options for that dropdown via a filter. The documentation here is pretty shoddy, but essentially, each new style is an array with some parameters. If you want to add more buttons, just copy the array containing the title, and change the parameters as necessary. You can read a little more about style formats on the TinyMCE wiki entry, though a lot of code digging will probably be necessary if you want to heavily customize your elements.

In my example, buttons are created by simply appending a class to the element and then a stylesheet loaded with addeditorstyle() makes sure everything looks correct.

The WordPress codex has a little documentation on doing this as well so check there if you're having some issues.

https://gist.github.com/Daronspence/a67a2e3ad6b203a517a6

Here is a handy GIF of what the setup could look like as long as you have editor styles setup properly.

Leave a comment if you have any questions and I'll try to do my best help answer them! :)