Listen to this post
You’re looking at a WordPress site built with the help of AI. Yep, you read that right. I challenged Anthropic’s Claude Sonnet 3.5 to help me code this very theme… mostly… Here’s what actually happened:
As a WordPress developer, I’m always on the lookout for new tools and technologies to enhance my workflow. So when I heard about how good Anthropic’s Claude Sonnet 3.5 is at coding, I couldn’t resist putting it to the test: building a custom WordPress theme from scratch. Spoiler alert: It wasn’t all smooth sailing. But the results? Well, you’re looking at them right now.
The WordPress Experiment
I began with a blank WordPress theme that I have developed over the years as my normal starting point. With Anthropic Claude Sonnet 3.5, I created a project, uploaded some core theme files for context (css variables and theme.json), set up some custom instructions, and set it loose on making everything from headers to archive templates piece by piece. Could it do my job for me?
Where The AI Performed Well
Right out of the gate, Claude impressed me. It churned out initially clean HTML for the header and footer faster than I could’ve typed “echo.” But they were boring, so after a few iterations in plain html, I was able to get something I liked and convert that to WordPress PHP.
From the images above, I know it doesn’t look much different, and 9 iterations sounds like a lot, but it is literally 9 short prompts like “Can we make the mobile menu more stylized with the way it comes in and out?” and we now have a fully responsive theme header with animated hover states and stylized transition…. all in about 10 minutes.
I still wanted something more interesting though. So I had it whip up this dynamic particle header you see on the page titles. I also asked them to be interactive to the mouse for that extra depth… go ahead, fly your cursor over them if you are looking at this on a desktop.
As for the Comments section, archive layout and general page templates – Claude implemented these WordPress staples pretty well and even included some WordPress functions I was not that familiar with. For rapid prototyping and generating those “building block” components, the AI felt like having a caffeinated (lets hope that’s just caffeine) junior dev at my beck and call.
Where Things Got… Interesting
Now, it wasn’t all rainbows and perfectly-nested divs. Claude and I had some, let’s say, creative differences. One of the main challenges was aligning the AI’s output with my coding style. For instance, I prefer using variables for consistency, while the AI preferred hard-coding the padding and margin values like that over caffeinated junior dev I was telling you about earlier. Additionally, the AI’s attempts to implement its own grid system conflicted with my use of Gridlex, necessitating constant corrections.
On top of that, code duplication became my nemesis. I noticed a lot of code duplication and formatting inconsistencies that required manual cleanup. This is mostly due to the growing size of the codebase and separation of files in the file system. These limitations mean that it can’t really code larger multi-file projects, but I think that adding the files to the project knowledge may help with this in the future. Anyway, the result was that I spent more time than I’d like to admit playing “spot the redundancy” and untangling formatting quirks.
Integration with WordPress
Despite these challenges, the AI proved useful for prototyping and iterating ideas. It was particularly effective in creating a dynamic particle header, which I think has added a unique, interactive element to the theme. This feature worked seamlessly with minimal adjustments and I didn’;’t have to think of anything to put there, I just knew I wanted something fancy and potentially interactive.
A Promising, If Quirky, Sidekick
After about six hours of this AI-powered adventure, I had roughly half a theme built. That’s nearly twice as fast as my usual pace. But let’s be clear: this wasn’t client-ready code. It was more like a really impressive first draft.
Where Claude truly shines is as a brainstorming and prototypeing machine. Need some quick ideas or small components made and want to focus more on the UX than the ‘how do we make this work’ aspects? This is my go-to in that area. Need a full website made that runs efficiently and securely? er….. I’m not so sure about that one….
What Have I Changed Since This Experiment Started?
Well, I have manually refactored the code for hours to get it looking right in the front end. It is still very much a work in progress but I will not likely be going back to Claude for overall iterations, just for smaller bits and pieces if they come up and I’m feeling too lazy to slog it out myself on the keyboard. Claude is certainly not going to make Client-Ready code but it definitely helps with some foundational building blocks along the way.
Calling all Junior Dev’s to keep drinking those coffees, your job is not completely taken yet.
- This Is NOT a Podcast! Google’s NotebookLM Podcast Generation Feature Is WILD
- Goodbye Google! I Have a New Way of Thinking About Search
- I Built a WordPress Plugin That Reads My Blog Posts in My Voice
- Finding Direction In My Work And Life By Reassessing My Personal Brand
- Why I Don’t Like the Traditional Agency Model and Why I’m Moving Away from It
