How to add a custom button to the WordPress Visual TinyMCE Editor

Adding a button

Adding a button

The other day I found a great post that explained how to add a custom button to the WordPress Visual TinyMCE editor.1 It was fairly simple and concise and even includes a zip file of all the parts you would need to install a button into WordPress’s visual TinyMCE editor.  I’m not at all sure I could do a better job than that guy, so I’ll just direct you to the link above.  :)

  1. Photo courtesy of Marco Bernardini []
March 12, 2013 | Comments Closed

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!

  1. And, frankly, for my own future use []
March 5, 2013 | Comments Closed

Apparently WordPress.org serves up even more delicious download stats

Lovin' that source code

Lovin’ that source code

While looking at the source code on my Simple Series plugin page, I began to wonder how WordPress.org was serving up all those nifty little stats into the downloads graph. ((Photo courtesy of Windell Oskay)) What I discovered is that there’s a little bit of jQuery magic going on that pulls download data from a WordPress.org API, formats it for niftiness, and inserts it into the dynamically draw SVG graphic of the downloads.

In case you’re interested, the API call looks like this:

http://api.wordpress.org/stats/plugin/1.0/downloads.php?slug=simple-series&limit=700&callback=?

I’m now wondering how I can use that data to show something interesting in my OCD Plugin Stats plugin.1

  1. I should probably rename the meta plugin. []
March 4, 2013 | Comments Closed

Simple Series WordPress Plugin Update

Making cereals

Making cereals

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.

  1. Photo courtesy of Tavo []
  2. Like this! []
  3. Described in the prior paragraph []
| Comments Closed

CompFight plugin, with 100% more awesome

Heart

Heart

I cannot express to you how much I just love this new CompFight plugin1  Snagging images off of CompFight/Flickr and dropping them into a post is so freaking easy now.  This is definitely going to become one of my stock-plugins for a fresh WordPress installation.  I’m happy to say that I contributed a small bit of code to this very very awesome plugin.  Since that comment, my modification of their code was merged into the main plugin.  I’ve also added a few small tweaks to my version of this plugin.  By modifying the javascript file very slightly, my copy of this plugin also:

  • Adds a caption, that includes the same text as the original photo on Flickr
  • Centers the image, using WordPress’s tags
  • Makes the photo credit part of the text.  I like to include the photo credit using slightly different language.  At some point I’ll get around to modifying the plugin so that I can save my format as a setting.

Admittedly, these implementations are just a little bit buggy – I just hacked those bits in without really doing any serious testing on them.  Once I have kicked the tires on this code a little, I’ll post it to the plugin’s page.  If you want to take a look at it before then, just drop me a line.

Sometimes the right post just needs the right picture – I’ve actually had a lack of a good photo hold up a post before.  I’m happy

  1. Photo Credit: seyed mostafa zamani via Compfight []
April 30, 2012 | Comments Closed

Another way to perform A/B testing in WordPress

I ran across this article on how to do “split testing” also known as “A/B testing” in WordPress.  Basically, this process uses a Google Website Optimizer Plugin and Google’s Analytics tools to handle all the heavy lifting.  Once you create the control, test, and goal pages you would configure your Google Analytics account to look for trends in which of the two pages, the control or the test, performs better.

I’m not crazy about this method which relies on Google Analytics for two main reasons:

  1. Most importantly, it does not appear to swap control/test content for users.  Rather, it appears to simply observe which of the two concurrent pages works better.  This literally requires twice the marketing effort, since you would have to publicize both links to see which works better.  I prefer the ShrimpTest method which swaps out specific content in a single page.  This way all of your efforts can be concentrated onto one single page.
  2. This Google Analytics method is too complex and requires too much coordination between the website and Google.  Now, I love me my analytics.  I like seeing the ebb and flow of visitors, downloads, etc – and few people do it better than Google.  But, with A/B testing I just want to know as quickly as possible whether A or B is better.  Nothing else matters.  I want that knowledge as soon as possible so that I can move on to A/B testing something else.  With ShrimpTest I just need to configure the plugin, make the control and test content, and wait for a result.

I’m getting ready to launch a new product on this other website that I run.  I’ve already got ShrimpTest configured and ready to roll.  I cannot wait to see what happens.

ShrimpTest – how to fix incompatibilities with WordPress v3.3

ShrimpTest is a WordPress plugin with a LOT of promise.  Basically, it is an A/B testing tool for WordPress.  The plugin author, Mitcho, does a great job of explaining A/B testing and why it is important.  If you are already familiar with A/B testing, you can skip ahead to 16:03 in the video to see a demo of Mitcho presenting the plugin

Unfortunately, and this is truly a shame, the plugin also suffers from an almost complete lack of development and updating.  There must have been some change in WordPress v3.2 that stopped the plugin from working.  The effect was that the “A/B” icon in the rich text editor was missing.  Fortunately, someone figured out a work around.  The super quickest way to apply this change to the plugin is to do the following:

  1.  Make sure you’re logged into your WordPress website of choice
  2. Navigate to `http://[DOMAIN].com/wp-admin/plugin-editor.php?file=shrimptest/plugins/variant-shortcode/tinymce.js&plugin=shrimptest%2Fshrimptest.php`
  3. The second line down reads:
    1. ”     tinymce.PluginManager.requireLangPack(‘variant_shortcode’);”
  4. Comment out this line by adding two slashes before the code as follows:
    1. “//     tinymce.PluginManager.requireLangPack(‘variant_shortcode’);”
  5. Click “Update File”

You’re done!  Now you should be able to see the icon in your WordPress rich text editor.

WordPress plugin – OCD Plugin Stats

OCD Plugin Stats WordPress plugin screenshot

OCD Plugin Stats WordPress plugin screenshot

I’ve just published another WordPress plugin called OCD Plugin Stats.  This isn’t a plugin that would really interest most people.  If you’re a WordPress plugin developer and like seeing the stats for your plugins, OCD Plugin Stats will let you monitor all the stats for all of your plugins in one convenient location in your WordPress dashboard.

Unless you publish your own plugins, I can’t imagine anyone would be terribly interested in such a thing.  My reason for making this plugin was that (a) I found it useful, so perhaps others would too and (b) I wanted to learn how to create a WordPress dashboard widget.

February 29, 2012 | Comments Closed

WordPress Plugin: Easy CC License

Creative Commons License
WordPress Plugin: Easy CC License by MakerBlock is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
Based on a work at makerblock.com.
Permissions beyond the scope of this license may be available at http://makerblock.com/2012/02/wordpress-plugin-easy-cc-license/.

I’ve written a new WordPress plugin!  It uses the Creative Commons API to grab the appropriate license based on your license choices.  While there’s still room to improve the plugin, I’m pretty happy with the way it’s turned out.  I’ve made a conscious effort to use best plugin programming practices – and learned a lot in the process. 1

You can download this Creative Commons WordPress plugin here!

Posts about Easy CC License - a sweet WordPress plugin
  1. WordPress Plugin: Easy CC License
  1. Most of the plugin’s functions are wrapped in a class and includes a deactivation function. []