Over the last two days (about four hours each day, so I'm calling it "1 day"), I made a WordPress plug-in using ChatGPT.
WordPress is how I publish most of my blogs, and I rely mostly on off-the-shelf plug-ins to do my everyday tasks. But occasionally, there's no suitable plug-in, and I'm forced to use a more expensive or less convenient alternative.
Well, I decided enough was enough with one particularly repetitive task, and decided there should be a plugin to resolve it.
I don't have any knowledge of PHP, the programming language used for WordPress plugins. I can code very functionally in JavaScript, HTML, and CSS, but usually it takes a lot of googling and fiddling to get things to work.
So I was quite happy to figure out that I could code an entire plugin using ChatGPT.
The Problem
Before you make a plugin, you have to have a specific problem that you can articulate.
My problem was specific to my needs. I run a language learning website, Discover Discomfort. I have many posts with phrases in other languages.
I make posts with audio on them, and for those posts with audio, I usually generate the audio digitally (it's extremely accurate and high-quality). Here's a sample.
Normally, when I make a post about a language with a ton of phrases, I have to do the following steps.
For every line that I want to have audio for, I have to:
- Create the audio using the Azure API, and download the mp3
- Upload the mp3 to the WordPress Media Library
- Copy the URL
- Create tags in the WordPress post, like [play_audio file="Audiotoplay.mp3"]Audio to play[/play_audio]. (This is using a WordPress audio player plugin we previously paid someone $20 to create for us on Upwork)
- Double check to make sure all the audio files are the correct ones
- Check all the audio files to make sure they work
Since I often have dozens of audio files in one document, this process can take a long time to do right — it adds around an hour per blog post.
Sometimes I ask our assistant to do it. But I decided to automate it instead.
Requirements
If you're going to do this, you need to understand code and coding problems. I think of myself as a "product manager". I have a clear idea of the input and output, I have a general idea of the approach, tools to be used, and constraints, and I know how to do testing.
This is not a "You can get ChatGPT to do things you don't understand" kind of situation. In real life, when we have employees, we should be able to understand what they do and to direct them. Otherwise, we'd be terrible bosses. I'm sure you've had those bosses. Well, don't be one for AI, either.
But you do not need to know how to code. Take PHP for example. I can read it, and I know what's going on, but I don't know any of then syntax.
For JavaScript and TypeScript, I know them conceptually, but it takes me ages to string anything together. I'm way more comfortable reading and editing than I am producing.
Aside from that, to do this project, I used:
- ChatGPT Plus so I could use the GPT-4 model
- Visual Studio Code for the code
- A test WordPress instance on BigScoots (my account lets me use multiple domains / websites).
Steps in a Nutshell
Here were the steps I used to create a WordPress plugin using ChatGPT.
- Write out the requirements for the app as best I could.
- Give these to ChatGPT and ask it to flesh it out and ask clarifying questions.
- Answer the questions and edit the spec that ChatGPT provided. Do a couple of iterations on this.
- Once satisfied with the spec, ask ChatGPT to code it. ChatGPT makes mostly a framework
- Ask ChatGPT to code each individual file.
- Make some changes, and ask ChatGPT to make changes to corresponding files.
- Test, debug, test, debug, test. <– This took the longest!
- Test on staging site.
- Publish on live site.
Writing Requirements
When creating software, the most important part is to be very clear about your requirements.
In fact, in many ways, writing requirements is most of the job. You write the top level business requirements, then the technical requirements, then the architecture and what tools it should use. Eventually, you get to the point where you're just coding together assembly blocks to make all the other bits work together. (At least, this is one of the models of software engineering. In practise, life's not this neat.)
I started out with requirements for my plugin. Because I was already using a number of tools, I wrote this down with confidence.
But once I was going, I realised... wait, I don't know how to write requirements. But ChatGPT does!
So I changed it, instead, to be a request to write requirements.
Write simple spec and requirements for a code for a PHP plug-in in wordpress. Are there any bits that need to be clarified?
Purpose: The PHP plug in provides a short code that, when used around a string, gives it a play button, and plays back audio from a text to speech service. It provides caching functionality so the service isn't overloaded with API calls.
Usage:
- It should function like [tts][/tts]. You use it inline in a Wordpress document.
- the code should be an installable plugin in Wodpress.
- it takes two parameters: text of audio to play, and the exact voice name (e.g. "en-US-JennyNeural").
Functionality:
- it makes a call to the Azure Speech service. Based on the parameters, it chooses a voice to use to reproduce the audio.
- the code then displays the text, coloured blue like a hyperlink, with a play button emoji ("▶️") to the left of it.
- when you press the play button, it becomes a pause button emoji ("⏸️"). And playback of audio starts.
- the plugin checks its cache. If a file exists that corresponds to this text and voice, it plays it back.
- if the file doesn't exist, it retrieves it using the Azure Speech Service, using the parameters above. It stores this file in the cache.
- If you press the pause button, it pauses playback. Pressing play again resumes playback, changes it again to a pause button until playback finishes.
- when playback finishes, it's a play button again.I had a very good idea of what I wanted. I had this idea because I've been using these services for a while. I just wanted to automate exactly what I've had to do in recent times.
You might notice that some of it is lazily written. There are typos (E.g. "Wodpress"). It peters out at the end.
But ChatGPT don't care. ChatGPT just produced some requirements based on this, and asked me some questions. I answered them.
There was a to-and-fro for a few messages, until I finally said "OK, looks good. Now go build it."
Building and Testing
The first thing ChatGPT did was to lay out a general structure. It said that the general structure for a plugin was a number of php files, a js file, and a css file. So it said "Go create these files". I did so, opening up every file in VSCode and even pasting in the template content.
Then I asked ChatGPT to create the files one by one. It did so, and I pasted in the content.
I asked ChatGPT how to create the plugin and install it, and it told me. The plugin worked — it installed and loaded, complete with a custom screen for the settings!
Then debugging began. By far, this took the longest.
The reason the debugging took a long time was that the API calls and understanding of WordPress were outdated. ChatGPT references information gathered up to September 2021. This is two years ago. Azure's APIs have since updated.
It even took a while to realise this, because I couldn't figure out how to see the error codes. I had to ask ChatGPT 1. Where to see error logs, and 2. To create the error logs in the first place.
Once I did, I could see the API calls weren't working.
To solve this, I couldn't say "Hey ChatGPT, look up this URL and use the correct API call structure." Instead, I had to paste in a working example, and say "Make it like this."
There were other, similar problems that I had with the WordPress architecture. For example, I wanted to implement caching of files. ChatGPT suggested saving files to the server using some code which I could never get to work because it relied on something that only worked in older versions of WordPress (I'll spare you the details as I barely understood it myself, and what's the point of learning something outdated...)
Anyway — I used a similar approach, in general, finding examples of code that worked on the internet, and asking ChatGPT to copy.
Eventually, I got it to work, without doing any coding myself, and just asking ChatGPT to fix things. Here's a web page I made using the plugin.
Discussion
I mainly want to say here that coding with ChatGPT is not plain sailing.
I wouldn't recommend it to anyone who doesn't understand things like
- Code structure
- Basic application architecture
- API calls and response formats (things like JSON or curl)
I would also suggest you need to have a basic understanding of any language you're coding in. For example, before I do a project involving any Python, I'm going to need to be able to read python syntax — something I've managed to avoid in the last few decades of mucking around with code...
So, you can't code with ChatGPT if you're a complete noob.
However, if you're just barely past the point of being a noob, then you can do it. Yes, in the past I've coded apps, web pages, and tons of scripts. But I did it through a lot of googling, fiddling around, and wasting time. Nobody would call me a talented software engineer.
What's next?
What I'd really like to code with is a version of ChatGPT that can access up-to-date API references.
This might be something like AutoGPT, or some other LLM that has browser access. ChatGPT had it briefly, but they suspended it.
I will also try using some of the ChatGPT plugins that can browse websites, and see what they can do.