Skip to content

Tutorials

Deploying a Custom Elementor Site in One Cursor Session

· 2 min read · AI Bridge

Laptop showing web design and development tools
Bootstrap a full Elementor marketing site from a single Cursor session using MCP tools.

Bootstrapping a custom Elementor site traditionally takes hours: scaffold a child theme, register widgets, write page templates, configure menus, install plugins, flush permalinks. With AI Bridge and the wp-elementor-bootstrap skill, an agent can deploy a complete marketing site in one autonomous session — and you review the result in Elementor afterward.

What “one session” actually means

In a recent deploy, a Cursor agent completed the following in under 20 minutes:

  • Deployed Hello Elementor child theme with design tokens and BEM CSS
  • Created an extras plugin with 15+ custom Elementor widgets
  • Built Home, About, Contact, and Blog pages with container-format JSON
  • Seeded blog posts, Contact Form 7, and primary navigation
  • Fixed Elementor 4.x editor compatibility (containers + isInner flags)

Phase 1: Scaffold via write_file

The agent writes files directly to disk:

wp-content/themes/your-project-slug/style.css
wp-content/themes/your-project-slug/functions.php
wp-content/themes/your-project-slug/assets/css/tokens.css
wp-content/plugins/your-project-slug-extras/...

Large files deploy through Node-based scripts when PowerShell JSON encoding corrupts payloads — a lesson learned on Windows hosts.

Phase 2: Activate via run_php

POST /wp-json/ai-bridge/v1/tools/run_php
{ "code": "YPS_Setup::run_import();" }

This activates plugins, switches the theme, creates pages, seeds content, and registers Elementor layouts.

Modern website layout on a desktop monitor
The finished site uses Hello Elementor, custom widgets, and a light AI Hub-inspired design system.

Phase 3: Elementor page JSON

Elementor 4.x expects flexbox container elements, not legacy sections. Programmatic JSON must include:

  • "elType": "container" at the top level
  • "isInner": false on every element
  • Widget settings matching each widget’s control defaults

Pages that render on the frontend but show blank in the editor usually mean missing isInner or scroll-reveal CSS hiding content with opacity: 0.

Phase 4: Verify and iterate

After deploy, verify:

  1. Frontend URLs return 200 with expected widgets
  2. Elementor editor loads all containers and widgets
  3. Navigation, forms, and blog posts are visible
  4. Hard-refresh or clear LiteSpeed cache on Hostinger

The agent builds; you approve. Git diff the theme and plugin before merging to production.

← Back to blog