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. DrawBot Resources and Links
  2. DrawBot, the Adventure Begins
  3. DrawBot - Parts Ordered!!!
  4. DrawBot - The Breakdown
  5. DrawBot - What would you draw?
  6. DrawBot - The Hacks
  7. DrawBot - Giant Unicorn?
  8. DrawBot - The Delivery, Part II
  9. DrawBot – The Delivery, Part III
  10. DrawBot – The Delivery, Part IV
  11. DrawBot – The Assembly, Part II
  12. DrawBot – The Assembly, Part III
  13. DrawBot – Halp!!! No - seriously, a little help?
  14. DrawBot – The Face Palm
  15. i find i want to add more posts in some random series, just so i can use my new plugin
  16. My first published WordPress plugin! Simple Series!
  17. Now Simple Series will also add the series list to RSS feeds too!
  18. ZOMG! Simple Series is going viral!
  19. DrawBot – The Operation, Part I
  20. DrawBot – The Assembly, Part VIII
  21. DrawBot – The Breakdown, Part II
  22. DrawBot – Printing!
  23. DrawBot – Printing, Part II
  24. DrawBot – Why are you crying?
  25. DrawBot – Calibration
  26. DrawBot – Drawing Success(ish)!!!
  27. DrawBot – Onwards and Upwards!
  28. Restarting a Stalled DrawBot Drawing
  29. Two new DrawBot links! And an update!
  30. DrawBot Practice Tip: A Watched Pot
  31. The biggest inkjet printer ever
  32. Every Body Needs a Skull
  33. I think I know what I want to draw next...
  34. Overengineered Bolt Endcaps, Case Holder
  35. Building an Arduino Drawing Robot - On The Cheap
  36. DrawBot - Printed Parts Tour
  37. Unidentified Foam Object
  38. How to add a custom button to the WordPress editor
  39. How to add a custom button to the WordPress Visual TinyMCE Editor
  40. DrawBot Pen Holder Post Mortem

  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>