In this 2026 tutorial, Daryl shows how to use Claude AI to design a modern HTML website, then import it into WordPress using Elementor and free plugins like Astra, WPForms, and XPro. He covers the optimal prompt, setting up Hostinger hosting, connecting Claude via MCP, and fixing common issues like missing headers.
A short editorial from the SEONIB team on why this content matters.
This video offers a practical method to use Claude AI for WordPress, emphasizing design-first then import to retain control.
Distinctive for its MCP setup and Novamira plugin that teaches Claude Elementor elements, solving common integration issues.
Web designers and business owners should watch to speed up site creation while retaining full customization. Start with the free Claude model.
An AI assistant by Anthropic used for generating website code and designs.
A drag-and-drop page builder for WordPress that allows visual customization.
Model Context Protocol enabling Claude to interact with external services like WordPress.
A web hosting provider with integrated WordPress setup and free domain offers.
A free plugin for creating custom headers and footers using Elementor.
A plugin that connects Claude to WordPress and teaches it Elementor elements.
A lightweight, fast WordPress theme recommended for AI-built sites.
A CSS layout mode used in Elementor for responsive, modern designs.
Why use the desktop version of Claude instead of the browser version?
The desktop version is required to connect MCP servers to WordPress; the browser version does not support this.
How do I connect Claude to WordPress?
Install the Novamira plugin on WordPress, generate an application password, then add the MCP configuration code to Claude's desktop config file.
What plugins are needed for this workflow?
Astra theme, Elementor, WPForms, XPro (for header/footer), and Novamira (for AI integration) are recommended.
How to fix missing header or footer after importing to WordPress?
Ask Claude to debug and publish the XPro templates. Ensure the templates are set to display on entire site and published.
Why does Claude sometimes create HTML widgets in Elementor instead of native elements?
Claude may fallback to HTML if it struggles with Elementor elements. Instruct it to use native elements and rely on Novamira for guidance.
What is the optimal prompt for generating a website in Claude?
Include business name, services, target audience, SEO keywords, desired pages, design style, and specific instructions for images and SEO readiness.
How do I set up Hostinger for this project?
Choose a plan (business recommended), register a domain, follow Hostinger's setup wizard to install WordPress, and verify your email and domain.
How can I debug the AI-generated website?
After initial generation, ask Claude to 'polish up the website, fix design inconsistencies, debug errors, and check mobile menu buttons.'
What is the 'wrap' issue in Elementor and how to fix it?
Claude often sets flexbox to 'wrap' causing elements to stack incorrectly. Select the section and set the flexbox wrap option to 'no wrap'.
Can I use the free version of Claude for this tutorial?
Yes, the free version (Sonnet or Haiku) can generate the website, but the desktop version is still required for MCP connection.
SEONIB automatically generates AEO-optimized pages, embeds schema, and submits them to IndexNow — so your content gets discovered faster by Google and AI answer engines.