WordPress Shortcode TinyMCE Button Tutorial Part 2

We have learned the concept of WordPress shortcodes in the part 1 of tutorial. I have covered the following concepts in the part 1.

• What are Shortcodes?
• Simple Shortcode [sayhello]
• Advanced Shortcode – Adding Attributes

I will recommend to have a review at WordPress Shortcode Tutorial: Simple to Advanced Part 1. We will add following button of our shortcode [mylink] in the TinyMCE editor at the end of this tutorial. We have already learned and build [mylink] shortcode in the first part of tutorial.

ShortCode TinyMCE Button

We have created [mylink] shortcode in our part 1, but the user has to remember the shortcodes in the correct format for the proper usage. Additionally, the situation becomes more complex in case of more than one shortcodes as it is difficult to learn all ones. To handle this, we’re going to add buttons directly to the TinyMCE interface, so the user can simply click on the button to get it all done.

All codes in the following steps (except Step 5) will be written in the “functions.php” file.

Step 1: Hook into WordPress

The first step in the process is hooking into WordPress and adding our initialization code. This can be done by following code snippet.

/**
Hook into WordPress
*/

add_action('init', 'mylink_button');

WordPress will run our function “mylink_button” when the page is initially loaded. add_action is our hook into WordPress internals.

Step 2: Create Our Initialization Function

It is time to write our function “mylink_button” as we have instructed WordPress to load this function at the time of page initialization. Let’s have a look into the code snippet of “mylink_button” function.

/**
Create Our Initialization Function
*/

function mylink_button() {

   if ( ! current_user_can('edit_posts') && ! current_user_can('edit_pages') ) {
     return;
   }

   if ( get_user_option('rich_editing') == 'true' ) {
     add_filter( 'mce_external_plugins', 'add_plugin' );
     add_filter( 'mce_buttons', 'register_button' );
   }

}

What we are doing in our function, let’s dissect it,

• Function will be executed when the page loads.
• We’re checking whether the user has the necessary authorization to edit a page or a post before proceeding.
• We hook up two of our (written shortly) functions to specific filters. Both of these actually hook into TinyMCE’s front end architecture through WordPress. The first is executed when the editor loads the plugins while the second is run when the buttons are about to be loaded.

If “get_user_option(‘rich_editing’)” evaluates to true, you’re in visual mode. Otherwise, HTML mode. I typically tend to add this button only under visual mode but feel free to mix and match here.

Step 3: Register Button

Following function simply adds our shortcode to the array of buttons. You can also add a divider between your new button and the previous buttons by passing in a | before.

/**
Register Button
*/

function register_button( $buttons ) {
 array_push( $buttons, "|", "mylink" );
 return $buttons;
}

Step 4: Register TinyMCE Plugin

/**
Register TinyMCE Plugin
*/

function add_plugin( $plugin_array ) {
   $plugin_array['mylink'] = get_bloginfo( 'template_url' ) . '/script/mybuttons.js';
   return $plugin_array;
}

Let’s understand our above function in the simple steps,

• The snippet above lets TinyMCE, and WordPress, know how to handle this button.
• We map our mylink shortcode to a specific JavaScript file (mybuttons.js) in our tutorial.
• We use the “get_bloginfo” method to get the path to the current template.

Step 5: Register TinyMCE Plugin

We will write following code snippet in “mybuttons.js” file which is supposed to be placed in the “script” directory of current theme.

// JavaScript Document
(function() {
    tinymce.create('tinymce.plugins.mylink', {
        init : function(ed, url) {
            ed.addButton('mylink', {
                title : 'My Link',
                image : url+'/mylink.png',
                onclick : function() {
                     ed.selection.setContent('[mylink]' + ed.selection.getContent() + '[/mylink]');

                }
            });
        },
        createControl : function(n, cm) {
            return null;
        },
    });
    tinymce.PluginManager.add('mylink', tinymce.plugins.mylink);
})();

Let’s dissect our above code snippet,

• We call the create method to create a new plugin passing in the name and other assorted attributes. For the sake of brevity, I’m just going to call my plugin quote.
• Once inside, we define the init function that’s executed upon initialization. ed points to the instance of the editor while url points to the URL of the plugin code.
• We create the event handler for this button through the onclick function. The one-liner it contains essentially gets the selected text, if any, and wraps it with out shortcode. setContent and getContent are helper methods provided by tinyMCE to manipulate the selected text.
• Finally, in the last line, we add the freshly created plugin to tinyMCE’s plugin manager. Pay attention to the names you’re using in each step. It’s error prone if you’re not paying attention. And that’s about it! We’re done! Load up the editor and make sure your spiffy new button is working.

The image you pass in is relative to the parent folder of the JS file that holds the code. Here it’d be theme directory/script.

Image source for this tutorial is: My Link Button Source

We’ve successfully integrated shortcode [mylink] into a WordPress theme in a very user friendly manner. Hopefully you’ve found this tutorial to be of help. Feel free to reuse this code elsewhere in your projects and chime in within the comments if you need any assistance.