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, Part III
  13. DrawBot – The Software, Part I (and an existential conversation)
  14. DrawBot – The Delivery, Part IV
  15. DrawBot – The Assembly, Part II
  16. DrawBot – The Assembly, Part III
  17. DrawBot – The Assembly, Part IV
  18. DrawBot – Halp!!! No - seriously, a little help?
  19. A nifty little WordPress plugin...
  20. i find i want to add more posts in some random series, just so i can use my new plugin
  21. Simple Series WordPress Plugin
  22. My first published WordPress plugin! Simple Series!
  23. This is a test of the Simple Series post system... This is only a test
  24. Now Simple Series will also add the series list to RSS feeds too!
  25. ZOMG! Simple Series is going viral!
  26. Simple Series with SEO! after just one day
  27. DrawBot – The Operation, Part I
  28. DrawBot – The Assembly, Part VIII
  29. DrawBot – The Breakdown, Part II
  30. DrawBot – Printing!
  31. DrawBot – Why are you crying?
  32. DrawBot – Pen Selection
  33. DrawBot – Drawing Success(ish)!!!
  34. DrawBot – Another Successful(ish) Drawing!, and an Update
  35. Plugin Considerations
  36. WordPress Plugin: Easy CC License
  37. WordPress plugin - OCD Plugin Stats
  38. Restarting a Stalled DrawBot Drawing
  39. TSP FTW!
  40. Two new DrawBot links! And an update!
  41. DrawBot Practice Tip: A Watched Pot
  42. Why do DrawBots draw on walls?
  43. Maze Code + Polargraph?
  44. All New Polargraph on the way!!!
  45. Ideas for improving my DrawBot
  46. This project is not going to overengineer itself
  47. Overengineered Spools
  48. Overengineered Bolt Endcaps, Case Holder
  49. Arduino Powered Drawing Robot Poll
  50. Building an Arduino Drawing Robot - On The Cheap
  51. DrawBot - Printed Parts Tour
  52. How to add a custom button to the WordPress editor
  53. How to add a custom button to the WordPress Visual TinyMCE Editor
  54. A Study of Drawing Robot Pen Holders and Design Considerations
  55. Drawing Robot Pen Holders, Calligraphy Pens, and Thought Experiments
  56. Ideal Qualities in a Drawing Robot Pen Holder
  57. DrawBot Pen Holder Post Mortem
  58. To Maker Faire!!!
  59. Skipping! How could I forget the skipping?!
  60. 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=""> <s> <strike> <strong>