Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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!
add_action('admin_footer','custom_editor_buttons');

function custom_editor_buttons() {
    ?>
    <script type="text/javascript" charset="utf-8">
    <!--  Define our Editor buttons -->
    edButtons[edButtons.length] = new edButton(
        "hed_0",
        "Citation",
        "[ref]",
        "[/ref]",
        ""
    );
    edButtons[edButtons.length] = new edButton(
        "hed_1",
        "highlight",
        "[highlight]",
        "[/highlight]",
        ""
    );

    jQuery(document).ready(function (b) {
        <!--  Empty editor button tray -->
        <!-- then re-build it with our custom buttons -->
        jQuery("#ed_toolbar").empty();
        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 + '" />');

    });
    </script>
    <?php
}
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

2 Answers 2

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:
         * - Button HTML ID (required)
         * - Button display, value="" attribute (required)
         * - Opening Tag (required)
         * - Closing Tag (required)
         * - Access key, accesskey="" attribute for the button (optional)
         * - Title, title="" attribute (optional)
         * - Priority/position on bar, 1-9 = first, 11-19 = second, 21-29 = third, etc. (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>' );
        </script>
    <?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 at 3:59

Your Answer

 
discard

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.