Create A Custom WordPress Widget with ChatGPT (Free & No Code)

No longer do you need to rely on plugins or pay a developer to build a widget for you. Just use ChatGPT to describe, refine and publish for free.

It works like this: we will use ChatGPT to generate the code which will be embedded with WordPress’s Custom HTML block. For demonstration, this tutorial will create a price estimator for a home cleaning service, below.

How to create your own WordPress widget

Widgets can enhance the interactivity on your page, and may increase engagement and buy-in. The price estimator above may help give customers a quick estimate before they call you, so they know what to expect. Let’s use this for a cleaning business which can estimate the price based on the floor plan.

The first step is to prepare your data. Let’s define the prices for these essentials:

Variable	Options	Price Details / Rates
Number of Bedrooms	1, 2, 3, 4+	$30 per bedroom
Number of Bathrooms	1, 2, 3, 4+	$20 per bathroom
Type of Cleaning	Basic, Deep, Move-Out	Basic: base rate Deep: +50% of base rate Move-Out: +75% of base rate
Frequency of Service	One-time, Weekly, Biweekly, Monthly	One-time: 100% price Weekly: 80% price Biweekly: 85% price Monthly: 90% price

Now you’ll need to create the prompt in ChatGPT. If you are creating something other than a price estimator, replace paragraphs 2 and 4 with a new task brief and data respectively.

1. I want to create a wordpress widget that will be pasted into the Custom HTML block. Therefore, all logic and data must be contained in your output. 

2. I am creating a calculator that estimates prices for a home cleaning service. Customers will choose from these options and the widget will provide an estimated price. 

3. Please namespace all variables and CSS classes to avoid conflict with existing code.

4. Here are the prices.

Variable
Options
Price Details / Rates
Number of Bedrooms
1, 2, 3, 4+
$30 per bedroom
Number of Bathrooms
1, 2, 3, 4+
$20 per bathroom
Type of Cleaning
Basic, Deep, Move-Out
Basic: base rate
Deep: +50% of base rate
Move-Out: +75% of base rate
Frequency of Service
One-time, Weekly, Biweekly, Monthly
One-time: 100% price
Weekly: 80% price 
Biweekly: 85% price 
Monthly: 90% price

Explanation for paragraphs in code:

• Paragraph 1 tells ChatGPT how you’re going to build the tool. If you don’t define it, it may suggest something too complicated. You’re telling it to write something that you can copy and paste into a Custom HTML block
• Paragraph 2 tells ChatGPT about what you’re doing. Describe how your widget works and what output you’d like.
• Paragraph 3 instructs ChatGPT to give unique identifiers to the stuff it creates. If you don’t tell ChatGPT this, it may name something container instead of hcw-container. Since “container” is a typical name that may be used elsewhere, it may cause conflicts.
• Then, I paste the table above into ChatGPT. ChatGPT is very good at reading messy stuff.

ChatGPT will output a lot of code. Copy that and then paste it into a Custom HTML block.

You can click on “Preview” in the Custom HTML block’s toolbar to see the widget in action. If that doesn’t work, just preview the whole page.

Changing colour, styles, data and other updates

Once you have ascertained the functionality works, you may want to rename some labels or change the colours on the widget to match your brand. Updating it is easy — just tell ChatGPT what you want. Here are some typical changes and how to do it:

Change colour

Change colour of background/highlight colour, etc: you can tell ChatGPT to “change the colour of [element] to [colour]”. It works especially well if you can be specific, for example you may say:

Change the colour of "Estimated Price" line to #4145A7

#4145A7 is hex code of the purple that I use on my website. You can also name the colour — “hot pink”, “green”, etc.

Change font

If you know the font you’d like, you can also tell ChatGPT to “change all fonts to [font name]”.

You should check whether your fonts are displaying properly on other devices. Sometimes, you may see your font displaying properly but on another device that you don’t control, you may see some other font. If it doesn’t work, you may need to revert back to the original font.

Update data

You can update the data by pasting in the new data and saying “Can you update the widget with this new data: [paste data]”.

Add more text

If you want to add some text, such as an explainer of your rates, you can describe where and what you want. For example, you could say “add a paragraph that says [paste what you want to add here] above the “Number of Bedrooms” label”

Final checks

Before you publish the widget, you should check these:

• Test the widget and ensure its sums are correct
• Open the web page on your phone, desktop and tablet (if you have one). If you have access to an Apple device, try it in Safari. This ensures the widget works on different devices.