Building on WordPress with AI

Hosting

For this workflow, we recommend using a WordPress.com Business plan site. This will allow you to easily and directly move work from your computer, where you are building using Claude, to a live site as new work is ready. It will also automatically run a backup of the live site just prior to publishing any new changes, and you’ll have the full capabilities of Jetpack Backup to quickly and easily restore your site to a previous version. 

Setup

1. Install WordPress Studio: https://developer.wordpress.com/studio/
2. Connect WordPress Studio to your WordPress.com account: https://developer.wordpress.com/docs/developer-tools/studio/#connect-wordpress-com
3. Turn on WordPress Studio CLI: Go to Settings, and at the bottom of the General tab, toggle on ‘Studio CLI for Terminal’ (you can see a screenshot under ‘How to install’ in this guide: https://wordpress.com/blog/2026/04/07/studio-cli-phpmyadmin/
4. Prepare your AI environment: Claude or Studio Code

There are two options for AI environment: 

Studio Code: Studio Code uses Claude, but is designed to be more accurate in building sites with WordPress in mind. However, it can currently only be run from a terminal. If you are not as familiar with working in a terminal, using the Claude desktop app will likely be simpler for you. If you choose to use Studio Code, open a terminal and run the command studio code. If you have a paid Claude plan, you will likely want to select the option to connect your own Anthropic API key. Once set up, you can chat with it just like with Claude, plus use any of the specific skills it has. Additional details about using Studio Code, including a list of skills, can be found here: https://developer.wordpress.com/docs/developer-tools/studio/studio-code/

Claude: Alternatively, if you would prefer to avoid working within the terminal, you can work directly in Claude. You can use the desktop app, but you will need to use the Code section of the app. If you are not familiar with using the Code section, it is more powerful, so for safety, it prompts more frequently for permission because it is able to directly execute commands. To use Claude Code as your AI environment, tell Claude that you would like to build a website using WordPress Studio’s MCP. It should walk you through any connections needed. 

Workflow

1. Connect a site: If you have already set up a site with a WordPress.com plan, within WordPress Studio, click “Add site” in the bottom left corner, select “Connect a site” and select your site.  If the site has an “enable” button, click it and follow the prompts in the WordPress.com hosting settings that open. Once you’ve enabled it on your WordPress.com site (it may take a few minutes), go back to WordPress Studio and refresh the list, and you will now be able to select it. 
   or
   Create a site: If you haven’t set up a site with a WordPress.com plan yet, simply ask AI to create a new site using WordPress Studio. If using Claude Code, it will likely give you a notice about which folder it needs to work within; simply accept it to work within your Studio folder. 
2. Design the site: If you already have an html file to go off of, you can feed it that. You can also use Claude Design for building out the design. Ask Claude or Studio Code to build out the design in WordPress Studio, specifying the site you just connected or created, and instructing it to use native WordPress blocks and styling wherever possible. Continue working in Claude or Studio Code until you are happy with how it looks. 
   *Note: At this stage, the site only exists on your computer, so it is safe to experiment and play with anything you want to on the site. You can see what it looks like as you go by clicking ‘Open local site’ in WordPress Studio (screenshot).
3. Publish the site/designs: If you created a site in step 1 rather than connecting a site, simply click the Publish button in WordPress Studio (screenshot) and follow the prompts to set up a WordPress.com plan for the site. If you connected an existing site, go to WordPress Studio, and on the Sync tab, click “Push.” If you are only making changes using this workflow, you can safely select both “Files and Folder” and “Database.” If you add any pages or posts to your site directly within the WordPress.com site, then note that selecting “Database” will overwrite/erase any pages or posts that exist on the WordPress.com site but not the WordPress Studio site. If you make any changes directly within your WordPress.com site, you can avoid this by selecting “Pull” in WordPress Studio Sync tab prior to making any changes using AI. You can learn more about syncing between WordPress Studio and your WordPress.com site here: https://developer.wordpress.com/docs/developer-tools/studio/sync/. 
   *Note: Only Business level plans and higher have live backups and the automatic backups that run when you sync your designs from WordPress Studio to the WordPress.com site. It is strongly recommended that you use a Business plan for that reason, so it is easy to revert if needed.
4. Iterate! From there, you can continue to make improvements using Claude/Studio Code and WordPress Studio, then push them to your WordPress.com site once they are ready using the Sync features. 

Tips

Start the build process with the instruction to use WordPress native blocks and styling. That will help keep the site code clean, and easier to maintain. From time to time, it can help to prompt Claude to look over the site and find anything it could to move into WordPress native blocks or out of custom CSS and into WordPress native styling. 

In addition, at times it created the designs a bit too literally, such as creating a div that was styled to look like a placeholder image, rather than using an actual WordPress image block. There may be times that you need to specify how to build specific pieces like that if you want the site to be easy to update from wp-admin. If you plan to only use AI to make updates, that is less important, but again, would be helpful in keeping the code cleaner and the site more responsive.