Elementor has an Element Manager that shows which widgets you use in your site, but it doesn’t show the posts those widgets are used in. For a few weeks now, I’ve been wanting to add this functionality to our Solid Dynamics plugin. I never got around to adding the functionality, so I decided to have AI do it for me. This post describes what I learned and how ChatGPT, Claude, and Gemini fared.
I learned an important lesson about prompt engineering by first doing things in way that I now think was inefficient. In coding, an iterative approach is often helpful. You start with a small piece of working code and build on top of it. This is the approach I first took with my AI prompt. I started with the following on ChatGPT-4o.
“How do I create a WordPress admin page that allows me to select a widget and then display the places that widget is used?”
The above produced code where the widget in question had to be filled in by the user, so I then refined the prompt in several iterations:
“How would I create a dropdown of each widget used in Elementor to display on the admin page?”
At this point, I had working code that showed a drop down of all the widgets used on a site. Once a dropdown selection was made, the posts the widget was used in were shown in a table. I then realized I wanted to see the post type and status, so I added:
“When showing where each widget is being used, please add the post type and the post status.”
The above took me half an hour. I tested the code at each step. Most of that time was taken up by testing. Half an hour for working code of this complexity is not bad at all. To determine where a widget is used, a meta field called _elementor_data has to be examined and the value turned into a PHP array and recursively analyzed. It would definitely have taken me longer than half an hour to research the way Elementor stores widget data in the database and then to write the code myself.
However, I still had a few things I wanted to modify, so I kept going and created the final product using a total of 12 prompts. I went down a rabbit hole concerned about edge cases; I had ChatGPT add the number of times the widget was used on each page. When ChatGPT tried this, a fatal error happened, but ChatGPT was able to fix it in one iteration.
At this point I had sunk over an hour into the task, and I got the feeling that I should have prepared better. While coding requires quick iterations starting from a minimal starting point, doing a reasonable amount of planning both in coding and prompt engineering goes a long way. Exactly how much time you should spend planning before completing your first prompt is an art.
In this case, I think about 15 minutes of thinking would have gotten me to a prompt that worked the first time. I tested out a single prompt I crafted, describing all the functionality I needed and tried it out on ChatGPT, Claude, and Gemini.
The prompt was:
The goal of the following request is to create a WordPress admin page that shows which posts use a specific Elementor widget.
Please create the code for a WordPress admin page that does the following:
- The admin page shows a dropdown of all the Elementor widgets used in the site in alphabetical order.
- After the user selects a widget and submits the form the results display the following:
- The total number of uses of the widget across all posts
- A table showing each post the widget is used in should have the following columns: count, post title and link, post type, post status, number of times widget is used in the post. The table should be ordered by number of times the widget is used in the post in descending order.
Please show only the PHP code.
Both ChatGPT and Claude created code that worked when I copy pasted it into my test theme. Gemini’s code was broken due to an SQL query that assumed that all the widgets would be stored in posts with the post_type “elementor_widget.” The dropdown of Elementor widgets used was blank. Both Claude and Gemini refused to hold back from explaining the code to me, so only ChatGPT produced working code and listened to my request of only showing the PHP code.
I was very impressed that both ChatGPT and Claude were able to produce working code in one try. Creating the code requires making use of the meta data Elementor stores in the database and reaching into the correct place in the JSON object of widget information. The code finds all meta data that contains the string, “_elementor_data,” turns the stringified JSON into an associative PHP array and loops through the array with a recursive function looking for the specific key “widgetType” to identify the widgets used on the page. Both ChatGPT and Claude used very similar recursive solutions.
I was able to take the generated code and paste it into our Solid Dynamics to create a release with the ability to show which Elementor widgets are use on a site and where those widgets are used within the site.
The heart of the code is:
$posts_query = "SELECT ID, post_title, post_type, post_status, meta_value FROM {$wpdb->posts}
JOIN {$wpdb->postmeta} ON ID = post_id
WHERE meta_key LIKE '_elementor_data'";
$posts = $wpdb->get_results($posts_query);
foreach ($posts as $post) {
$count = 0;
$data = json_decode($post->meta_value, true);
count_widget_usage($data, $selected_widget, $count);
/* ... SNIP ... */
function count_widget_usage($data, $widget, &$count)
{
if (is_array($data)) {
foreach ($data as $key => $value) {
if (is_array($value)) {
count_widget_usage($value, $widget, $count);
} elseif ($key === 'widgetType' && $value === $widget) {
$count++;
}
}
}
}
The lesson I learned is that in prompt engineering, just like software engineering, you must take sufficient time to plan out your approach. But even though I jumped into trying out a prompt too quickly and spent extra time refining the prompt, I was, overall, amazed at the time I saved on a task that required doing something that is not trivially Googleable.
