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.

<?php
// Callback function to insert 'styleselect' into the $buttons array
function prefix_mce_buttons( $buttons ) {
array_unshift( $buttons, 'styleselect' );
//var_dump($buttons);
return $buttons;
}
// Register our callback to the appropriate filter
// _2 places the new button on the second line
add_filter('mce_buttons_2', 'prefix_mce_buttons');
// Callback function to filter the MCE settings
function prefix_mce_before_init_insert_formats( $init_array ) {
// Define the style_formats array
$style_formats = array(
// Each array child is a format with it's own settings
array(
'title' => 'Button',
'selector' => 'a',
'classes' => 'button',
// font awesome must be available in the admin area to see the icon
'icon' => ' fa fa-hand-pointer-o'
),
);
// Insert the array, JSON ENCODED, into 'style_formats'
$init_array['style_formats'] = json_encode( $style_formats );
return $init_array;
}
// Attach callback to 'tiny_mce_before_init'
add_filter( 'tiny_mce_before_init', 'prefix_mce_before_init_insert_formats' );

view raw
custom-button.php
hosted with ❤ by GitHub

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 with a recent interest in Laravel. 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 *