Claude Code + WordPress: How We Update Our Elementor Site with AI (MCP Guide)

Every business website has a list of small jobs that never seems to get shorter: swap an outdated image, fix a section that breaks on iPad, tidy up the menu, refresh the homepage before a campaign. Each job is quick on its own, but together they cost hours of developer time and often sit in a backlog for weeks. Here is the Claude Code WordPress workflow we used to clear ours.

This month we tried a different approach on our own site, codeclever.tech. Instead of clicking through the Elementor editor, we connected Claude Code to our WordPress site using MCP (Model Context Protocol) and asked it to make the changes for us, while we reviewed and approved every step.

In this Claude Code WordPress guide we show exactly how we set it up, which tools we used (and how they compare with the new official Elementor MCP), what we changed on our live site, and what we learned. If you are wondering whether AI website maintenance can save your team time without putting your website at risk, this is for you.

What Is MCP? A Plain-English Explanation

Model Context Protocol (MCP) is an open standard that lets AI assistants use software tools in a controlled, structured way. Think of it as a set of clearly labelled buttons the AI is allowed to press, and nothing more.

For a WordPress website, an MCP server can offer actions such as:

• Read the layout of a page (sections, columns and widgets)
• Update the settings of one specific widget
• Upload an image to the media library
• Duplicate a page into a private draft
• Back up a page and roll it back if something goes wrong

The AI never gets direct access to your server or database. It can only call the actions the MCP server exposes, using a login you control and can revoke at any time.

The Tools We Used

We did not rebuild anything. Our site stayed on the same WordPress and Elementor Pro setup it has always used. On top of it we added:

• Elementor Ultra MCP: an open-source MCP server with around 90 tools for reading and editing Elementor pages. Every change is validated on the server, backed up and reversible.
• Its companion WordPress plugin, which adds the secure REST endpoints the MCP server talks to.
• Claude Code, Anthropic’s AI coding assistant, which plans the work and calls the tools.
• A WordPress application password so the assistant signs in with its own revocable key instead of a real password.
• Automated browser testing (headless Chrome and WebKit, the engine behind Safari) to screenshot every change on phone, tablet and desktop sizes.

Elementor Ultra MCP vs the Official Elementor MCP

We set up our connection in September 2026, just before Elementor launched its own official Elementor MCP. WordPress also now offers an official WordPress MCP Adapter. So which should you use?

• The official Elementor MCP is free to connect and is aimed at building new pages with Elementor’s newer “atomic” v4 elements, design system and theme parts. It saves its work as drafts, and some features need Elementor’s Angie assistant or a Pro plan.
• Elementor Ultra MCP is open source and focused on safely changing existing sites. It backs up every change, can roll back, and refuses to overwrite edits made by someone else in the meantime. It also falls back to the classic v3 sections and columns that many established Elementor sites, including ours, are still built with.

Our homepage was built years ago with classic Elementor sections, and we wanted to edit the live page safely, so Elementor Ultra MCP was the right fit for us. For a brand-new site built with Elementor v4, the official Elementor MCP is well worth a look. The workflow below applies to either.

Step 1: Set Up a WordPress MCP Server for Claude Code

Claude Code supports MCP out of the box (this is what people usually mean by Claude MCP), so connecting it to a WordPress MCP server takes about ten minutes:

1. Install and activate the Elementor Ultra companion plugin on your WordPress site.
2. In WordPress, go to Users → Profile → Application Passwords, create a new password and give it a clear name such as “AI assistant”. (WordPress has a guide to application passwords.)
3. Add the MCP server to your AI client’s configuration with your site address, username and the application password.

In Claude Code, the configuration is a small .mcp.json file in your project folder:

{
  "mcpServers": {
    "elementor-ultra": {
      "command": "npx",
      "args": ["-y", "@algorismus/elementor-ultra-mcp"],
      "env": {
        "WP_URL": "https://your-website.com",
        "WP_USER": "your-username",
        "WP_APP_PASSWORD": "xxxx xxxx xxxx xxxx xxxx xxxx"
      }
    }
  }
}

Security tip: keep this file out of shared folders and version control, and revoke the application password the moment you no longer need it.

Step 2: Let the AI Read Before It Writes

