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. DrawBot - Parts Ordered!!!
  5. DrawBot - The Breakdown
  6. DrawBot - What would you draw?
  7. DrawBot - The Hacks
  8. DrawBot - Giant Unicorn?
  9. DrawBot - The Delivery?
  10. DrawBot – The Assembly, Part III
  11. DrawBot – Halp!!! No - seriously, a little help?
  12. i find i want to add more posts in some random series, just so i can use my new plugin
  13. Simple Series WordPress Plugin
  14. My first published WordPress plugin! Simple Series!
  15. This is a test of the Simple Series post system... This is only a test
  16. Now Simple Series will also add the series list to RSS feeds too!
  17. ZOMG! Simple Series is going viral!
  18. Anti-Virals
  19. Simple Series - Half-Life; Market Research
  20. DrawBot – The Assembly, Part VI
  21. DrawBot – The Assembly, Part VIII
  22. DrawBot – The Breakdown, Part II
  23. DrawBot – Printing!
  24. DrawBot – Pen Selection, Part II
  25. WordPress Plugin: Easy CC License
  26. TSP FTW!
  27. Two new DrawBot links! And an update!
  28. Excellent DrawBot Slides
  29. Another Drawing Robot!!!
  30. The biggest inkjet printer ever
  31. The Eagle Has Landed
  32. Every Body Needs a Skull
  33. I think I know what I want to draw next...
  34. Overengineered Spools
  35. Overengineered Bolt Endcaps, Case Holder
  36. Building an Arduino Drawing Robot - On The Cheap
  37. Simple Series WordPress Plugin Update
  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. A Study of Drawing Robot Pen Holders and Design Considerations
  41. Ideal Qualities in a Drawing Robot Pen Holder
  42. DrawBot Pen Holder Post Mortem
  43. Skipping! How could I forget the skipping?!

  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>