Week 4 Day 23 30 min
← Back to roadmap
1 Install WordPress + Theme
2 Set Up ACF Fields
3 Create Page Templates

Theme + Site Structure with AI

Today you set up your theme and build the structural skeleton of your site. No content yet — just the framework. Think of it as framing a house…

Get CustomersBuild

The psychology behind this day

Jakob's Law (Laws of UX, Ch. 3): Users spend most of their time on other sites. They prefer your site to work like the ones they already know. This isn't a call to be generic — it's a call to use familiar structures (navigation at top, logo top-left, CTA prominent) so the visitor's brain doesn't waste energy learning your interface. Innovation belongs in your message and positioning, not in your navigation patterns.

Billboard Design 101 (Don't Make Me Think, Ch. 3): Krug's principle — web pages should work like billboards. People are moving fast. They won't read everything. Design for scanning: clear visual hierarchy, obvious headings, prominent CTAs. If the structure doesn't guide the eye naturally, the content doesn't matter.

The Lesson

Today you set up your theme and build the structural skeleton of your site. No content yet — just the framework. Think of it as framing a house before the walls go up.

You'll use Claude or Codex to generate a custom theme structure using ACF flexible content blocks. This gives you full control without being locked into a page builder.

Today's Task

  1. Choose a minimal starter theme or use a blank theme as your base. GeneratePress, Astra, or a custom blank theme all work. The theme handles global styles (typography, colours, spacing). Content blocks handle everything else.
  1. Set up your ACF field groups using Claude Code or Codex. Take your homepage architecture from Day 13 and feed it to the AI as instructions.

Open Claude Code (or Codex) and use this prompt:

"I'm building a WordPress website for a [business type]. Here is my page architecture: [paste your Day 13 homepage outline]. I need ACF Flexible Content field groups for each section. Generate the PHP code to register these field groups, and the template code to render them on the front end. Use clean, semantic HTML with BEM-style CSS classes. The design should be modern, typography-led, with plenty of white space. Colour palette: [your brand colours]."

The AI generates the custom blocks. You review, adjust, and install them in your theme.

  1. Create your pages in WordPress (just the pages, empty for now):
  • Homepage
  • About
  • Work/Services
  • Contact
  • Blog/Insights (if applicable)
  1. Set up navigation: Create your primary menu, assign it. Keep it to 4–5 items maximum. Krug's principle: every additional navigation choice is cognitive load.

Why this approach instead of a page builder: Page builders (Elementor, Divi, etc.) add code bloat, slow your site down, and lock you into their ecosystem. ACF + custom blocks give you full control, clean code, fast load times, and no dependency on a third-party plugin that might break with WordPress updates. The AI writes the code that would normally require a developer — that's the leverage.

Output: WordPress site with theme configured, ACF blocks registered, empty pages created, and navigation set up.