Tuesday, July 12, 2011

Adding WordPress Quicktag Buttons to a WP Plugin

Disclaimer: I am a total noob when it comes to WordPress and WordPress plugins.

I was wondering how difficult it would be to add a button to the WordPress Post Editor. I've seen a few plugins do it, but I discovered that they had to add their own version of TinyMCE to do it.

So I searched around on the internet, and found a few methods. But they either stopped working or required you to edit your quicktags.js file to work, then again after each Wordpress update. So I looked into it and I found a solution that works with the current version 3.2 and hopefully future versions without requiring you to edit or replace the quicktags file.

Before

After

Note: This code is intended to be added inside your WordPress plugin. Like I said, I'm a total noob with WordPress so I'm not sure if it would work outside of a plugin.

CSS - This CSS should be outside of the php tags
<style>
/* Simulate the input buttons styles */
#ed_toolbar button {
 display: inline-block;
 vertical-align: middle;
 margin: 0;
 padding: 0;
 min-width: 26px;
 height: 24px;
 -moz-border-radius: 3px;
 -webkit-border-radius: 3px;
 border-radius: 3px;
 border: #c3c3c3 1px solid;
 background: url() repeat-x;
}
#ed_toolbar button:hover {
 border: #aaa 1px solid;
 background: #ddd;
}
/* toolbar button images in span */
#ed_toolbar button span {
 display: inline-block;
 background: transparent no-repeat center center;
 padding: 4px 2px;
 width: 16px;
 height: 16px;
}

/* toolbar custom button image */
#_custom span {
 background-image: url(/wp-content/plugins/my-plugin-directory/my-plugin-icon.png);
}
</style>

PHP - Add this to your plugin php
<?php
add_action('admin_footer', 'my_plugin_add_button');

function my_plugin_add_button(){
echo <<<EOT
<script>/* <![CDATA[ */
var j, n,
 last = edButtons.length,
 tbar = '';

// add a new editor button as follows:
// edButtons[edButtons.length] = new edButton('BUTTON ID', 'BUTTON TEXT', 'OPENING TAG', 'CLOSING TAG', 'ACCESSKEY');
// Example: edButtons[edButtons.length] = new edButton('_h1', 'H1', '<h1>', '</h1>', -1);
edButtons[edButtons.length] = new edButton('_h1', 'h1', '<h1>', '</h1>', "h");
edButtons[edButtons.length] = new edButton('_h2', 'h2', '<h2>', '</h2>', -1);
edButtons[edButtons.length] = new edButton('_h3', 'h3', '<h3>', '</h3>', -1);
edButtons[edButtons.length] = new edButton('_h4', 'h4', '<h4>', '</h4>', -1);
edButtons[edButtons.length] = new edButton('_h5', 'h5', '<h5>', '</h5>', -1);
edButtons[edButtons.length] = new edButton('_h6', 'h6', '<h6>', '</h6>', -1);
edButtons[edButtons.length] = new edButton('_custom', '<button>', '[myplugin_short_code]', '', -1);

// Don't change anything below
// ***************************
for ( j = last; j < edButtons.length; j++) {
 n = edButtons[j];
 if (/<button>/g.test(n.display)) {
  // matched opening tag => add a button
  tbar += '<button id="' + n.id + '" type="button" class="ed_button" onclick="edInsertTag(edCanvas, ' + j + ');"><span></span></button>';
 } else {
  // add an input
  tbar += '<input type="button" id="' + n.id + '" accesskey="' + n.access + '" class="ed_button" onclick="edInsertTag(edCanvas,' + j + ');" value="' + n.display.replace(/\"/g,'\"') + '" />';
 }
}
document.getElementById('ed_toolbar').innerHTML += tbar;
/* ]]> */</script>
EOT;
}
?>

4 comments:

  1. Thanks it was useful. The only problem n.display.replace(/\"/g,'\"') looks wierd

    ReplyDelete
  2. Hiya!

    I did that in case the plugin shortcode had any quotes inside of it, so basically that replaced any quotes with an escaped quote... maybe I did that wrong?

    ReplyDelete
  3. Thanks for this. :)
    For info adding the new elements to the "edButtons" array is sufficient for them to appear on the backend, no need to update "ed_toolbar" node.

    ReplyDelete
  4. Yay! It works! THANK YOU for this! You figured out how to do this very simply (everything else I found seemed super complicated and didn't sit well with me). This code also works in a theme's functions.php.

    Just one thing, I'm using WP 3.4 and adding it to the admin_footer put it above the quicktags.js, so instead I added it to "admin_print_footer_scripts" with a priority of 999:

    add_action('admin_print_footer_scripts', 'my_plugin_add_button', 999);

    Then it worked. :) And as @Junelsa said, you don't need the tbar portion of the script. The button would just use whatever name you want (like the shortcode's name).

    Thanks again!

    ReplyDelete

Note: Only a member of this blog may post a comment.