Skip to main content
WordPress made easy with the drag & drop Total WordPress Theme!Learn More

Adding WordPress Custom QuickTags

Last updated on:

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:

wordpress-quick-tags

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:

wordpress-quicktags-api

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!

Article by Remi WPExplorer.com guest author
Subscribe to the Newsletter

Get our latest news, tutorials, guides, tips & deals delivered to your inbox.

7 Comments

  1. Ryan

    I normally use the text editor to create my blog posts. I had no idea I could create my own quick tags – this is awesome! Thanks for the great tutorial.

  2. Bucur

    Are you sure the code is correct? I put it in functions.php and nothing I came in and added Api
    Final code:
    rc_quicktags function () {
    ?>
     
    QTags.addButton (‘WPexplorerlove’, ‘WPexplorerlove’, ‘‘, ‘‘, ‘w’);

    <? php
    }
    add_action ("admin_print_footer_scripts ', rc_quicktags');

    • Remi

      Yeah the code does work, it’s been tested before posting it.

  3. Leader

    May I ask about how to add functionality to custom quicktags?
    I want to know how to make something like the default link-quicktag where a pop-up window to input additional data.

    I’m currently using javascript snippet (given by my friend) to accomplish this task. but I think this method is rather ‘crude’ since the pop-up window would have “Prevent this page from creating additional dialogues” checkbox-option upon consecutive use.

    If possible, I want to do it without installing additional plugin. Thank you.

  4. littleoslo

    i dont like to use rich format editor. but i cant find the h2 tag in the html view. too bad i know nothing anbout the coding and worry i would out the code in the wrong place and mess up the blog.

  5. Henry WrightHenry

    Doing stuff like rc_quicktags() make Quicktags so much more powerful. TinyMCE is overkill so this is a fantastic middle-ground solution. Thanks

  6. hanazair

    Worked for me exactly as the author of the post presented it. Thanks a million!

Leave a Reply

Your email address will not be published. Required fields are marked *

Learn how your comment data is processed by viewing our privacy policy here.