A WordPress Block Theme, Built with Claude Code

Claude Code did almost all the coding. What mattered more: it talked things through with me. Made trade-offs visible. Explained pieces I didn't know. Decisions got made together. Without it the project would have stayed in onboarding mode for weeks and never shipped on time.

The problem

I'd worked with WordPress for six years. ACF, Elementor, child themes, the occasional embedded web tool. HTML and CSS basics still hanging around from a high-school informatics class.

What I'd never done: build a theme from scratch. Definitely never a block theme.

Block themes need a lot of files to cooperate. Templates, patterns, a theme.json for the design system, functions.php for custom logic, CSS on top. Strict syntax, steep curve.

I wanted a personal site that showed my work with AI tools. Use cases, blog, interactive tools. But the real goal was to get to know Claude Code properly. Start with something I already understood in many parts, where the result was easy to picture.

WordPress fit.

The approach

I built the whole theme with Claude Code. Claude Code is a CLI agent. Runs in the terminal, reads and writes files directly. I describe what I want, it does it.

In my setup Claude Code ran as a VSCode extension. I skipped the standalone terminal entirely.

The first attempt failed. I rushed in, no project structure, no skills loaded. More on that below.

On the second attempt I took time first: folder structure, conventions, design direction.

And skills. After that it worked.

The process was iterative. I never tried to generate a full page in one prompt. The superpowers plugin handled brainstorming, planning, and execution for me.

Claude Code writes a plan with concrete tasks before it touches code, splits the work into small steps, and verifies as it goes.

First the colour palette, then a single component, then a template. Small steps I could check in the browser. The design direction was "retro 70s, dark surfaces, accent colours" plus a few reference images I'd uploaded. No mockup, no existing site to copy.

When steps were independent, Claude Code launched several small agents at once. That feels like magic.

I didn't have to learn Gutenberg block syntax up front. Claude Code knows the spec and writes valid block markup. I didn't have to know what a wp:group block with spacing presets looks like.

I had to be able to describe what I wanted to see on the page. By now I understand the system pretty well, from working with it.

What got built

The scope surprised me.

The design system

Colours, type sizes, spacing, shadows, all routed through one central place. Claude Code set it up that way. Change one value, the rest follows. Obvious in hindsight; new to me at the time.

Templates and patterns

Each content type got its own layout: home, blog, single posts, a photography gallery, a glossary with alphabetic nav, tool pages, use cases. Claude Code built each block, I reviewed in the browser, on to the next.

Interactive tools

Built into the theme: SVG designer, glass card slide designer, image converter, LinkedIn formatter, HTML preview, ChatGPT converter, meta checker. Claude Code handled integration.

Most of the tools existed before, also built with AI. Claude Code restructured them, fitted them into the new design, fixed a few rough edges.

The thinking behind it: I want a tool with no ads that works the way I want. So I write it myself.

Custom functions

The theme does more than a stock one: custom taxonomies for tools and use cases, structured data, sitemap controls, the shorthand helpers I keep reaching for. All written by Claude Code on request. I didn't need to know the API surface, only what I needed it to do.

The hard parts

The failed first attempt

The first run was a mess. I'd copied an idea from a YouTube video, dropped a 400-line CLAUDE.md into the repo, and started typing. Too much at once, no structure, no clear design direction.

Second attempt: folder structure first, conventions next, and the CLAUDE.md cut to under 40 lines. Instead of stuffing everything into one file, it points at focused sub-documents.

From that point Claude Code worked consistently, across sessions.

Visual polish

Claude Code wrote the CSS. Most of the time I described what I saw or wanted to see, and it implemented. When something looked off I'd say "probably a CSS issue" and it found the spot. A handful of times I touched the file myself, but those were exceptions.

The real work was decisions. How should a card feel on hover? How fast should the animation be? How does mobile nav behave? What I like most: how tactile the buttons and cards turned out. A press animation like a thick physical button. No tool can make those decisions for me. But the implementation, yes.

I spent less time on syntax and more on decisions. Instead of "how do I implement this?", it became "what do I actually want?" That's a better use of my time. Not less work.

What I'd do differently

I'd set up the project properly from day one. Folder structure, conventions, working directory separate from the theme. Save every plan Claude Code writes, so I can come back to them later.

And I'd load the right skills from the start. I'm a fan of superpowers, Anthropic's frontend-design skill, and my own skill for brand voice. The right skills make the difference between "Claude Code produces something" and "Claude Code produces the right thing."

With my current understanding of Gutenberg blocks I'd take a different approach to a few parts. But: still with Claude Code. I got addicted. Coded on trains, in bed before sleep, in the kitchen while cooking.

What came out the other end: a site independent of Elementor, Pagespeed 99–100, looking and behaving the way I'd pictured. The theme that ran eric-hinzpeter.de from March to May 2026. Replaced by the Next.js site you're reading now, also built with Claude Code.