How to Insert custom Quicktags into the WordPress Editor

WordPress has two type of editor, one is visual/wysiwyw that is tinymce or replace with other such editors and another is HTML editor that is we call quick tag editor. Today, I want to write something about how to add custom quick tags or custom buttons. I search about it in google and most guides to edit core quick tag javascript file. But I don’t like that and I made my own hack in my own way, though experts may think it’s childish 😛

So let come to point, I wanted to add some buttons that will give me option to add custom class name so that I can format the text well. Same thing can be done via Visual editor but you have to use a plugin named “Tinymce Advanced” which helps to add more advance buttons like styles(class lists) and so on. But for HTML mode or for quick tags editor I didn’t such plugins.

Let’s start , output will be like the bellow image

Step 1: Adding action for editor

add_action( 'edit_form_advanced', 'manchumahara_quicktags');
add_action( 'edit_page_form',');

Step 2: Function to hook

function manchumahara_quicktags()
{

    ?>
    <script type="text/javascript" charset="utf-8">
    // <![CDATA[
        //edButton(id, display, tagStart, tagEnd, access, open)
        edbuttonlength = edButtons.length;
        edbuttonlength_t = edbuttonlength;
        //alert(edButtons);
        edButtons[edbuttonlength++] = new edButton('ed_itemname','Item Name','<span class="itemleft">','</span>');
        edButtons[edbuttonlength++] = new edButton('ed_itemprice','Item Price','<span class="itemprice">','</span>');
        edButtons[edbuttonlength++] = new edButton('ed_itemcaption','Item Caption','<span class="itemcaption">','</span>');
            //alert(edButtons[edButtons.length]);
               (function(){

              if (typeof jQuery === 'undefined') {
                     return;
              }
              jQuery(document).ready(function(){
                     jQuery("#ed_toolbar").append('<br/><input type="button" value="Item Name" id="ed_itemname" class="ed_button" onclick="edInsertTag(edCanvas, edbuttonlength_t);" title="Item Name" />');
                     jQuery("#ed_toolbar").append('<input type="button" value="Item Price" id="ed_itemprice" class="ed_button" onclick="edInsertTag(edCanvas, edbuttonlength_t+1);" title="Item Price" />');
                     jQuery("#ed_toolbar").append('<input type="button" value="Item Caption" id="ed_itemcaption" class="ed_button" onclick="edInsertTag(edCanvas, edbuttonlength_t+2);" title="Item Caption" />');
              });
       }());
    // ]]>
    </script>
    <?php

}

Explanation: Here I have added three buttons named “Itemname”, “Itemprice” and “Itemcaption” and after those buttons are clicked with some text selected each will put a span class and so so…

I have used jquery to push the buttons to edButtons array. To see how the quick tag js works see the file in wp-inclides/js/quicktags.dev.js for better sense.

2 Responses to “How to Insert custom Quicktags into the WordPress Editor”

Leave a Reply

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