wordpress-elementor

name wordpress-elementor description Edit Elementor pages and manage templates on WordPress sites via browser automation (for visual / structural changes) or WP-CLI (for safe text replacements). Use whenever the user wants to edit an Elementor page, update text in Elementor widgets, apply or manage Elementor templates, or make content changes to pages built with the Elementor page builder. compatibility claude-code-only WordPress Elementor Edit Elementor pages and manage templates on existing WordPress sites. Produces updated page content via browser automation (for visual/structural changes) or WP-CLI (for safe text replacements). Prerequisites Working WP-CLI connection or admin access (use wordpress-setup skill) Elementor installed and active: wp @site plugin status elementor Workflow Step 1: Identify the Page # List Elementor pages wp @site post list --post_type=page --meta_key=_elementor_edit_mode --meta_value=builder \ --fields=ID,post_title,post_name,post_status # Editor URL format: https://example.com/wp-admin/post.php?post={ID}&action=elementor Step 2: Choose Editing Method Change Type Method Risk Text content updates WP-CLI search-replace Low (with backup) Image URL swaps WP-CLI meta update Low (with backup) Widget styling Browser automation None Add/remove sections Browser automation None Layout changes Browser automation None Template application Browser automation None Rule of thumb : If you're only changing text or URLs within existing widgets, WP-CLI is faster. For anything structural, use the visual editor via browser. Step 3a: Text Updates via WP-CLI Always back up first : wp @site post meta get {post_id} _elementor_data > /tmp/elementor-backup-{post_id}.json Pre-flight checklist : Back up the postmeta (above) Dry run the replacement Verify the dry run matches expectations (correct number of replacements) Execute Flush CSS cache Verify visually Simple text replacement : # Dry run wp @site search-replace "Old Heading Text" "New Heading Text" wp_postmeta \ --include-columns=meta_value --dry-run --precise # Execute (after confirming dry run looks correct) wp @site search-replace "Old Heading Text" "New Heading Text" wp_postmeta \ --include-columns=meta_value --precise After updating , clear Elementor's CSS cache: wp @site elementor flush-css If the elementor WP-CLI command isn't available: wp @site option delete _elementor_global_css wp @site post meta delete-all _elementor_css What's safe to replace : Safe Risky Headings text HTML structure Paragraph text Widget IDs Button text and URLs Section/column settings Image URLs (same dimensions) Layout properties Phone numbers, emails CSS classes Addresses Element ordering Step 3b: Visual Editing via Browser Automation For structural changes, use browser automation to interact with Elementor's visual editor. Login flow (skip if already logged in via Chrome MCP): Navigate to https://example.com/wp-admin/ Enter username and password Click "Log In" Wait for dashboard to load Open the editor : Navigate to https://example.com/wp-admin/post.php?post={ID}&action=elementor Wait for Elementor loading overlay to disappear (can take 5-10 seconds) Editor is ready when the left sidebar shows widget panels Edit text content : Click on the text element in the page preview (right panel) The element becomes selected (blue border) The left sidebar shows the element's settings Under "Content" tab, edit the text in the editor field Changes appear live in the preview Click "Update" (green button, bottom left) or Ctrl+S Edit heading : Click the heading in the preview Left sidebar > Content tab > "Title" field Edit the text Optionally adjust: HTML tag (H1-H6), alignment, link Save Change image : Click the image widget in the preview Left sidebar > Content tab > click the image thumbnail Media Library opens Select new image or upload Click "Insert Media" Save Edit button : Click the button in the preview Left sidebar > Content tab: Text (label), Link (URL), Icon (optional) Style tab: colours, typography, border, padding Save Using playwright-cli : playwright-cli -s=wp-editor open "https://example.com/wp-admin/" # Login first, then navigate to Elementor editor playwright-cli -s=wp-editor navigate "https://example.com/wp-admin/post.php?post={ID}&action=elementor" Or Chrome MCP if using the user's logged-in session. Step 4: Manage Templates List saved templates : wp @site post list --post_type=elementor_library --fields=ID,post_title,post_status Export a template (browser): Navigate to: https://example.com/wp-admin/edit.php?post_type=elementor_library Hover over the template > "Export Template" Downloads as .json file Import a template (browser): Navigate to: https://example.com/wp-admin/edit.php?post_type=elementor_library Click "Import Templates" at the top Choose file > upload .json Template appears in the library Apply a template to a new page : Create the page: wp @site post create --post_type=page --post_title="New Page" --post_status=draft Open in Elementor via browser Click the folder icon (Add Template) Select from "My Templates" tab Click "Insert" Customise and save Duplicate an existing page via WP-CLI : # Get source page's Elementor data SOURCE_DATA=$(wp @site post meta get {source_id} _elementor_data) SOURCE_CSS=$(wp @site post meta get {source_id} _elementor_page_settings) # Create new page NEW_ID=$(wp @site post create --post_type=page --post_title= "Duplicated Page" --post_status=draft --porcelain) # Copy Elementor data wp @site post meta update $NEW_ID _elementor_data " $SOURCE_DATA " wp @site post meta update $NEW_ID _elementor_edit_mode "builder" wp @site post meta update $NEW_ID _elementor_page_settings " $SOURCE_CSS " # Regenerate CSS wp @site elementor flush-css Apply template between pages via WP-CLI : # Get source data SOURCE=$(wp @site post meta get {source_id} _elementor_data) SETTINGS=$(wp @site post meta get {source_id} _elementor_page_settings) # Apply to target wp @site post meta update {target_id} _elementor_data " $SOURCE " wp @site post meta update {target_id} _elementor_edit_mode "builder" wp @site post meta update {target_id} _elementor_page_settings " $SETTINGS " # Clear cache wp @site elementor flush-css Step 5: Verify # Check the page status wp @site post get {post_id} --fields=ID,post_title,post_status,guid # Get live URL wp @site post get {post_id} --field=guid Take a screenshot to confirm visual changes: playwright-cli -s=verify open "https://example.com/{page-slug}/" playwright-cli -s=verify screenshot --filename=page-verify.png playwright-cli -s=verify close Critical Patterns Elementor Data Format Elementor stores page content as JSON in _elementor_data postmeta. The structure is: Section > Column > Widget Each element has an id , elType , widgetType , and settings object. Direct manipulation of this JSON is possible but fragile -- always back up first and prefer search-replace over manual JSON editing. CSS Cache After any WP-CLI change to Elementor data, you must flush the CSS cache. Elementor pre-generates CSS from widget settings. Stale cache = visual changes don't appear. wp @site elementor flush-css # OR if elementor CLI not available: wp @site option delete _elementor_global_css wp @site post meta delete-all _elementor_css Global Widgets Global widgets are shared across pages. Editing one updates all instances. # List global widgets wp @site post list --post_type=elementor_library --meta_key=_elementor_template_type \ --meta_value=widget --fields=ID,post_title Caution : Replacing text in a global widget's data affects every page that uses it. Elementor Pro vs Free Feature Free Pro Basic widgets Yes Yes Theme Builder No Yes Custom fonts No Yes Form widget No Yes WooCommerce widgets No Yes Dynamic content No Yes Theme Builder templates (header, footer, archive) are stored as elementor_library post type with specific meta indicating their display conditions. Common Elementor WP-CLI Commands If the Elementor CLI extension is available: wp @site elementor flush-css # Clear CSS cache wp @site elementor library sync # Sync with template library wp @site elementor update db # Update database after version change