How to Build a Custom WordPress Theme with AI: Claude, ChatGPT & AI IDEs

Quick answer: how do you create a WordPress theme with AI?

Describe the site, choose its theme architecture and tell your AI where editors will manage content. Generate the theme source, review it in a running preview, fix the problems you find, then approve installation and activation on the intended WordPress site. This guide follows a real Claude build with GoBuildWP Pro and explains the connection differences for ChatGPT, Cursor and Google Antigravity.

To build a custom WordPress theme with Claude AI, start with a brief that defines the templates, styling and interactions your website needs. Claude can help write those files. GoBuildWP connects the AI client to WordPress and gives a Pro theme project a managed path through source review, Cloud preview and approved installation.

This tutorial accompanies our four-minute, 42-second Afterglyph demonstration. The example is an agency website with a dark visual direction, large typography, GSAP and ScrollTrigger animation, service pages and concept project pages. Generation is sped up in the video: its running time is not the time required to build every theme.

The video uses Claude. This guide also explains how to approach WordPress theme development with ChatGPT, Cursor and Google Antigravity through a compatible MCP connection. Their setup, account access, available tools and confirmation screens differ. Use the guide for your actual client rather than assuming one client's steps apply everywhere.

Watch the Afterglyph theme workflow

Watch the full Afterglyph build on YouTube: Claude + GoBuildWP, 4:42. The recording follows site connection, generation, preview, installation and content editing. Use these chapter links to open a specific step:

Explore the public Afterglyph demo alongside the video. This is a demonstration site: concept projects, sample testimonials and placeholder business figures are not customer evidence. The demo also retains existing WordPress posts. A new theme changes presentation; it does not automatically rewrite the content already in the database.

The screenshots in this guide were captured from the demo's public homepage, Services page and Helio Grid project page on 25 October 2026. They show the rendered result; they do not establish form delivery, accessibility conformance or performance scores. The video supplies the workflow evidence, while your own project needs its own validation report.

Choose a custom theme, child theme, block theme or page builder

Choose the editing model before choosing an AI client. A bespoke frontend does not automatically give an editor visual control over every layout.

The Afterglyph example and the GoBuildWP managed source workflow described here target classic or hybrid themes. They are not a demonstration of generating a full block theme. WordPress's theme structure documentation explains block-template files, while its child theme guide explains parent-theme overrides. For builder-based projects, use the separate Elementor workflow.

What you need before starting

Use a WordPress staging or demo site with a working backup and independent hosting access. Building a theme introduces executable PHP, CSS and JavaScript, so check the generated result before making it the active design on a business website.

Install and activate GoBuildWP Free, then install and activate GoBuildWP Pro and its eligible licence. Free provides the WordPress connection. The managed custom theme project and code-generation workflow require Pro. Your AI subscription or API arrangement is separate; GoBuildWP does not provide Claude's reasoning or guarantee the code it produces. See Free versus Pro and current pricing for the product requirements.

For the Cloud preview route, the isolated validation service and the site's trusted evidence configuration must be available. Discover the tools and inspect the actual installation before starting a project. A missing preview prerequisite is a setup problem to resolve, rather than a reason to skip the checks.

Have your real logo, owned images, approved copy, page list and editing requirements ready. A detailed brief reduces guesswork, especially around which parts should become WordPress content and which belong to theme templates.

1. Connect the WordPress site to Cloud

In WordPress, open GoBuildWP, choose Connect a client and select GoBuildWP Cloud. Follow the pairing flow, select the intended workspace, review the site and access level, and confirm the connection in WordPress when asked.

Check that the exact site appears in your Cloud workspace. A successful sign-in alone does not prove the correct WordPress installation is connected. In this example, the target is the GoBuildWP demo, not the main marketing website or another site in the workspace.

Start with access appropriate to the task. Production Safe can support permitted content and project operations, but a Cloud credential capped at that level cannot activate executable code. Installation, activation and recovery have their own site-side permission and approval requirements. Keep those decisions in WordPress rather than trying to remove them through a prompt.

The Cloud guide explains the connection, while the custom theme workflow describes the source, preview and approval stages.

2. Add GoBuildWP to Claude

Open Claude's connector settings and add a custom connector named GoBuildWP. Use https://app.gobuildwp.com/mcp as the remote MCP server URL and follow the OAuth sign-in flow. Review the destination workspace and which sites Claude may access before allowing the connection.

