WordPress Add/Remove quicktags simple editor buttons in 3.3+
by myownserver • October 31, 2011 • WordPress-Dev • 6 Comments
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:
|
1 2 3 4 5 |
array( 'id' => 'content', // The editor ID, same as Parameter 2 'buttons' => '', // A string of comma-separated buttons to show by default. 'disabled_buttons' => '', // A string of comma-separated buttons to remove from defaults. ); |
Parameter 2:
|
1 |
$editor_id = (string)'content'; // The editor ID, same as the 'id' key in Param1. Redundant? |
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:
|
1 |
link,em,strong,block,del,ins,img,ul,li,ol,code,more,spell,close,fullscreen |
!!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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<?php if( !function_exists('_set_default_quicktags') ): /** !! WARNING !! - This will prevent any new buttons from being added, such as custom ones, unless they * are also explicitly added to the 'buttons' variable! */ function _set_default_quicktags( $qtInit ) { $qtInit['buttons'] = 'em,strong,block'; // Only show the 'italic', 'bold', and 'block-quote' buttons return $qtInit; } add_filter('quicktags_settings', '_set_default_quicktags', 10, 1); endif; |
Set Which Buttons To Disable/Remove
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<?php if( !function_exists('_remove_quicktags') ): function _remove_quicktags( $qtInit ) { // Remove only the 'italic', 'bold', and 'block-quote' buttons $remove_these = array('strong', 'em', 'block'); // Convert string to array $buttons = explode(',', $qtInit['buttons']); // Loop over items to remove and unset them from the buttons for( $i=0; $i < count($remove_these); $i++ ) { if( ($key = array_search($remove_these[$i], $buttons)) !== false) unset($buttons[$key]); } // Convert new buttons array back into a comma-separated string $qtInit['buttons'] = implode(',', $buttons); return $qtInit; } add_filter('quicktags_settings', '_remove_quicktags', 10, 1); endif; |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<?php if( !function_exists('_add_my_quicktags') ): function _add_my_quicktags() { ?> <script type="text/javascript"> /* Add a H1 tag * * 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( 'h1', 'H1', '<h1>', '</h1>' ); /* Add function callback button * * Params are the same as above except the 'Opening Tag' param becomes the callback function's name * and the 'Closing Tag' is ignored. */ QTags.addButton( 'say_hi', 'Say Hi', 'tell_me_hi' ); // Our "tell_me_hi" function function tell_me_hi() { alert('Just sayin Hi!'); } </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'); endif; |
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.
Just to verify, this only adds button to HTML editor and NOT the visual editor? I am unable to test it now
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.
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!
The disable code here no longer works, just set the default quicktags now and it will allow new custom buttons to be added afterwards.
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!
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.