I actually thought I could build a WordPress plugin with ChatGPT in just a couple of hours. Well, “a couple of hours” turned out to be 120. Assuming you plan on following in my footsteps, I strongly urge you to read this article in its entirety beforehand. It will genuinely save you hours – even days – of extra work.
The post My Journey to Creating a WordPress Plugin With ChatGPT: 120 Hours of Work, No Prior Experience appeared first on Themeisle Blog.
I’ll be honest: I actually thought I could build a WordPress plugin with ChatGPT in just a couple of hours. Or, at least, that’s what all the YouTube tutorials and Twitter threads led me to believe.
But let me tell you, those stories left out a few crucial details – about 120 hours’ worth of details, to be exact. Yes, that’s how long it actually took me to build the plugin from start to finish: 120 hours!
For context, I didn’t have any prior experience with plugin or WordPress development, but I decided to dive in anyway. And while I loved the challenge, it was a lot harder than I expected. Every step of the way, I hit one roadblock after another, many of which I didn’t even know existed. It was frustrating, but also a huge – huge(!) – learning experience.
Assuming you plan on following in my footsteps, I strongly urge you to read this article in its entirety beforehand. I’m not saying that as some sort of self-promotion. I’m saying it because it will genuinely save you hours – even days – of extra work. There are so many things that I stumbled across in this process that I had no clue were important until after the fact. Unfortunately, that led to countless revisions of code (filled with lots of frustration) that could have been prevented. By reading this, you won’t have that problem.
Who this is and isn’t for 🙋♂️
Depending on your background and skillset, you might be wondering if you’re “qualified enough” to do this. I’ll say this much:
While you don’t need to have any prerequisite coding knowledge, you do need to be enthusiastic about learning some code and the general process of developing a plugin. There are a lot of phases to get through, and often times, one phase has nothing to do with the other in terms of the skills (or even tools) you need to complete it. In short, be ready to learn – A LOT.
Depending on the nature of your plugin and your ultimate goals, it could easily take you a month or more to come up with a final product.
Having a strong eye for details and recognizing patterns will help quite a bit, as will knowing what PHP, JavaScript, and CSS do. You don’t need to know how to code with them, but understanding their purpose and how they are used will be an advantage.
If none of the above describes you – particularly the willingness to learn – and you’re looking for a quick-and-easy solution, then this isn’t for you. It’s neither quick, nor easy. But, it is possible if you put in the effort.
If you’re okay with that, then let’s get started.
Phase one: map out your plugin in detail 📝
The very first question you need to ask yourself – and answer – is what type of plugin do I want to build and what do I want it to do?
You might be tempted to rush through this so you can start actually building and coding, but I urge you to take your time with it. What you do here will lay the foundation for your prompts and will allow you to build in an organized manner, rather than adding things on the fly. To get through this phase effectively, consider the following:
What functions do you want your plugin to have?
What do you want the wp-admin side of it to look like?
Create wireframes or flowcharts to visualize the plugin’s workflow.
Map it out and describe it down to the tiniest details.
Decide if you want it for private use or if you want to make it available in the WordPress repository for public access.
Functions
The wp-admin
Wireframes or flowcharts
Combine everything and describe it in detail
Private use vs public access via the WordPress repository
Phase two: give ChatGPT a detailed prompt to begin development 🗣️
The main idea here is to give GPT an overview of your plugin with clear instructions. As a general suggestion, I would advise you to avoid trying to build the whole house at once. It’s better to take a brick-by-brick approach.
Let’s say you were to build my plugin as an example.
Even though it has eight effects, I would recommend telling GPT that you want to start with one effect. Almost as if you were building a one-effect plugin instead of an eight-effect plugin. Then check to make sure the effect works – including the back end settings area. Fix any bugs, and once everything looks good, add the next effect. Then just follow this process, one by one.
The reason for doing it this way is that it makes it easier to fix any bugs that might be introduced into your code as your code grows in complexity. If GPT generates all of your code at once and lots of things aren’t working, it’ll be much harder to fix.
You still want to give GPT a broad overview of your overall vision for the plugin, but end the prompt by focusing on some specific thing first.
To save you some time, I’ve created an example template you can give ChatGPT to get you started.
The sections in brackets [X] require your input to complete. You may or may not have to edit it further, depending on the kind of plugin you plan to build.
If you don’t understand everything in the prompt, don’t worry, I didn’t either. You’ll learn as you go through the process.
My prompt 🤖
I want to build a WordPress plugin called [name] that does the following:
[General overview but don’t give GPT the specifics yet]
I’d like it to work via [Refer back to the section “combine everything and describe it in detail” from phase one; think about how you want your plugin to function – if you’re not sure, then you can delete this part].
I would also like to create a settings menu in wp-admin so that users can [Explain what you want your settings menu to look like and do, including any specific UI/UX considerations; if you create any wireframes, upload those as well]
I plan on using the following tools for this process:
– Docker and/or Local by Flywheel Choose one or use both); which causes your code to break because it closes off a parent snippet that’s not meant to be closed off yet.
After a while you’ll get better at figuring it out, but when you’re starting your plugin development journey, if you notice a lot of things break after you add a snippet, try deleting that very last line to see if it “magically” fixes everything.
The console is your best friend
If ChatGPT tries to debug the same problem with no success and you find yourself going in circles, ask it to add console.log lines to the sections of code it believes are causing the issue. Then open up the console as you recreate the bug. It will explain what happened. You can then screenshot this explanation and give it to ChatGPT so it can figure out how to fix it.
To access console in Google Chrome, right click on the page and select Inspect:
When the console doesn’t give you answers, check your database
The console is excellent and will often give you the answers you need. However, on some occasions, it will only confirm what you are experiencing, but without really giving you any sort of direction on how to fix it.
For example, when I was trying to add a typing effect to my plugin, the default preview speed of the effect in the wp-admin was set to 23 milliseconds. I spent an insane amount of time revising my PHP and JavaScript files to try to fix the issue, but to no avail.
Console confirmed that it was loading at 23, but beyond that, it didn’t give me any other valuable information:
Eventually, I checked the database, and realized the faulty value was coming from there:
I switched that 23 to 60, which is what I wanted, and it solved the problem.
If you end up using Local by Flywheel, you can access your database easily through the interface by clicking on the Database tab:
Once you gain access, a good place to start looking is the same place you saw me looking in the screenshot above: wp_options. Most of the time your plugins settings will be found there.
⚠️ However, it’s also important to point out that the bigger underlying issue here was that my code was actually missing activation instructions. When your plugin is first activated, it should check if certain settings exist in the database. If they don’t, your plugin should add them with your intended default values. This ensures that every new installation of your plugin starts with the correct settings. I learned this the hard way so that you don’t have to.
A fresh thread can give you breakthroughs
As your code grows and your thread with ChatGPT gets longer and longer, it will be prone to make mistakes or forget things. At a certain point, it’s a good idea to start a new thread. Upload your main plugin files to the new thread and explain to ChatGPT what you are doing and where you left off.
Here’s an example prompt you can use:
I was working on debugging a WordPress plugin with you in another thread but I think the thread got too long and you were starting to get confused. Let’s start fresh.
Take a look at the plugin files here and let’s try to troubleshoot [describe your bug].
Also, and this is VERY IMPORTANT, when generating new versions of code snippets in an attempt to troubleshoot, please don’t just generate the snippet, but also provide an explanation on which lines you changed from what is already present. Also, explain the rationale behind changing those lines, and what we can expect to see with the changes you’ve made.
[If generating CSS, don’t forget to remind ChatGPT to follow BEM (Block Element Modifier) methodology.]
Don’t be afraid to use your brain
The more complex your plugin, the greater the potential for GPT to mess up your code. While it does help you debug, at times you’ll find it’s better to figure out the solution on your own. To be honest, this happened to me quite a lot, especially in the later stages of my build where my main PHP file had grown to over 500 lines (with later versions exceeding 1,000).
Depending on your familiarity and comfort with reading code, this could be a deterrent, but if you are decent at pattern recognition and spotting inconsistencies then you can get by.
I’m certainly not a skilled programmer, though I do have an understanding of what various programming languages do and some familiarity with code, which helped me.
Still, even if you’re a total noob, you can look at the lines of code that GPT thinks might be causing the problem. Then find an identical element in your code that is working properly. Compare its code to the code of the broken element and try to see what’s different about it. Often times this will solve the problem:
Keep backups of your plugin files (optional if using Git)
While using Git provides a powerful way to manage and revert changes to your code, it’s never a bad idea to keep manual backups as well. Whenever you hit a milestone with your code, I suggest saving a copy of your main code files in another folder:
This can serve as an additional safety net, allowing you to easily revert to a previous better version if you encounter serious bugs while continuing to build.
Don’t give up easily, but know your limits
There might be some functions or tweaks that you simply won’t be able to implement no matter how hard you try. Be prepared to adjust your expectations and work around them. This doesn’t mean give up if you hit a wall. However, it does mean that if you’ve made 100 attempts and spent hours (or days) trying to achieve something with no success, then it’s probably either not possible or outside the capability of both you and ChatGPT.
Lastly, if you’re wondering whether you should debug or lint first, to my understanding, there’s no clear cut answer. I debugged before I linted, but you can either default to ChatGPT’s preference as you go through the process, or tell it which one you want to do first.
Phase six (optional): testing 🔬
If you’re building a relatively simple plugin and you’re confident in its functionality based on your own manual testing then you don’t necessarily need to take this step. I say that because it still requires a lot of work to code these tests, and in the same way that you won’t get a working plugin out the gate with ChatGPT, you are also unlikely to get a functional test with no bugs present.
Simply speaking, there’s a trade-off here between time investment and practical value.
In my own experience, I was able to successfully build one test that checked whether or not my plugins were able to perform their main functions when a user interacts with them – but it took me an entire day of debugging!
From a practical standpoint, I had already manually checked my plugin’s functionalities, but it was nice to see that the test confirmed everything was working.
If you’re going to attempt to build a more complex plugin than I did, or if your plugin’s functions will be focused on the back end (where you can’t manually check whether they are working or not), then taking the time to properly run tests is worth the manual labor.
Types of tests
Tools to consider
Phase seven (optional): submit your plugin to the WordPress repository 🥳
If you’ve made it up to this point, then you’ve ascended the proverbial plugin mountain successfully. The only thing left to do is plant your flag so that it joins the other 59,650 plugins in the WordPress repository.
That has its own separate process, which is accompanied by a checklist on the Add your plugin page:
Read the Frequently Asked Questions.
Comply with all of the Plugin Developer Guidelines.
Ensure you have permission to upload your plugin to WordPress.org for others to use and share.
Your plugin, including all its libraries, and any other included assets are licenced as GPL or are GPL compatible.
You do a final round of tests with the Plugin Check plugin, and you resolve any indicated issues (excluding what you think are false-positives).
You might think that after all the debugging, linting, and testing you did, that the plugin they ask you to use won’t pick up anything. However, as a first-time plugin developer, you will likely have a few outstanding issues left to resolve – especially if you don’t remove the testing files from your build before running the check.
To proceed, go to Tools → Plugin Check:
Then check off all five categories and run the check:
You can then feed those outstanding issues to ChatGPT and resolve them. When you’re finished, run the check again to ensure a clean result. Do it as many times as you need to. Once you get a completely clean check (excluding false positives), you can submit your plugin to the WordPress development team. Then wait patiently for them to review it.
Final thoughts 🧠
While it is a fun and rewarding process to build a plugin with ChatGPT, it is by no means a quick process. You need to put in a lot of sweat equity to make a decently working final product. In the end though, you’ll appreciate all the new skills that doing this project will teach you.
Here are a few things that I learned (and you might too):
I learned how to navigate my way around my hard drive using Terminal commands and also learned other commands related to the process of building a plugin.
I’m now fairly comfortable with both Docker and Local by Flywheel, both of which I never used before this experiment.
I’m also familiar with lots of developer tools and scripts that I never even knew existed prior to this.
I’ve taken some classes in the past with Free Code Camp and Codecademy, and though both were great, I feel like I got a lot more hands-on knowledge by completing this project.
Related to the above, I now have a lot of random coding nuggets of information that will come in handy if I work on something similar again.
The gap between zero to working plugin is much smaller than the gap between working plugin and submission-ready plugin. I got a working version of my plugin done within a few days, but it took me another few weeks before I worked out all the tweaks to make it good enough to submit to the WordPress repository.
Overall, this was one of the coolest activities that I’ve done in a long time. Thanks for taking the time to read. If you end up using any of this information to build your first plugin, please drop me a comment below. I’d love to check out your final result.
Free guide
Follow the simple steps in our 4-part mini seriesand reduce your loading times by 50-80%. 🚀
Updated on:
August 28, 2024
Posted in:
You can check also:
Leave a Reply