Enable the connector in a new conversation. Ask Claude to list the WordPress sites it can reach, identify the demo by its URL, and inspect its installed versions, current theme and available native theme tools. This is a useful read-only first check before requesting a write.

Do not paste a WordPress administrator password, Pro licence key or Cloud token into the design prompt. Use the supported authentication flow. Menu labels and account eligibility can change; the Claude web setup guide is the appropriate place for client-specific instructions.

3. Write a brief for design and editability

Tell Claude what the site must communicate before asking it to choose visual details. Include the audience, services, page hierarchy, assets, mobile requirements and the content your team needs to edit later.

For an agency site, a useful structure is Home, Work, individual project pages, Services, individual service pages, Process, About, Insights and Contact. The underlying theme also needs ordinary page and single-post templates, archives, search results and a helpful 404 page. A polished homepage is only part of the job.

The following is an adaptable starter brief, not a verbatim transcript of the prompt used in the video:

Inspect the connected demo site first and confirm its exact URL.
Create a managed custom WordPress theme project for our agency.
Use a dark background, warm light text, oversized typography and
a distinctive accent. Plan Home, Work, project detail, Services,
service detail, Process, About, Insights and Contact pages.

Use native WordPress templates. Keep page copy and blog content
editable in WordPress. Identify any custom fields or companion
code needed, and explain where an editor will change each item.
Give named homepage sections visibility controls without deleting
their content. Keep whole-page visibility as a separate decision.

Use GSAP and ScrollTrigger only where motion helps the design.
Support reduced motion, keyboard navigation and smaller screens.
Use our supplied assets; label any temporary content clearly.

Preserve existing posts, pages, settings and URLs unless we approve
a specific change. Show the plan and file diff. Run the configured
Cloud preview checks and report failures honestly. Wait for explicit
approval before installation or activation.

Ask Claude to explain the content model before generation. A service list might use native pages; a larger project portfolio might need a content type owned by a companion plugin. The right choice depends on the project, and should remain understandable to the person maintaining it.

The Afterglyph services template gives an inner page its own visual treatment while retaining the shared navigation and design language. Include inner-page requirements in the brief rather than stopping at the homepage.

4. Generate the theme in a managed project

Let the client create the project, submit its plan and write bounded batches of source files. GoBuildWP manages project files and revisions; the AI client supplies the design and code. Keep the project identifier and revision in the conversation so follow-up work changes the intended project.

A typical classic or hybrid theme includes style.css, index.php, functions.php, shared header and footer templates, front-page.php, page.php, single.php, archive, search and 404 templates, plus its frontend assets. The exact files depend on the approved design. WordPress's template hierarchy explains how requests map to templates.

This is a review checklist, not an exported Afterglyph file manifest. Ask the client for the actual file list and the diff of the revision you are approving.

Review the generated file list and diff. Check that the theme uses WordPress hooks, enqueues its assets correctly and keeps database content separate from presentation code. Ask for targeted patches when something is wrong instead of replacing the whole project and losing a working revision.

Helio Grid is a concept project used to demonstrate a portfolio detail template. Its illustration and project fields show a different page type from Services; they are sample content, not evidence of a commissioned client project.

5. Inspect the private Cloud preview

Request validation for the current project revision, then open the private preview produced by the configured Cloud service. Check the actual validation result. A static file scan alone cannot establish that a PHP theme runs correctly or that its frontend is usable.

Tour representative pages at desktop and mobile sizes. Check the navigation, content rendering, images, links, focus states and layout around long headings. For GSAP sequences, check what happens with reduced motion enabled and whether content remains reachable without completing an animation. GSAP's matchMedia documentation describes a way to handle responsive and reduced-motion conditions.

Record what was checked and any remaining limitations. Generated sample testimonials, portfolio claims and business numbers need editorial replacement before a real customer launch. A contact page also needs its actual form or contact integration tested; an attractive button is not proof of message delivery.

If validation fails, patch the reported problem and run it again. Review the resulting artifact and revision rather than relying on a screenshot or an earlier passing version. The native website ability reference documents the project operations and their constraints.

6. Approve installation and activation separately

Review the exact theme artifact before approving an operation in WordPress. Installation adds the theme files; activation changes the site's active presentation. These are distinct decisions, and the managed workflow requires the appropriate WordPress capabilities, Developer Full Access and explicit approval where applicable.

Keep the previous theme and backup available. After activation, reopen the public homepage and representative inner pages. Check the WordPress editor and important plugins as well as the frontend. A sandbox result is useful evidence, but the destination site's configuration can still introduce differences.

