Adding WordPress Custom QuickTags

The WordPress QuickTags API allows you to add buttons to the WordPress admin text editor. To be honest, the text editor is probably less used than the rich editor, by the way adding quick tags can be pretty useful when repeating the same tasks pretty often.

Here is the list of default quick tags provided in WordPress:

As you can see you can create various type of buttons, assign an access key to each of them and define your own custom code easily.

To add a quick tag, you need to hook a custom function to the admin_print_footer_scripts hook. Basically, the idea is to add some custom javascript code within the admin footer. The quick tags API provides a builtin function called addButton:

QTags.addButton( id, display, arg1, arg2, access_key, title, priority, instance );

This function accepts 8 arguments:

• id: (string) (required) The html id for the button
• display: (string) (required) The html value for the button
• arg1: (string) (required) Either a starting tag to be inserted like “<span>” or a callback that is executed when the button is clicked
• arg2: (string) (optional) Ending tag like “</span>”. Leave empty if tag doesn’t need to be closed (i.e. “<hr />”)
• access_key: (string) (optional) Shortcut access key for the button
• title: (string) (optional) The html title value for the button
• priority: (int) (optional) A number representing the desired position of the button in the toolbar. 1 – 9 = first, 11 – 19 = second, 21 – 29 = third, etc
• instance: (string) (optional) Limit the button to a specific instance of Quicktags, add to all instances if not present

Here is a complete snippet that adds a WPExplorer link to the editor:

// Add buttons to html editor
add_action('admin_print_footer_scripts','rc_quicktags');
function rc_quicktags() { ?>
	<script language="javascript" type="text/javascript">
		/* Adding Quicktag buttons to the editor WordPress ver. 3.3 and above
		* - Button HTML ID (required)
		* - Button display, value="" attribute (required)
		* - Opening Tag (required)
		* - Closing Tag (required)
		* - Access key, accesskey="" attribute for the button (optional)
		* - Title, title="" attribute (optional)
		* - Priority/position on bar, 1-9 = first, 11-19 = second, 21-29 = third, etc. (optional)
		*/
		QTags.addButton( 'WPexplorerlove', 'WPexplorerlove', '<a href="http://wpexplorer.com" target="_blank">', '</a>', 'w' );
	</script>
<?php
}

Here is the result:

To use that quick tag, click once on it, it will insert the beginning of the <a> tag, add some text, and click the button again, this will add the closing </a> tag. That’s it!

If you have any question or recommendation, please leave a comment!