Build Your Own WordPress Templates Using Claude
The step-by-step prompting workflow for designing a fully custom WordPress site — no template purchases, no premium plugins, no developer required. Just you, Claude, and a clear brief.
What's Inside
This guide walks through the exact prompting workflow for building every page of a WordPress site from scratch with Claude and exporting it all as a WordPress template. You'll learn how to brief Claude, generate multiple design options, refine them, and package the result.
Why Build Instead of Buy?
For years, the standard WordPress workflow looked the same: hunt down a premium theme on ThemeForest, pay $59–$99, then bolt on $200+ of plugins to make it do what you actually wanted. Hours of customisation later, your site looks like every other site running that theme.
That's no longer necessary. With Claude, you can describe exactly what you want, get back working HTML/CSS for every page on your site, and convert the whole thing into a WordPress template — Gutenberg blocks or Elementor — for free.
The economics
What you gain beyond cost
- A genuinely unique design. Your site doesn't share a skeleton with 50,000 other sites running the same theme.
- Full control over every element. If you can describe it, Claude can build it. No fighting with theme limitations.
- Lighter, faster sites. No bloated theme frameworks loading code you'll never use — better Core Web Vitals, better SEO.
- You learn the structure of your own site. When something breaks later, you understand what it is and how to fix it.
Stop thinking of yourself as someone who buys a website. Start thinking of yourself as someone who directs the design of a website. Claude is the implementer. You're the creative director.
The Brief: Describe Your Site in Detail
The quality of what Claude produces is directly proportional to the quality of your brief. Vague prompts give you vague output. The single biggest mistake people make is asking for "a nice blog" or "a clean homepage" — Claude has no idea what either of those means to you.
Every detail counts. Treat this like you're briefing a designer who has never met you or your business.
What to include in your brief
What does your site do? Who is it for? What's the one thing you want every visitor to do? "A review site for crypto bots aimed at beginners; primary CTA is signing up for a recommended broker via affiliate link."
Authoritative? Friendly? Edgy? Corporate? Playful? The tone shapes typography, copy, imagery, and spacing decisions.
Hex codes are best. If you don't have them yet, describe the feel — "muted earth tones with one bright accent for CTAs" or "dark navy primary, electric green accent, white background."
Modern, minimal, brutalist, retro, glassmorphic, editorial, dashboard-y? Pick a vibe and name it.
Exactly which links go in the top nav. Which dropdowns. What appears in the footer (columns, links, newsletter signup, social icons, legal). Be specific.
Search bar? Cart icon? Login button? Sticky header? Mega menu? Newsletter popup? List every interactive element.
A worked example
Here's roughly what a strong opening prompt looks like:
Colours: primary dark green #1f4d2e, accent mint #a8e98a, background off-white #fafbf7, text near-black #0f1f15.
Aesthetic: modern, clean, editorial. Generous whitespace. Bold sans-serif headlines with a hint of personality. Light green badges for key callouts.
Top nav: Logo (left), then Home, Reviews (dropdown by category), Best Of, Blog, About. CTA button on the right that says "Free Picks".
Footer: 4 columns — About, Categories, Resources, Contact. Newsletter signup centred above. Trust badges below. Copyright at the bottom.
Write your brief in a notes app first. Spend 15 minutes on it. Every minute you spend tightening the brief saves an hour of "make it more X" back-and-forth later.
Reference Sites & Inspiration
The fastest way to communicate a design idea is to show, not tell. Pick 3–5 reference sites and tell Claude exactly which element you want to take from each.
Your site must be unique. Don't ask Claude to clone one site — that's both legally murky and bad for SEO (Google rewards original design and content). Borrow elements from multiple sources and combine them into something new.
How to give reference effectively
Instead of "make it look like Stripe", break the reference down:
1. stripe.com — I love their hero section with the gradient and the clean typography. Take the hero structure (big headline, subhead, two CTAs side by side, product screenshot to the right).
2. linear.app — Take the way they use feature cards in 3-column grids with subtle hover effects and small icons in the top-left of each card.
3. apple.com/iphone — Take the way they use big full-bleed images between sections to break up text-heavy content.
4. nytimes.com — Take their editorial typography hierarchy for the blog section — serif headlines, sans-serif body, generous line height.
Combine these influences into something that feels cohesive and original, not a Frankenstein of pieces.
Element-by-element borrowing checklist
Run through each of these and decide if you've got a reference for it:
| Element | What to look for in references |
|---|---|
| Hero section | Layout, headline size, CTA placement, visual treatment |
| Navigation | Style (minimal vs. mega menu), sticky behaviour, button styling |
| Feature blocks | Grid pattern, icon style, card design, hover states |
| Social proof | Testimonial layout, logo strips, review widgets |
| Blog cards | Image-on-top vs. side, metadata placement, category tags |
| Footer | Column count, link grouping, newsletter signup style |
| Typography | Font pairings, heading sizes, line heights, letter spacing |
| CTA buttons | Shape, colour, animation, micro-copy patterns |
After you describe your references, ask yourself: could someone else read this brief and build the same site? If yes, you're ready. If not, add more detail.
Generate 5 Homepage Concepts
Don't commit to a single design idea. Have Claude give you 5 different homepage concepts as standalone HTML files. Download each, open them in your browser, and pick the one that feels right.
• Be a complete, self-contained HTML file with inline CSS — no external dependencies
• Include placeholder content (real-sounding copy, not "lorem ipsum")
• Use the colour palette and references I described
• Vary meaningfully from each other — different hero layouts, different visual treatments, different personalities
Label each one clearly: "Concept 1 — bold editorial", "Concept 2 — minimalist dashboard", etc. so I can compare them side by side.
How to evaluate the concepts
When you open the files, judge them against three criteria:
- First impression. Within 3 seconds, does this homepage tell you what the site is about and what to do next? If you're confused, your visitors will be too.
- Emotional fit. Does it feel like the brand you want to be? A meditation app and a crypto trading platform should evoke very different feelings, even if they share the same layout structure.
- The "would I click?" test. Look at your primary CTA. Does it actually pull your eye? Would you click it if you landed here cold?
Iterating on your chosen concept
Once you've picked your favourite, the real work begins — refining. Don't try to make all your changes in one giant prompt. Iterate in small, specific steps:
"Make the hero headline 20% larger and tighten the line height. Also, the CTA buttons feel too small — make them more prominent."
"Make the whole thing better and more modern."
Every time Claude gives you a new version, download it and open it in your actual browser. Don't judge designs from a code preview. You need to see it as a real visitor would — at full size, on a real screen.
Building Out Every Page Type
Once you've nailed your homepage, you apply that same visual language to every other page type. Don't start from scratch each time — tell Claude to use the homepage design as the foundation and then describe what's different about each page.
The page types you'll need
| Page Type | Key Design Decisions to Brief |
|---|---|
| Blog post (single) | Header/hero treatment, sidebar (yes/no, what's in it), typography, related posts, author bio, share buttons |
| Blog index / Archive | Card layout, filtering, pagination, featured posts, sidebar widgets |
| Category pages | Header design, breadcrumbs, post grid behaviour, category description block |
| About / Team | Story layout, team grid, photo treatment, mission/values blocks |
| Contact | Form layout, contact info card, map (if needed), social links |
| Terms / Privacy / Legal | Typography for long text, table of contents, last-updated date |
| Reviews / Product pages | Rating display, pros/cons, comparison tables, CTAs, screenshots |
| 404 / Search results | Tone (friendly, branded), redirect suggestions, search bar |
Briefing blog templates specifically
Blog pages have more moving parts than any other page type. Be precise:
• Hero: Full-width featured image at the top with the post title and category overlaid. Author + date + read time below the title.
• Body: Centred text column max 720px wide. Pull quotes styled like dark green vertical bars. Inline images full-width.
• Sidebar: Sticky on desktop, hidden on mobile. Contains: table of contents (auto-generated from H2s), newsletter signup, 3 featured posts.
• Footer of post: Author bio card, related posts grid (3 cards), share buttons.
Also build 3 alternative templates for different post types: "Standard article", "Review with rating", "Listicle with numbered sections". They should be selectable from the WordPress page editor.
Generating page content along the way
Don't just generate empty templates with placeholders. While you're at it, have Claude write the actual content for each page — your About copy, your Terms of Service, your 404 message. You can edit it later, but starting with real, polished copy saves hours.
For each page type, ask Claude for the template and the content in the same pass. By the end, you'll have a complete, populated site — not a hollow shell waiting to be filled.
Convert to a WordPress Template
You now have a complete set of HTML pages. The last step is converting them into something WordPress can actually use as a theme or template.
You have two main routes — pick based on your budget and how much customisation you'll want post-launch.
Gutenberg Blocks vs. Elementor
| Aspect | WordPress Blocks (Gutenberg) | Elementor |
|---|---|---|
| Cost | Free, native to WordPress | Free version limited; Pro is $59+/year |
| Speed | Lighter, faster page loads | Heavier, more JS/CSS loaded |
| Flexibility | Strong for typical sites; learning curve for custom blocks | Drag-and-drop everything, very forgiving |
| Editing post-launch | Native WP editor, no extra UI | Custom visual builder, very visual |
| Best for | Bloggers, SEO-focused sites, anyone budget-conscious | Non-technical users who want a visual editor |
Default to Gutenberg Blocks. They're free, native, faster, and better for SEO. Only go Elementor if you know you'll want to make visual changes constantly and can't read the underlying code. The pro version costs add up over time.
The conversion prompt
Requirements:
• Every template should be selectable from the WordPress page editor as a "Page Template"
• All generated content should be included as default content that's editable in the block editor
• Use reusable blocks for elements that repeat (header, footer, CTA section, newsletter signup)
• Include theme.json with the colour palette, typography, and spacing tokens
• Provide a functions.php registering the templates and enqueueing styles
• Give me clear instructions for installing this as a child theme
Alternative: if you'd prefer, I can swap "Gutenberg blocks" for "Elementor template kit" and get the same in Elementor format.
What you get back
- A folder structure with PHP template files, theme.json, style.css, and an assets folder
- JSON exports for any reusable blocks (header, footer, etc.)
- Pre-populated content as draft pages you can publish
- Setup instructions for installing it as a child theme on your existing WordPress site
Always install a custom theme as a child theme first if your main theme is one you might update. This protects your customisations from being overwritten on updates.
Apply, Edit, and Launch
Once your template is installed, the final mile is making it actually yours — adding your real photos, your real logo, and your real voice. Claude got you 90% of the way; the last 10% is what makes it personal.
The launch checklist
- Upload your logo. Replace the placeholder text/logo with your actual brand mark. PNG with transparent background works best. Add a favicon while you're there.
- Swap placeholder images for your own. Stock photography is fine to start, but real photos of your team, products, or process will always convert better. Run images through a compressor (TinyPNG, Squoosh) before uploading.
- Review every line of copy. Claude's content is a strong starting point — but your voice is unique. Read every page out loud. If it doesn't sound like you, edit it until it does.
- Check the responsive views. Open every page on mobile, tablet, and desktop. Look for awkward line breaks, oversized images, broken grids. Fix anything that looks wrong on small screens.
- Set up the essentials. SSL certificate, sitemap submission to Google Search Console, analytics, basic SEO plugin config (Yoast or Rank Math). These aren't optional.
- Test the forms and CTAs. Every form submission. Every CTA click. Make sure leads actually land in your inbox or CRM before you start driving traffic.
- Run a speed test. PageSpeed Insights or GTmetrix. You're aiming for Core Web Vitals in the green. Custom-built sites usually crush this — but verify before launch.
Maintenance going forward
When you want to add a new page type or change something significant, the workflow loops back to step one — describe what you want, generate options, refine, integrate. You're never starting from scratch because you have your existing design system to reference.
Save your original brief in a notes file. Save your favourite homepage prompt. Save your "make this match the existing design" prompt. Build a personal prompt library — every site you build after this will be faster than the last.
Workflow Recap & Prompt Library
The whole workflow in 7 steps. Bookmark this page and use it as your reusable checklist for every new site you build.
- Write a detailed brief. Site purpose, audience, tone, colour palette, aesthetic direction, navigation, footer, functional requirements.
- List your reference sites. 3–5 sites with the specific element you want from each. Make it clear you want unique, not cloned.
- Generate 5 homepage concepts. Download each as standalone HTML. Open in your browser. Pick a winner.
- Iterate on the chosen homepage. Small, specific tweaks until it's exactly to your liking.
- Build every other page type. Use the homepage as the foundation. Describe what's unique to each page. Generate content along the way.
- Convert to a WordPress template. Gutenberg Blocks (free, recommended) or Elementor (visual, paid).
- Apply, customise, launch. Logo, images, voice, responsive checks, forms, speed test, launch.
Your reusable prompt library
Three prompts to keep in a notes file forever:
That's the whole workflow.
Visit ranktoearn.com for more affiliate SEO strategies.