WordPress provides the normal theme management screens. The project workflow does not remove the need to review menus, forms, settings and recovery on the installation where the theme will run.

7. Edit content after the theme is live

The end of the video shows editing through WordPress pages and customization controls. Treat this as a design requirement to verify for your own theme: decide where each heading, image, service and project description is stored, then make a small edit and check the visitor-facing result.

Section visibility should be reversible. Switching a section off should hide its presentation while retaining its content. Unpublishing a page is different: it can affect URLs and navigation. Keep these controls clearly labelled and test them on the page types they are intended to govern.

Layout changes and new interactive behavior may still require code revisions. Native theme ownership does not make every element a drag-and-drop component. If your team needs visual layout editing, the Elementor page and website workflow may be a better fit.

Troubleshoot an AI-generated WordPress theme

Make the next request about one reproducible problem. Include the page URL, viewport, expected behavior and current revision. Share a sanitized screenshot or error excerpt rather than credentials or an entire private log.

If activation breaks the site, use the verified recovery route or independent hosting access. A retained theme-code snapshot and a full database backup serve different purposes. Do not promise that switching back will reverse unrelated content or settings changes.

Preserve SEO when changing a WordPress theme

Record representative URLs before switching: the homepage, a service page, a post, an archive and any important landing page. Compare the visitor-facing result after activation. Keep existing URLs and approved content unless a change has been planned with redirects.

Inspect the page title, main heading, canonical URL, robots directives and structured data in the rendered page. Confirm the SEO plugin still controls the fields it owns and that theme integration hooks remain present. Check navigation links, images, mobile rendering and any important form or commerce flow. Keep duplicate schema from two components out of the final output.

A custom theme is not automatically faster or better ranked because it avoids a page builder. Measure representative pages before and after the switch under comparable conditions. This tutorial does not provide an Afterglyph PageSpeed benchmark or a controlled ranking experiment.

WordPress theme development with ChatGPT, Cursor or Antigravity

The same design brief can guide another compatible MCP client. The Afterglyph video demonstrates Claude; the alternatives below are setup guidance, not additional recorded theme builds. A client can work with a managed project only when its identity, licence, discovered tools and site safety policy permit the required operations.

Build a WordPress theme with ChatGPT

For WordPress theme development with ChatGPT, first check whether your account and workspace support the custom MCP tools required for writes. OpenAI documents account and workspace restrictions separately from the connection itself. A read-only connection cannot perform the complete generation and installation workflow.

Use the ChatGPT WordPress MCP setup guide and OpenAI's current custom MCP connection instructions. Add the supported GoBuildWP connection, authenticate and select it in your conversation. Ask ChatGPT to identify the target site and available Pro project tools before adapting the brief. Keep its proposed source changes and the Cloud validation result reviewable.

Cursor for WordPress theme development

Cursor WordPress theme development is useful when you want the theme source and AI conversation in a coding workspace. Cursor's MCP documentation covers server configuration and supported transports. Follow the GoBuildWP Cursor connection guide for the WordPress endpoint and authentication method.

Distinguish a local file edit from a remote GoBuildWP project revision. Changing a file in Cursor does not by itself update the theme running on WordPress. Name the managed project and revision, submit changes through its available tools, then validate and approve the resulting artifact through the same Cloud and WordPress workflow.

Google Antigravity for WordPress development

For Google Antigravity WordPress development, choose the instructions for the surface you actually use. Google's Antigravity MCP documentation distinguishes its app, IDE and CLI configuration. A menu path from one surface may not apply to another.

Use the Antigravity IDE WordPress guide or Antigravity CLI guide. Add the supported server configuration, authenticate and discover the site tools before requesting a custom theme. If working through GoBuildWP Cloud, retain the Cloud project, preview and approval stages rather than assuming an IDE preview installs a theme on the connected site.

For a terminal-first alternative, see the Claude Code guide. When handing a project between clients, carry over the approved brief, exact site URL, project identifier, current revision and unresolved validation findings.

Before you call the theme finished

Use this final review to separate a convincing demo from a site ready for its real audience:

Custom WordPress theme development with AI still involves decisions about structure, content, accessibility and maintenance. The benefit of the managed workflow is that these decisions can be reviewed around real source and a running preview. Start with the AI WordPress theme builder guide, adapt the brief to your own site, and approve the generated result only after inspecting it.