ChatGPT WordPress Plugins

This is kinda bananas.  Years ago I wrote a plugin to solve a problem I had.  I wanted a simple WordPress plugin where I could insert a shortcode into a blog post, specify a series title, and have it automatically search up all the other blog posts that used the same shortcode and series title, and then insert a nice looking list of blog posts in that series in chronological order.

It was one of my first plugins, still available on WordPress.org – just hidden since it hasn’t been updated in almost a decade.  It still works to this very day, if occasionally a little buggy.  After several WordPress versions, it no longer properly displays the series title, which is a real shame.

On a whim, I tried using ChatGPT to generate some plugins.

Here’s an example of my old plugin and the new ChatGPT written plugin (in this order):

Default Series Title

See how bad that was? It completely mangled the title.

Edit:  Since publishing this post, I realized that I would have to choose between

  1. Leaving the old defunct plugin in place just to make a point about how it didn’t stand the test of a decade’s worth of WordPress updates, but then also leaving broken series titles sprinkled through my back catalog of blog posts.
  2. Go back through nearly 10 years of blog posts12 to change them over to the new plugin shortcode.
  3. Disable the old plugin, but have the new plugin work with the old shortcode as well as it’s own new shortcode, at the cost of losing an example of how bad the old plugin performed.

I went with option 3.  Just take my word for it, it looked bad.

He makes a valid point

He makes a valid point

Now for the ChatGPT version:

Software Development with ChatGPT
  1. ChatGPT WordPress Plugins

It took me about an hour to whip up a working WordPress plugin with the same core functionality.  I would break down the time I spent as follows:

Time Spent Creating Series Plugin with ChatGPT

But, that’s not all!  You see, as I was writing this blog post, I realized it would be fun to include a pie chart to indicate the time I’d spent on this.  Unfortunately, the plugin I had written to do exactly this many years ago has apparently completely given up the ghost.  Thus, before I proceeded to this very sentence, I used ChatGPT to create a plugin for displaying custom pie charts!

Time Spent Creating Pie Chart Plugin with ChatGPT

Obviously, this plugin took a lot longer.  The first few versions were having all kinds of problems between the HTML Canvas code and trying to figure out how to make sure the javascript was not loading too early or too late.  In the end, I just asked it whether it was capable of even creating a pie chart – and it gave me a piece of workable javascript.  I told it to refactor the plugin using this same javascript, and then it was a matter of fine tuning the result.

If you don’t know anything about writing WordPress plugins, you could probably use ChatGPT to create a very simple plugin.  However, once it got slightly more complicated, it would likely require some troubleshooting to figure out what was happening.  In the series plugin it took me a while to root through the WordPress functions to figure out that apparently ChatGPT was trying to use a function in a way that simply did not work.  I explained to ChatGPT that that particular function could not operate in that way, explained how the data it was feeding into that function needed to be first modified, and then asked it to refactor the code.  From that point forward, it started to look a lot better.  There were some additional quirks – like putting more than one series title in a single post would only display one.  I suspect these problems of ChatGPT taking a shortcut to generate code, hardcoding certain variables and names, not considering that it might need to operate more than once on the page, may be difficult for it to anticipate and address.  Without some degree of WordPress development knowledge, I think a novice user armed only with ChatGPT would need to do a lot of refactoring, asking the program to generate the plugin all over from scratch many times, before arriving at a workable result.  Then again, a million monkeys at typewriters, right?

I think ChatGPT could be great for creating relatively simple plugins like a series plugin, a pie chart plugin, or even a table of contents plugin.  However, having seen how much time it cut out of the development process, I think it would be interesting to try developing an A/B testing plugin or more complicated plugin.

I think the next task to see if I can get it to generate QMK code for a keyboard, Arduino code, Raspberry Pi code, or a chrome extension.

I can already see some ways to improve both of the ChatGPT generated plugins used in this blog post.  My series plugin included two arrows at the bottom so the reader could navigate to the prior or next post in the series.  And I think it would be great if the chart plugin had a feature where I could specify the units, so the magnitude data would be included with the labels.  I may try getting it to shoehorn these updates later…

If you see these reflected in the charts above, I must have already done it.  :)

Software Development with LLMs
  1. Series Plugin Test for Illustrative Purposes Only
  2. ChatGPT WordPress Plugins
  3. Coding with an LLM Sidekick
  1. NGL, I can really be a lot some times. []
  2. Um, you’ve probably gathered that. []

Series Plugin Test for Illustrative Purposes Only

The only purpose for this post is to serve as a reference for a more interesting and useful post.

Software Development with LLMs
  1. Series Plugin Test for Illustrative Purposes Only
  2. ChatGPT WordPress Plugins
  3. Coding with an LLM Sidekick
Software Development with LLMs
  1. Series Plugin Test for Illustrative Purposes Only
  2. ChatGPT WordPress Plugins
  3. Coding with an LLM Sidekick

[custom_pdf_generator visitor_data=“John Doe”]

 

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.  :)

Default Series Title
  1. Photo courtesy of Marco Bernardini []

OCD Plugin Stats and the WordPress.org Statistics API

What you get when you don't use an API

What you get when you don’t use an API

The current version of my WordPress OCD Plugin Stats plugin, is somewhat… clunky.1 When I wrote it I didn’t know that WordPress.org had an API for it’s plugin statistics.2 Thus, the current version essentially scrapes particular WordPress.org plugin pages for information and drops it into the WordPress dashboard.

After poking into the stats on one of my plugin pages the other day I discovered that the source code for the page included several calls to a WordPress.org API.  Why should I bother scraping and interpreting a page of HTML when I can just ask WordPress.org to deliver the exact data I need in a nifty JSON format?!  I’m very much looking forward to adjusting this plugin to use a more direct and simple call to the WordPress API rather than scraping plugin pages.

In any case, if you’re looking for documentation on this, I found a page in the WordPress Codex and a site with a page devoted to documenting the WordPress.org API.

Default Series Title
  1. Photo courtesy of peasap []
  2. Apparently they have more statistics than just on plugins []

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!

Default Series Title
  1. And, frankly, for my own future use []

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

Default Series Title
  1. I should probably rename the meta plugin. []

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.

Default Series Title
  1. Photo courtesy of Tavo []
  2. Like this! []
  3. Described in the prior paragraph []

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 []

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.