How to add a custom button to the WordPress editor

While posting about my DrawBot adventures, I’ve become increasingly annoyed with my own post series WordPress plugin.  If only it had a simple button in the WordPress editor to drop the shortcode for an existing series, it would instantly become so much better.  Thus inspired, I delved into WordPress.org and sought out the answers.  What I discovered is that while it’s not particularly difficult to add a button to the WordPress text editor, it didn’t seem to be very well documented.  I’m still working on how to add a graphical button to the WordPress TinyMCE visual editor, so stay tuned for that.  I was ultimately able to glean the necessary information from the WordPress “Quicktags API.  However, for your sake1 I’m distilling what I’ve learned right here.

First, I’ll give you an overview of what we’re going to do.  If you’re looking to add a button to the WordPress editor, it’s probably because you’re working on a plugin.  Thus, I’ll assume you have a working knowledge of plugin development.   Your plugin will need to include, at a bare minimum, one action hook and one function which performs the double duty of creating the button and giving the button some kind of ability.

// This action adds a script to the script footer on administrative pages
add_action( 'admin_print_footer_scripts', 'MBSS_quicktags', 100 );

// This is the function that is run at the end of the administrative pages in the script footer
function MBSS_quicktags()
     {
     // Optional database interactions
     // I used this section in my plugin to run a query on the database and return information that would be used in the button
     ?>

     <script type="text/javascript">
     // Creates button in the text editor
     QTags.addButton( 'MBSS_tag_id', 'Add Series', MBSS_add_series_js );
     // Function to append the series shortcode to the end of the post
     function MBSS_add_series_js()
          {
          editor = document.getElementById('content');
          editor.value = editor.value + "\n" + "EXAMPLE TEXT TO APPEND TO END OF POST";
          }
     </script>
     <?php
     }

And there you have it! One action hook and one function which adds some javascript magic to your WordPress editor in the form of a simple text editor button!

”Posts
  1. Wanna make a DrawBot?
  2. DrawBot Resources and Links
  3. DrawBot, the Adventure Begins
  4. DrawBots for the slow learner
  5. DrawBot - Parts Ordered!!!
  6. DrawBot - The Breakdown
  7. DrawBot - Parts Shipped!!!
  8. DrawBot - What would you draw?
  9. DrawBot - The Plan!
  10. DrawBot - The Hacks
  11. DrawBot - Giant Unicorn?
  12. DrawBot - The Delivery?
  13. DrawBot - The Delivery, Part II
  14. DrawBot – The Delivery, Part III
  15. DrawBot – The Assembly, Part I
  16. DrawBot – The Software, Part I (and an existential conversation)
  17. DrawBot – The Delivery, Part IV
  18. DrawBot – The Assembly, Part II
  19. DrawBot – The Assembly, Part III
  20. DrawBot – The Assembly, Part IV
  21. DrawBot – Design Considerations
  22. DrawBot – The Face Palm
  23. i find i want to add more posts in some random series, just so i can use my new plugin
  24. My first published WordPress plugin! Simple Series!
  25. This is a test of the Simple Series post system... This is only a test
  26. ZOMG! Simple Series is going viral!
  27. DrawBot – The Operation, Part I
  28. DrawBot – The Assembly, Part VIII
  29. DrawBot – The Breakdown, Part II
  30. DrawBot – Printing!
  31. DrawBot – Printing, Part II
  32. DrawBot – Why are you crying?
  33. DrawBot – Calibration
  34. DrawBot – Pen Selection
  35. DrawBot – Onwards and Upwards!
  36. WordPress plugin - OCD Plugin Stats
  37. TSP FTW!
  38. Speedier DrawBot Drawings
  39. Two new DrawBot links! And an update!
  40. Why do DrawBots draw on walls?
  41. All New Polargraph on the way!!!
  42. DrawBot Aesthetic Re-Design Ideas
  43. Every Body Needs a Skull
  44. I think I know what I want to draw next...
  45. This project is not going to overengineer itself
  46. Overengineered Spools
  47. Overengineered Stepper Motor Mounts, Filament Guides
  48. Overengineered Bolt Endcaps, Case Holder
  49. Arduino Powered Drawing Robot Poll
  50. Building an Arduino Drawing Robot - On The Cheap
  51. Arduino Powered Drawing Robot - Take 2 (Or 3)
  52. DrawBot, now ACTUALLY wall mounted!
  53. How to add a custom button to the WordPress editor
  54. OCD Plugin Stats and the WordPress.org Statistics API
  55. How to add a custom button to the WordPress Visual TinyMCE Editor
  56. A Study of Drawing Robot Pen Holders and Design Considerations
  57. Drawing Robot Pen Holders, Calligraphy Pens, and Thought Experiments
  58. Ideal Qualities in a Drawing Robot Pen Holder
  59. Enough talk! Finally a pen holder!
  60. DrawBot Pen Holder Post Mortem
  61. To Maker Faire!!!
  62. Drawing Robot Penmanship

  1. And, frankly, for my own future use []

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>