Our first request was never “change this”. It was “show me how this page is built”. The MCP server returns a map of the page: every section, column and widget, with its ID and settings. That lets you ask precise questions in plain language:

• “Which widget holds the three Our Services cards?”
• “Why is there empty space above the card text on phones?”
• “Where do the service card links point to?”

That last question surfaced something we had forgotten: our service cards still linked to the demo pages of the Elementor template kit the site was originally built from. Reading first turns up problems like this before anything is changed.

Step 3: Make Changes on a Draft Copy First

For anything bigger than a small tweak, we asked the assistant to duplicate the homepage into a private draft and make the changes there. We reviewed the draft through its preview link and only then applied the same changes to the live page.

This mattered more than we expected. While the assistant worked on the draft, we edited the live homepage ourselves in Elementor. Because every MCP write checks which version of the page it is changing, nothing was overwritten. The assistant applied only the changes needed and kept our manual edits intact.

Step 4: Check Every Change on Phone, Tablet and Desktop

Responsive issues are where website updates usually go wrong, so every change was checked with automatic screenshots at common screen widths: phones (390–440px), iPads in portrait and landscape (768–1366px) and desktop (1440px).

That testing caught problems a quick desktop check would have missed:

• The navigation menu wrapped onto two lines on small laptops and iPads in landscape.
• The mobile dropdown menu was hard to read against the page background.
• Service cards had a large empty gap on phones and tablets.
• An animation flickered only in Safari on iPhone. We reproduced it in WebKit, fixed it and confirmed the fix before going live.

Step 5: Push Only What Changed, With a Backup

When something goes live, the assistant replaces only the specific element that changed, not the whole page. Before each save the MCP server takes a backup, and after it returns a list of exactly what changed. For our new homepage hero, that list showed one section modified and one widget added, and that the other 19 sections were untouched.

If anything had looked wrong, rolling back would have taken a single command.

What We Actually Changed on Our Website

Over a few sessions, the assistant made these updates to codeclever.tech, all reviewed by our team:

• New service images: fresh, lightweight WebP images for our Mobile Apps, AI & Automation and Web & Backend cards, with the old files removed from the media library.
• Tablet and laptop menu fixes: tighter spacing so the menu fits on one line, and a readable dark dropdown on mobile.
• Card layout fixes: no more empty space in the service cards on phones and tablets, with equal-height cards kept on desktop.
• Cleanup: leftover template links removed from the service cards.
• A new animated homepage hero: blueprint-style sketches of a web app, a GIS map and an AI workflow that turn into finished designs. It is a lightweight SVG, pauses when off screen and respects visitors who prefer reduced motion.

Lessons Learned From AI-Powered WordPress Updates

• Keep a human in the loop. The AI proposes and executes, but every visible change was approved by a person first.
• Verify every change. Once, a tool reported an error even though the change had been saved correctly. Re-reading the page after each write is what told us the truth.
• Test in real browsers, especially Safari. Most visitors arrive on phones, and Safari can behave differently from Chrome.
• Send large content through the right channel. Big assets such as our 110 KB animation were sent through the plugin’s REST endpoint rather than pasted into a chat.
• Accessibility still matters. Animations should pause off screen and honour the “reduce motion” setting on Mac, iPhone and Android.

Is AI Website Maintenance Right for Your Business?

MCP-powered updates work best when you have:

• A WordPress or Elementor website that needs regular content or design changes
• A growing backlog of small fixes that never get prioritised
• Several landing pages or sites that need consistent updates
• A need for every change to be documented, backed up and reversible

In return you get faster turnaround, lower maintenance costs, consistent testing across devices and a clear record of every change. What it does not replace is judgement: deciding what your website should say and how it should look still needs people who understand your business.

Claude Code and WordPress: Frequently Asked Questions

How CodeClever Can Help

We build automation for our clients, and now for our own website too. Whether that is Retool automation for internal tools or n8n workflows, our goal is to take repetitive work off your plate.

We can help you:

• Connect Claude Code (or another AI assistant) to your WordPress site safely using MCP
• Run AI-assisted website maintenance with human review and backups
• Build custom MCP servers that connect AI assistants to your own internal tools and data

If you are curious about Claude Code for WordPress, AI-powered WordPress updates or want help keeping your website fast, fresh and mobile-friendly, get in touch with us. We would be happy to show you how it works on your own site.