• WordPress Add/Remove quicktags simple editor buttons in 3.3+

    by  • October 31, 2011 • WordPress-Dev • 9 Comments

    Quicktags Buttons on WordPress Write Panel
    If you’re wanting to customize the administrator area of WordPress and you’ve come to the point where you need to modify the Add/Edit Post/Page editor, then you will quickly realize how difficult this can be in 3.2.1 and earlier.  Disabling the TinyMCE editor is easy enough using the ‘user_can_richedit‘ hook as metioned in this WordPress Answers thread, but if you’re wanting to edit the edToolbar, the one with basic buttons to aid in plain text editing, it required modifying core files which isn’t recommended since your changes will get wiped when you update WordPress.

    3.3 brings fresh new enlightenment for quicktags.js customizing

    The fancy little toolbar is thanks to a javascript by Alex King and called WordPress Post Formats Admin UI.  It is a very neat little Javascript that was added to WordPress as of 3.1 that makes it easier for non-HTML savvy people to quickly add basic tags to their content when rich text editing or TinyMCE is disabled.  But customizing it through plugins and themes didn’t seem to be the goal and it required manually editing the /wp-includes/js/quicktags.js file to add buttons as mentioned in the post Add/Remove Buttons from the WordPress Write Panel (which mentions NOTHING about removing buttons….).  I was getting ready to submit a couple of patches to add hooks allowing for proper customizing until I was told to take a look at the Subversion Trunk and saw this was one area that has gotten a major overhaul.

    There was a major rewrite of quicktags.js, which fixes the issue of JS errors when removing the buttons WordPress adds to the panel, and the good ole the_editor() function has been retired to the deprecated file and replaced by wp_editor(), which was written to allow better customization.  The new wp_editor() can be found in  wp-includes/general-template.php.

    Setting Default/Removing buttons from the Write Panel – the quicktags_settings hook

    Ok, ok, so perhaps some of you don’t care to know all of that and just want to set default/remove buttons on the write panel. (See below on how to add new ones)
    Well as of revision 18766, a new filter quicktags_settings has been added, which passes the filter hook two parameters:

    Parameter 1:

    Parameter 2:

    So it’s pretty straight forward at this point, we just need to add values to either ‘buttons’ or ‘disabled_buttons’ to modify the buttons.
    To save you some time and trouble, here’s a full list of the default buttons:

    !!IMPORTANT!! - The values cannot have spaces around the commas or else they won’t work correctly.  See the examples shown here.

    Setting Which Buttons To Show

    Set Which Buttons To Disable/Remove

    Add custom buttons to the WordPress Write/HTML Panel

    I hoped this was better integrated through a PHP function or something, but it didn’t happen.  However, it is easier to add them due to the changes and it’s not too complicated, so here’s how we go about doing that.
    The ‘code-savvy’ instructions can be found in wp-includes/js/quicktags.dev.js in the qt.addButton function’s docblock.  For those just wanting the “copy/paste” explanation, here ya go:

    Video Tutorial


    And there you have it!  With the combination of the above filters, hooks, and functions, you can fully modify what buttons show on the Editor Panel in WordPress.

    One note I’d like to mention is at this time, the code for 3.3 is still being developed, so if this changes before it’s release, I’ll try to update this information to reflect the changes. Let me know if I missed something.

    About

    I'm a freelance PHP developer spending much of my time deep in WordPress theme and plugin development. My personal info can be found at http://amereservant.com .

    http://myownhomeserver.com

    9 Responses to WordPress Add/Remove quicktags simple editor buttons in 3.3+

    1. Pingback: WP Quicktags - Expand Your WordPress HTML editor

    2. May 17, 2013 at 6:23 PM

      I get a console error with the code on all areas in the admin except for the edit page/post areas. I fixed it by wrapping the JS in a conditional that loads it only if it exists, like this:

      if (typeof QTags == ‘function’) {
      QTags.addButton( ‘right-div’, ‘Right Div’, ‘[div class="right-content"]‘, ‘[end-div]‘ );
      }

      • May 18, 2013 at 9:40 PM

        Hey Ivan,
        Thanks for pointing that out! I’ve revised the code to include your suggested correction.

    3. Jason
      March 21, 2012 at 3:24 PM

      Just to verify, this only adds button to HTML editor and NOT the visual editor? I am unable to test it now

    4. January 24, 2012 at 5:29 PM

      Hey man, I’m trying to get this working and also build a Codex page ’cause right now it’s just super confusing.

      Seems to me that the ‘disable_buttons’ part of your tutorial doesn’t work at all. Assuming you wrote this based on trunk it probably happened that the final version just doesn’t have that feature. I recommend reviewing the code to see if it still works how you think, and updating this post to be accurate. It’s the first tutorial that comes up in google when you search for Quicktags in 3.3.

      • February 8, 2012 at 1:11 PM

        Sorry for the late reply,
        I will try and take a look at the code in 3.3 ASAP and modify the information here accordingly. I did see via the mailing list that it was implemented in some way, but I’ve been so busy the last couple of months that I haven’t had time to check it out.

        By the way, THANKS for taking the time to write the info in the Codex! The Codex helped (and still does) me tons and it’s people like you that make that possible. So thank you for doing that!

    5. January 14, 2012 at 10:23 PM

      The disable code here no longer works, just set the default quicktags now and it will allow new custom buttons to be added afterwards.

    6. January 13, 2012 at 12:24 AM

      Thanks for the post. It was helpful, but I believe you need to remove the quotes from the third argument in the second QTags.addButton example. If you pass it a string it will insert that string into the post editor. However, if you drop the quotes it passes the function itself and the function gets called.

      Thanks again!

    7. JP
      December 14, 2011 at 8:30 PM

      WP 3.3 just came out and it looks like quicktags.js was modified exactly as you described. I’ll try your method for adding new buttons and let you know if it works.

    Leave a Reply