wordpress plugin dev

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!

Default Series Title

And, frankly, for my own future use [↩]

This weekend, almost an entire year from the last update, I made some revisions to my Simple Series plugin for WordPress.1 This is one of the plugins that I use the most often for WordPress. It’s right up there, in terms of frequency, with the WP-Footnotes plugin that lets me insert footnotes.2

As much as I loved this plugin, it was always a little bit of pain to use. In order for two posts to be associated together in the same series, the title must be listed exactly the same in each post. So, to make sure that I was getting it right, I would open an old post in the relevant series, copy the exact plugin shortcode with the exact title, and paste it into the new post.

With this update you can click the “Add Series” button in the TinyMCE text editor for a post and insert any series title you’ve previously used. It’s not yet as elegant as I would like, but it makes a few button clicks out of a what used to be an annoying process.3 I’ve also added the ability to have a series between pages, posts, or any combination of the two kinds of content types.

Default Series Title

Photo courtesy of Tavo [↩]
Like this! [↩]
Described in the prior paragraph [↩]

Tag: wordpress plugin dev

How to add a custom button to the WordPress editor

Simple Series WordPress Plugin Update