Understanding the Basics of WordPress QuickTags API

WordPress comes with 17 built-in APIs. Each of the API helps to embed additional functionality, and thereby helps to make WordPress one of the most flexible content management system. One such great API is the Quicktags API that gives WordPress users as well as the developers, ability to insert extra buttons in the Text (or HTML) mode of WordPress editor.

Reading this tutorial, will help you become familiar with the Quicktags API. In addition, you will also learn the process of using this API for creating custom buttons for the HTML editor.

There are many reasons that helps in making WordPress so popular as a CMS. But, one of the biggest reasons behind its popularity is the simple to use and user-friendly text editor: TinyMCE. It is arguably one of the best WYSIWYG editors, offering effortless content editing experience. It provides a preview of the content that is about to be published. However, often users don’t wish to see the content and rather are interested in viewing the source code behind the content.

 In a nutshell, when users are on the “Visual editor”, they might feel the need to check out the source code. This can be achieved with the help of “HTML editor”. You can view your website content source code from the WordPress editor, by opening the HTML tab on the right at the top of the WordPress editing screen.

 You can find several other tabs placed on the top of the WP editor, which are also known as Quicktag buttons. They allow to edit the content without having to switch back to the Visual mode. And thanks to the Quicktags API, apart from the existing buttons we can create additional buttons based on our needs.

The Quicktags API is easy to use, as you only need to use a single function, as follows:

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

As you can see the Qtags.addButton() function contains 8 parameters, let us look at these parameters one by one:

• id (string, required): this parameter specifies the HTML ID for the Quicktag button.
• display (string, required): it determines the HTML value for the button.
• arg1 (string or function, required): it specifies the starting tag (like <span>) that needs to be inserted or the callback function.
• arg2 (string, optional): determines the ending tag (such as </span>) if required.
• access_key (string, optional): tells about the access key for the Quicktag button.
• title (string, optional): defines value of the HTML title for the button.
• priority (integer, optional): determines the position where the button will be plaed in the toolbar.
• instance (string, optional): it specifies a specific Quicktags instance where the button will be added.

Example: Demonstrating How You Can Add a Custom Button to the HTML Editor

In the beginning, you may find The Quicktags API a little complicated (especially when you don’t have much knowledge about the JavaScript); but you can create Quicktag buttons easily, once you become familiar with the basic code structure needed for creating such buttons, as follows:

 // code to add more (custom) buttons to the html editor
function mytheme_add_quicktags() {
    if (wp_script_is('quicktags')){
?>
    <script type="text/javascript">
    QTags.addButton( 'eg_paragraph', 'p', '<p>', '</p>', 'p', 'Paragraph tag', 1 );
    QTags.addButton( 'eg_hr', 'hr', '<hr />', '', 'h', 'Horizontal rule line', 201 );
    QTags.addButton( 'eg_pre', 'pre', '<pre lang="php">', '</pre>', 'q', 'Preformatted text tag', 111 );
    </script>
<?php
    }
}
add_action( 'admin_print_footer_scripts', 'mytheme_add_quicktags' );

In order to add a quick tag, a custom function needs to be hooked to the admin_print_footer_scripts WordPress action hook. And as we had discussed above, the quick tags API built-in function “Qtags.addButton” helps to add new buttons such as: ‘p’, ‘hr’ and ‘pre’. However, you can replace these buttons with your own custom ones based on your needs.

If you want more flexibility when working in the WordPress HTML Editor, then QuickTags API best suit your needs. Thanks to the API, you can add additional buttons in the WP editor when opened in the HTML mode. This will help you provide better control over developing a theme or a plugin. Hope reading this post will help you understand the basics of QuickTags API and how it can be utilized.