I am looking for adding custom quicktag buttons, that would allow me to display a intermediary dialog before inserting the code.


  1. Clicking a quicktag button opens a dialog or thickbox modal window.
  2. Opened dialog displays some options on the class, etc and an Insert button.
  3. Clicking "Insert" button inserts the code.


To add an quicktags button, we would use

edButtons[ edButtonsLength+ ] = new edButton(
    'ed_mybutton' , 'Insert button', '<div class="class-name">', '</div>'
edHTML += '<input type="button" value="Insert custom code" id="ed_my_button" class="ed_button" onclick="edInsertTag( edCanvas, edButtonLength_t + 1)" title="Insert code" />';

Now how can i bypass the button to open a dialog(or thickbox modal) instead?

I can add a button without defining it, like

edHTML += '<input type="button" value="Insert custom code" id="ed_my_button" class="ed_button" onclick="customFunction()" title="Insert code" />';
// and
var customFunction = function() {
   openURL = '<?php admin_url() ?>admin-ajax.php?action="insertCodeAction&TB_iframe=true';
   tb_show( 'Insert custom code', openURL );

Please share your wisdom. Thanks in advance.

PS: doing this with TinyMCE is relatively easy, i wonder how do i do that with HTML quicktags. :)


According to the Codex, you can't do this directly through the API. However, you can do it by using your own quicktags.js file as shown below.

function sample_load_admin_scripts()
  if ( is_admin() ) {
    wp_register_script('quicktags', ("/path/to/your/quicktags.js"), false, '', true);

if (is_admin()) {
  add_action('init', sample_load_admin_scripts);

Then just add Javascript to do your work. The formatting is relatively easy, but since you know how to do everything with TinyMCE I'm not going to go into that. Go get a quicktags.js file of your own here.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.