How I used ChatGPT 4 Plus to create a convenient WordPress function without having to code anything. Saved me hours and hours of my and the client’s time. How I “chatcoded” a plugin :).
I am not a coder, nor a developer who writes code. I can read any code well, I can make edits (I had to Google the options, but now I can ask AI), but I wouldn’t be able to write a functional plugin in the time it took to do it with ChatGPT.
This is a demonstration of how you can chat your way to a working program/plugin in WordPress – chatcode it!
This concept can be applied to any coding process you can think of. You either start from scratch and just feed the AI model with ideas and functions you need, let it figure out the actual coding, or you paste in specific code and ask it to update/extend it for you.
Note that ChatGPT evolves all the time, so it can produce different results for you. As an example, I tried my prompts from here in a new chat and the results were better (the AI suggested more steps to create a plugin from the first prompt, so I didn’t have to ask it to like I did the first time below. It seems, actually, that ChatGPT learned from mine, and perhaps other people’s chats, and did more of what I had to ask it to do previously, by itself).
The idea isn’t to reproduce my steps exactly, but to see how the process works, get inspired by it, and expand on it.
My ChatGPT custom instructions (in the settings):
I develop WordPress websites
I started with just a general idea of what I need, no specifics:
I needed to give the editors of a WordPress blog a simple way to display a specific text in a chosen text/background color combination (which later evolved into displaying specific HTML) on the homepage, without editing the homepage itself. The desired behavior was:
- an admin menu section available to all editors and admins with a checkbox that toggles the text on the homepage on/off
- a dropdown menu for the text and background color
- a text box to input the selected text
The resulting plugin adds a special touch to the site by allowing the admin or the editors to show or hide a customizable text area (used for a contextual callout, big news or an announcement) through a simple interface in the WordPress dashboard.
ChatGPT Prompt process
Here’s the initial prompt:
can you write a function or a plugin that will give me a checkbox setting to turn on and off a specific section of the website using an ACF field?
This produced PHP code that I would need to place in a template somewhere, which I didn’t want to do, so I asked:
can you write a function that will do the same?
Pivoting to a plugin
Then I thought – why not make this a plugin for easier troubleshooting (you can see the custom plugin easily, and you can turn it off easily).
So I asked:
can you write a plugin that will create a new WordPress admin menu, with a checkbox Yes/No that will be used to show/hide a specific text in a div? The text should be editable in a text field of the plugin, as well as the text color and background.
This first step creates an admin menu and settings page allowing the editors to specify whether the text should be displayed, its content, text color, and background color.
Without planning to do this at the beginning, I started to see the plugin as a straightforward tool for site managers with a neat admin panel for easy configuration and the flexibility to modify text content, color, and background without delving into code. Or without me (as the website developer) having to use any third-party complex plugins to manage access levels for editors or giving them full editing rights to edit the homepage (which, as you can imagine, could lead to broken homepage display or other issues).
Placing the content on the homepage
I wanted the plugin to output the content in a specific section of the homepage, so I gave ChatGPT the specific div ID and further instructions:
can you modify this wordpress plugin code to display the custom text just after the div id=”inner-wrap”?
But, I realized this would require using JavaScript, which I deemed unnecessary. Instead, I asked to change the plugin code so it outputs the result as a shortcode – this way I can place it wherever I want:
let’s take the same plugin as in the first version (not the one with javascript) but output the result as a shortcode
The bit about JavaScript comes from some trial-and-error versions that aren’t relevant to the final result, but I wanted to ensure the correct code is used by ChatGPT.
Next, the integrated WP shortcode capability ensures that the big title can be placed anywhere on the site with a simple [big_title_on_home] shortcode. This shortcode function checks the admin’s display preference and outputs the HTML for the big title, complete with inline CSS for text and background color.
I can place the shortcode anywhere using various options, like the AdInserter plugin or Kadence Hooked Elements.
I also wanted to make sure only specific colors are used, so that the output is kept within a certain color scheme. I asked ChatGPT to include only specific colors in the code:
can you modify the color selectors to only offer these color options: #ef3a5d, #df0b0b, #ffeb15, #000000, #ffffff, #54595f
Giving the Editor user-level access
I just asked ChatGPT to think about it for me:
now I have this plugin, how can I give WordPress editor role access to the settings?
But the first iteration from ChatGPT didn’t work (I logged in as an Editor and tried to use this feature – the options were there, but I wasn’t allowed to save), so I reported that back to the AI model:
I used the first option “edit_posts” and got this error when saving: You need a higher level of permission.
Sorry, you are not allowed to manage options for this site.
The next iteration let me save the options, but the content of the input box was subsequently erased.
the settings are saved, but the input box is cleared, remains empty
ChatGPT debugged the issue for me, but the fix didn’t work. But I noticed where the issue might be, so I pointed the AI to it. This is a good example of human & AI collaboration – you can catch more abstract things that AI might take longer to or won’t, but AI can save you time creating fixes for them.
still the same. isn’t it the sanitize_textarea_field function?
response:
Ah, you’re right! If you’re using sanitize_textarea_field, it sanitizes the content in a way that it only allows plain text. This might be the reason why your input box remains empty after trying to save HTML content.
Security is paramount, and to sanitize the output, ChatGPT incorporated WordPress’ esc_attr and esc_html functions. These ensure that the text and color inputs are safe from malicious code and prevent cross-site scripting (XSS) attacks.
Then I needed to remind the AI model that we already use a specific function in the code:
I already have wp_kses defined as $allowed_html lower in the code
I then tried to remove the sanitization as I thought there could be another way, but AI warned me against it:
let’s remove all the sanitisation so that anyone who can edit_posts can save any HTML
therefore I asked for it back, with a small update to the code:
ok, so let’s sanitize it, but please define $allowed_html before update_option. I want to paste standard HTML code for hyperlinks, images, adsense. Also, the plugin code we put together has $allowed_html defined further down – we probably don’t need that there
Where ChatGPT just gave me a snippet of the code, not the entire code, so I just nudged it to do it for me:
can you do it for me
Adding some final cosmetic/UX touches
I then polished the user experience by adding a description to the HTML field, informing the users about the allowed HTML tags. In case the pasted code doesn’t work, we suggested that the plugin might require modifications to accept specific tags.
It’s always good practice to let the user know what the requirements and limits of the input field are:
can you also add a description to the HTML field saying which tags are allowed and that if the pasted code doesn’t work, the plugin needs to be modified to accept a specific tag from that code.
But ChatGPT didn’t include all the specific attributes for each HTML tags, so I copied it out of the code and asked the AI to clean it for me:
can you clean this for me – just output the text between ” ‘a’ => array(‘href’ => array(), ‘title’ => array(), ‘target’ => array()), ‘img’ => array(‘src’ => array(), ‘alt’ => array(), ‘width’ => array(), ‘height’ => array()), ‘script’ => array(‘async’ => array(), ‘src’ => array(), ‘type’ => array()), ‘div’ => array(‘id’ => array(), ‘class’ => array(), ‘style’ => array()), ‘span’ => array(‘class’ => array(), ‘style’ => array())
and
can you output this in HTML?
And I pasted this into the code manually as it was faster than explaining how to do it to the AI model :).
But then I realised I needed to add more HTML tags just in case, so:
with regars to the last plugin code above, can you include these HTML tags: every heading from h2 to h6, p, span, br, hr in this bit of code: $allowed_html = array( ‘a’ => array(‘href’ => array(), ‘title’ => array(), ‘target’ => array()), ‘img’ => array(‘src’ => array(), ‘alt’ => array(), ‘width’ => array(), ‘height’ => array()), ‘script’ => array(‘async’ => array(), ‘src’ => array(), ‘type’ => array()), ‘div’ => array(‘id’ => array(), ‘class’ => array(), ‘style’ => array()), ‘span’ => array(‘class’ => array(), ‘style’ => array()) );
and I copied some more HTML tags and asked it to add it where needed for me – as it would take me longer to just write all the syntax myself:
ok, can you now add these tags ‘h2’ => array(), ‘h3’ => array(), ‘h4’ => array(), ‘h5’ => array(), ‘h6’ => array(), ‘p’ => array(), ‘br’ => array(), ‘hr’ => array()
to this list:
<ul> <li><a> with attributes: href, title, target</li> <li><img> with attributes: src, alt, width, height</li> <li><script> with attributes: async, src, type</li> <li><div> with attributes: id, class, style</li> <li><span> with attributes: class, style</li> </ul>
Securing the entire plugin code
We have secured the HTML input field above, but how about the rest of the code? Hmm, I’m no whitehat, so let’s use AI for it too:
is this plugin code safe from WordPress coding and security standards?
<I pasted the entire plugin code here>
ChatGPT listed a few considerations, so I asked to implement some of them:
can you rewrite the Text color and Background color sections to validate for generally accepted color codes
It gave me the modified snippets, not the entire code, so the good old:
can you do it for me
And here we are – a fully working plugin with hopefully no major security holes (I write hopefully and “no major” because I’m not 100% sure ChatGPT 4 can detect all of them plus hackers are a creative bunch – but some minor issues are accepted – even if a human coded this).
Summing Up
Our WordPress plugin, through a collaborative human & AI effort, evolved from a simple idea into a fully functional feature, ready to enhance the visual appeal of any website.
It saved me many hours of Googling and putting together snippets of code from StackOverflow, trial-and-error and maybe losing a few hairs.
Disclaimer: Use at your own risk – the resulting plugin works fine, but I can not vouch for it’s safety 100%.
Note that there are a bunch of steps that I didn’t use at the end, so you can ignore them – I have only included the important prompts that are required to get the final result, not the other ones I used as a form of trial and error.
Link to the entire chat: https://chat.openai.com/share/45f2d9d4-8875-4886-8b25-156028ab26dc
Lukas Cech 
Share your opinion: