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.

Screen Shot 2015-09-21 at 5.01.02 PM

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

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

button-in-action

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

Author: Daron

Professional WordPress enthusiast and developer. When not doing WordPress, he enjoys Netflix and playing Nintendo. He is also available for freelance opportunities. Get in touch to hash out the details.

2 thoughts on “Adding a custom style button in the WordPress post editor”

  1. After hours of searching and trial and error… THANK YOU!!! this is the only page that has the correct script that worked for me and now my Formats Drop Down Menu is Stylized!!!

    Awesome!! Thanks.

  2. ooops!! I actually posted this on the wrong site. LOL. Your code above did not work for me…. but while i’m here I will show you what helped.

    ‘add_filter( ‘tiny_mce_before_init’, ‘fb_mce_before_init’ );
    function fb_mce_before_init( $settings ) {

    // customize as desired

    // unset the preview styles
    unset($settings[‘preview_styles’]);`

    return $settings;
    }’

Leave a Reply

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