The Right Way To Add Custom Quicktags

Ever since WordPress introduced quicktags, people have been wanting to customize them. Naturally, a lot of tutorials popped up, demonstrating how to do this. The problem is that all of them require that you edit quicktags.js, a file in WordPress.

But it doesn’t have to be that way now, since newer versions of WP have a script loading API. So here’s a better way to do it, without modifying any core files:

First, we make a basic plugin file, where we tell WP to load some javascript, right after loading the quicktags script:

/*
Plugin Name: My Custom Quicktags
Version: 1.0
*/

add_action('admin_print_scripts', 'my_custom_quicktags');
function my_custom_quicktags() {
	wp_enqueue_script(
		'my_custom_quicktags',
		plugin_dir_url(__FILE__) . 'my-custom-quicktags.js',
		array('quicktags')
	);
}

Now, instead of modifying quicktags.js, we add our quicktag code in a separate file:

edButtons[edButtons.length] = new edButton( 'sup', 'sup', '<sup>', '</sup>', '' );

Feel free to modify this to suit your needs.

The benefit of this method is that when you upgrade WordPress, your quicktag(s) will still be there.

I’ve made a .zip with these two files, which you can download and install as a regular plugin. It has been tested on WordPress 2.8.1 and 2.7.1.

Download

I’d love to know what quicktags you make with this tutorial, so feel free to share in the comments.

Update

It seems someone has taken this a step further, with the Post Edit Buttons plugin. More power to him :)