How to add buttons to the wordpress editor

by krike in Tutorials / wordpress on 26 Apr 2012


Ever wanted to add a custom button to the WP editor for your free/personal/commercial plugin? in this quick tip I will guide you through the steps towards this goal. This is what we will be creating:

Tip: Make sure to enqueue jQuery! We will need it later on.

Freebee

If you wish to have a more complete version of this plugin go to our main site and grab your copy. The freeplugin is based on this tutorial but has a more complete list of the most wanted & popular shortcodes.

step 1. Create a new plugin

For this quick tip we will quickly create a new plugin, so in the plugin folder create a new folder named custom_editor_button and in that folder create a new file named index.php. In that file add the following comment block to the file.

 <?php /*
 Plugin Name: thickerbox example
 Plugin URI: http://cmstutorials.org
 Description: A simple plugin to add a button to the editor which will open a thickerbox window
 Author: CMS tutorials
 Version: 1.0
 Author URI: http://cmstutorials.org
 */
 

This is the required infor for every WordPress plugin. WordPress won’t recognize the plugin without this info.

step 2. Create the actions

We now need to create 2 actions, the first one will add a button to the editor and the second one will provide the content of the thickerbox modal window.

 add_action('media_buttons', 'thickbox_shortcodes', 11);
 add_action('admin_footer', 'thickbox_content');
 

The second parameter links to functions which we still have to create

step 3. Create the functions

The first function to create is thickbox_shortcodes, this will add the button to the editor. We talk about a button but it is actually nothing more than an image with a link.

 function thickbox_shortcodes() {
     ?>
 <a id="thickbox_shortcode_button" title="Available Shortcodes" class="thickbox" href="#TB_inline?width=670&inlineId=thickbox_shortcode_window">
         <img src="<?php echo bloginfo('url'); ?>/wp-admin/images/media-button-other.gif" alt="" width="18px" height="18px" />
     </a>
 <!--?php  }  

The most important here is the content of the href attribute: inlineId=thickbox_shortcode_window. inlineId matches the id div of the thickerbox content. Which we will create now.

  function thickbox_content(){  ?></pre>
<div id="thickbox_shortcode_window" style="display: none;">    <!-- thickerbox content here --></div>
<pre>
 <!--?php <br ?--> }
 

the id of the div must match the inlineId specified in the href of the button.

Step 4. add list of shortcodes

Now let’s add some content to the thickerbox modal window. We will add a list of simple shortcodes that once clicked will be added in the wordpress editor. Very usefull if you need a quick shortcode but don’t remember the exact syntac or the number of attributes it provides.

Replace <!– thickerbox content here –> with

</pre>
<table cellspacing="0" cellpadding="5">
<tbody>
<tr>
<th>Shortcode</th>
<th>Description</th>
</tr>
<tr>
<td><a id="test1" href="javascript:void(0);">Test shortcode</a></td>
<td>Click to insert the test shortcode</td>
</tr>
<tr>
<td><a id="test2" href="javascript:void(0);">Test2 shortcode</a></td>
<td>Click to insert the test2 shortcode</td>
</tr>
<tr>
<td><a id="test3" href="javascript:void(0);">Test3 shortcode</a></td>
<td>Click to insert the test3 shortcode</td>
</tr>
</tbody>
</table>
<pre>
<script type="text/javascript">// <![CDATA[
 jQuery(function($){
 //javascript code here
 });

// ]]></script>
 

Step 5. insert shortcodes in editor on click

Now that we have our shortcode list let’s add the nescessary javascript. What we want to do is insert the shortcode when we click on the link.

 //we use unbind to prevent the click event to fire multiple times
 $('.insert_shortcode').unbind('click').bind("click",function() {
 //prepare shortcode variabel
 var shortcode = '';

 //get the id of the clicked element and load the correct shortcode
 switch(this.id){
 case 'test1':
 shortcode = '[test1 param="tester"]Content for shortcode test1[/test1]';
 break;
 case 'test2':
 shortcode = '[test2 param="tester"]Content for shortcode test2[/test2]';
 break;
 case 'test3':
 shortcode = '[test3 param="tester"]Content for shortcode test3[/test3]';
 break;
 }

 //check if visual editor is active or not
 is_tinyMCE_active = false;
 if (typeof(tinyMCE) != "undefined") {
 if (tinyMCE.activeEditor != null) {
 is_tinyMCE_active = true;
 }

 }

//append shortcode to the content of the editor
 if ( is_tinyMCE_active ) {
 tinymce.execCommand('mceInsertContent', false, shortcode);
 } else {
 var wpEditor = $('.wp-editor-area');
 wpEditor.append(shortcode);
 }
 return false;
 });
 

Let’s go over the code

  • We track the click event on the class insert_shortcode. We added an unbind event to prevent the click event to fire multiple times on one click
  • We then get the id using this.id and use it in a switch to get the corresponding shortcode
  • We add a quick check to see if the visual editor is being used or not
  • We finally write the shortcode to the editor. For the non visual editor we used the jQuery .append() to avoid overwritting the complete content of your post. but feel free to use whatever method you want
  • Finally we return false to disable the default behaviour of a link.

Conclussion

There you go, in only a few steps we added a button to the editor which opens a thickbox modal window from where you can insert shortcodes to the wordpress editor. This is of course only an example of what you can do. The next step for you is to extend this using form elements to, for example, create the shortcode attributes dynamicly. Or you could use it to add something completely different than a shortcode.

Don’t forget to download our freebee based on this tutorial. It contains a list of the most popular shortcodes.

Written by krike

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit amet nisl nisl. Ut interdum libero vitae quam ultricies et lacinia elit aliquet. Praesent tincidunt, sem tempus feugiat feugiat, turpis tellus scelerisque erat, sit amet feugiat neque arcu ac lectus. Sed at mi et elit interdum scelerisque vitae eu felis.

krike has written 77 posts.

  • Tom

    Very useful thanks, but don’t you need to add class=”thickbox” to the link to make it work??

    • http://cmstutorials.org krike

      @Tom: you are correct. I must have missed it, I will update the code asap.

      • krike

        tester

  • krike

    test