WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

Before the new version of Wordpress 3.0 came out I was using this jQuery code below to add custom buttons for my own shortcodes to the editor toolbar in the admin panel, it worked great. However with version 3 out now, it has stopped working, if I view source in admin panel I can see my code below is being loaded properly, it just doesn't work anymore, does anyone know what has changed or how to fix to work with the newer version?

// Add CUSTOM buttons to html editor in admin!

function custom_editor_buttons() {
    <script type="text/javascript" charset="utf-8">
    <!--  Define our Editor buttons -->
    edButtons[edButtons.length] = new edButton(
    edButtons[edButtons.length] = new edButton(

    jQuery(document).ready(function (b) {
        <!--  Empty editor button tray -->
        <!-- then re-build it with our custom buttons -->
        function hedShowButtons(button, i) {
            if ( button.id == 'ed_img' ) {
                jQuery("#ed_toolbar").append('<input type="button" id="' + button.id + '" accesskey="' + button.access + '" class="ed_button" onclick="edInsertImage(edCanvas);" value="' + button.display + '" />');
            }else if (button.id == 'ed_link') {
                jQuery("#ed_toolbar").append('<input type="button" id="' + button.id + '" accesskey="' + button.access + '" class="ed_button" onclick="edInsertLink(edCanvas, ' + i + ');" value="' + button.display + '" />');
            }else {
                jQuery("#ed_toolbar").append('<input type="button" id="' + button.id + '" accesskey="' + button.access + '" class="ed_button" onclick="edInsertTag(edCanvas, ' + i + ');" value="' + button.display + '"  />');
        for ( var i = 0; i < edButtons.length; i++ ) {
            hedShowButtons(edButtons[i], i);
        jQuery("#ed_toolbar").append('<input type="button" id="ed_tabs" class="ed_button" title="Enable and disable tabbing" value="disable tabs" />');
        jQuery("#ed_toolbar").append('<input type="button" onclick="fullscreen.on();" id="ed_fullscreen" class="ed_button" title="Enable and disable fullscreen mode" value="fullscreen" />');
        jQuery("#ed_toolbar").append('<input type="button" id="ed_spell" class="ed_button" onclick="edSpell(edCanvas);" title="' + quicktagsL10n.dictionaryLookup + '" value="' + quicktagsL10n.lookup + '" />');
        jQuery("#ed_toolbar").append('<input type="button" id="ed_close" class="ed_button" onclick="edCloseAllTags();" title="' + quicktagsL10n.closeAllOpenTags + '" value="' + quicktagsL10n.closeTags + '" />');

share|improve this question
I believe the proper way to do it is to add a tiny-mce plugin. – Milo Jan 4 '12 at 1:21
They must of changed something because all of the plugins made to do this are not working now either, on the HTML editor they are broke – JasonDavis Jan 4 '12 at 1:50
ah, you're adding buttons to the quicktags toolbar in the html tab, I was thinking buttons on the visual tab. sorry, not sure how to make those work now. – Milo Jan 4 '12 at 3:47
up vote 5 down vote accepted

I found it, Wordpress made changes and you can now add buttons through a simple API

if( !function_exists('_add_my_quicktags') ){
    function _add_my_quicktags()
    { ?>
        <script type="text/javascript">
        /* Add custom Quicktag buttons to the editor Wordpress ver. 3.3 and above only
         * Params for this are:
         * string id Required. Button HTML ID
         * string display Required. Button's value="..."
         * string|function arg1 Required. Either a starting tag to be inserted like "<span>" or a callback that is executed when the button is clicked.
         * string arg2 Optional. Ending tag like "</span>"
         * string access_key Optional. Access key for the button.
         * string title Optional. Button's title="..."
         * int priority Optional. Number representing the desired position of the button in the toolbar. 1 - 9 = first, 11 - 19 = second, 21 - 29 = third, etc.
         * string instance Optional. Limit the button to a specific instance of Quicktags, add to all instances if not present.(optional)
        QTags.addButton( 'php', 'PHP', '[ php gutter="false" ]', '[ /php]' );
        QTags.addButton( 'js', 'JS', '[ js gutter="false"]', '[ /js]' );
        QTags.addButton( 'h2', 'H2', '< h2>', '< /h2>' );
        QTags.addButton( 'h3', 'H3', '< h3>', '< /h3>' );
        QTags.addButton( 'promt', 'Prompt', function(){
            QTags.insertContent(window.prompt() )

    <?php }
    // We can attach it to 'admin_print_footer_scripts' (for admin-only) or 'wp_footer' (for front-end only)
    add_action('admin_print_footer_scripts',  '_add_my_quicktags');
share|improve this answer

Maybe this plugin helps better: AddQuicktag http://wordpress.org/plugins/addquicktag/screenshots/

this plugin allows to create any shortcodes you want. works on page, post and comment sites. prepared for visual and html view. easy to use, and safes a lot of time instead of retyping.

share|improve this answer
Answer with only a link is considered a worst answer. Please add some details how the plugin is related to the problem and how it can be used. – Mayeenul Islam Jan 31 '14 at 3:59

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

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