How to add custom quicktag buttons to your Text Editor

When you work with Text Editor, more often than not you will need quicktag buttons to help you generate simple HTML tags which you use on a regular basis. WordPress already has a few of standard elements which will add tags for italic, bold or help you in creating links, for example. But what if you need some other HTML tag which is not listed in the buttons? You can add one yourself.

wordpress-editor-quicktags

Let’s say you need a DIV tag which centers your text or you often use one of the heading tags for your titles. If you use them on a regular basis, you would have to manually type the tag every time you want it to appear and you think it would be easier just to add a button which contains everything you need.

Of course, there are many free plugins which will give you the opportunity to easily add a button, like AddQuicktag, Jayj Quicktag or Basic Comment Quicktags.

But in this article we aren’t going to talk about those plugins. Instead, here you can find the entire code you need for manually adding custom quicktag button:

  1. Open functions.php file
  2. Copy and paste the following code:
  3. function custom_quicktags() {
    if ( wp_script_is( 'quicktags' ) ) {
    ?>
    <script type="text/javascript">
    QTags.addButton( 'div_element', 'Center', '<div align="center">', '</div>', 'd', 'Center', 1 );
    </script>
    <?php
    }
    }
    add_action( 'admin_print_footer_scripts', 'custom_quicktags' );
  4. Save changes

The part you want to change in order to customize your button is a QTags.addButton API:

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

Don’t worry; it isn’t that hard and the following descriptions will help you:

  • id: This the HTML ID of your button which you can use later to recognize it; make it simple
  • display: Text which will be shown on your button
  • arg1: Starting part of your tag or a callback which is being executed once you click on the button
  • arg2: Ending part of the tag; leave empty if your tag does not need one
  • access_key: Shortcut to your button; leave empty if you don’t need one
  • title: The HTML title value for the button
  • priority: A number which tells in which position your button will appear. 1 – 9 = first, 11 – 19 = second, 21 – 29 = third, etc.
  • instance: Limit the button to a specific instance of quicktags

Examples:

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 );

 

But hey, who says it is the HTML element you have to put in the button. Maybe it is a word or a phrase you need to write over and over and again. Yeah, you can put one into a button. In that case, all you have to do is write the word/phrase into ‘arg1’ and leave ‘arg2’ empty:

QTags.addButton( ‘my_word’, ‘My Word’, ‘This is my sentence’, ”, ‘w’, ‘My Word’, 1 );

START YOUR OWN BLOG

This guide is an introduction to mastering the art of blogging. It provides easy to follow steps to start, maintain, and grow your blog.

Read the guide

Leave a Reply

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