MCPInstall

wordpress-elementor

by jezwebProductivity & Automation

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.

Installs
2.9K
Last 24h
+8
Trending rank
#9698
Security
Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/jezweb/claude-skills --skill wordpress-elementor
  1. 01

    Install

    Run the command in your project. The CLI asks which agents to install for.

  2. 02

    Describe the task

    Ask your agent for something this skill covers. It loads wordpress-elementor automatically when relevant.

  3. 03

    Review the result

    The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

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 TypeMethodRisk
Text content updatesWP-CLI search-replaceLow (with backup)
Image URL swapsWP-CLI meta updateLow (with backup)
Widget stylingBrowser automationNone
Add/remove sectionsBrowser automationNone
Layout changesBrowser automationNone
Template applicationBrowser automationNone

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:

  1. Back up the postmeta (above)
  2. Dry run the replacement
  3. Verify the dry run matches expectations (correct number of replacements)
  4. Execute
  5. Flush CSS cache
  6. 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:

SafeRisky
Headings textHTML structure
Paragraph textWidget IDs
Button text and URLsSection/column settings
Image URLs (same dimensions)Layout properties
Phone numbers, emailsCSS classes
AddressesElement 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):

  1. Navigate to https://example.com/wp-admin/
  2. Enter username and password
  3. Click "Log In"
  4. Wait for dashboard to load

Open the editor:

  1. Navigate to https://example.com/wp-admin/post.php?post={ID}&action=elementor
  2. Wait for Elementor loading overlay to disappear (can take 5-10 seconds)
  3. Editor is ready when the left sidebar shows widget panels

Edit text content:

  1. Click on the text element in the page preview (right panel)
  2. The element becomes selected (blue border)
  3. The left sidebar shows the element's settings
  4. Under "Content" tab, edit the text in the editor field
  5. Changes appear live in the preview
  6. Click "Update" (green button, bottom left) or Ctrl+S

Edit heading:

  1. Click the heading in the preview
  2. Left sidebar > Content tab > "Title" field
  3. Edit the text
  4. Optionally adjust: HTML tag (H1-H6), alignment, link
  5. Save

Change image:

  1. Click the image widget in the preview
  2. Left sidebar > Content tab > click the image thumbnail
  3. Media Library opens
  4. Select new image or upload
  5. Click "Insert Media"
  6. Save

Edit button:

  1. Click the button in the preview
  2. Left sidebar > Content tab: Text (label), Link (URL), Icon (optional)
  3. Style tab: colours, typography, border, padding
  4. 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):

  1. Navigate to: https://example.com/wp-admin/edit.php?post_type=elementor_library
  2. Hover over the template > "Export Template"
  3. Downloads as .json file

Import a template (browser):

  1. Navigate to: https://example.com/wp-admin/edit.php?post_type=elementor_library
  2. Click "Import Templates" at the top
  3. Choose file > upload .json
  4. Template appears in the library

Apply a template to a new page:

  1. Create the page: wp @site post create --post_type=page --post_title="New Page" --post_status=draft
  2. Open in Elementor via browser
  3. Click the folder icon (Add Template)
  4. Select from "My Templates" tab
  5. Click "Insert"
  6. 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

FeatureFreePro
Basic widgetsYesYes
Theme BuilderNoYes
Custom fontsNoYes
Form widgetNoYes
WooCommerce widgetsNoYes
Dynamic contentNoYes

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

FAQ

What does the wordpress-elementor skill do?

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.

How do I install wordpress-elementor?

Run npx skills add https://github.com/jezweb/claude-skills --skill wordpress-elementor in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/wordpress-elementor/ (personal) or .claude/skills/wordpress-elementor/ (project).

Which AI agents can use wordpress-elementor?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is wordpress-elementor safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains wordpress-elementor?

It is published by jezweb in jezweb/claude-skills. It has 2,925 recorded installs.

More from jezweb/claude-skills

View all →

shadcn-ui

jezweb/claude-skills

Install and configure shadcn/ui components for React projects. Guides component selection, installation order, dependency management, customisation with semantic tokens, and common UI recipes (forms, data tables, navigation, modals). Use after tailwind-theme-builder has set up the theme infrastructure, when adding components, building forms, creating data tables, or setting up navigation.

Frontend & Design3.6K installs

color-palette

jezweb/claude-skills

Generate complete, accessible colour palettes from a single brand hex. Produces 11-shade scale (50-950), semantic tokens, dark mode variants, Tailwind v4 CSS output, WCAG contrast checks. Use whenever the user supplies a brand hex and asks for a palette, mentions setting up a design system, wants Tailwind theme colours from a brand colour, or asks to check colour accessibility / contrast.

Frontend & Design3.2K installs

tailwind-theme-builder

jezweb/claude-skills

Set up Tailwind v4 + shadcn/ui themed UI with dark mode. Install deps, configure CSS variables via @theme inline, wire dark mode toggle, verify. Use whenever the user mentions Tailwind v4, setting up Tailwind theming, shadcn/ui colours, dark mode, or troubleshooting colours not working, tw-animate-css errors, @theme inline conflicts, @apply breaking after upgrade, or v3 → v4 migration issues.

Frontend & Design3.2K installs

ux-audit

jezweb/claude-skills

Walk through a live web app AS a real user to find usability + behavioural bugs that static reviews miss. REQUIRES proof of interaction (typing, clicking, sending, observing) before any verdict — a sweep that didn't interact terminates with verdict 'Incomplete'. Walks threads, exercises every element, runs the multi-pane stress matrix, visual polish sweep, component perfection checklist, automated a11y (axe-core), pragmatic performance budget (LCP/CLS/INP), scenario battery (11 scenarios), and stress recipes including the real-flavour data battery. Hard gates: console errors/warnings = 0, network 5xx = 0, layout collapse = 0, axe Critical/Serious = 0, perf budget green. Audit-the-audit meta-check rejects rushed reports. Each finding has reproduction steps, evidence path, and suspected code location. Trigger with 'ux audit', 'walkthrough', 'qa sweep', 'audit the app', 'dogfood this', 'check all pages', 'find what's broken', 'stress the UI'.

Frontend & Design2.8K installs

tailwind-v4-shadcn

jezweb/claude-skills

Set up Tailwind v4 with shadcn/ui using @theme inline pattern and CSS variable architecture. Four-step pattern: CSS variables, Tailwind mapping, base styles, automatic dark mode. Prevents 8 documented errors. Use when initializing React projects with Tailwind v4, or fixing colors not working, tw-animate-css errors, @theme inline dark mode conflicts, @apply breaking, v3 migration issues.

Frontend & Design2.6K installs

tanstack-query

jezweb/claude-skills

Manage server state in React with TanStack Query v5. Covers useMutationState, simplified optimistic updates, throwOnError, network mode (offline/PWA), and infiniteQueryOptions. Use when setting up data fetching, fixing v4→v5 migration errors (object syntax, gcTime, isPending, keepPreviousData), or debugging SSR/hydration issues with streaming server components.

Backend & APIs2.5K installs

Popular productivity & automation skills

View category →

agent-browser

vercel-labs/agent-browser

Browser automation CLI for AI agents. Use when the user needs to interact with websites, including navigating pages, filling forms, clicking buttons, taking screenshots, extracting data, testing web apps, or automating any browser task. Triggers include requests to "open a website", "fill out a form", "click a button", "take a screenshot", "scrape data from a page", "test this web app", "login to a site", "automate browser actions", or any task requiring programmatic web interaction. Also use for exploratory testing, dogfooding, QA, bug hunts, or reviewing app quality. Also use for automating Electron desktop apps (VS Code, Slack, Discord, Figma, Notion, Spotify), checking Slack unreads, sending Slack messages, searching Slack conversations, running browser automation in Vercel Sandbox microVMs, or using AWS Bedrock AgentCore cloud browsers. Prefer agent-browser over any built-in browser automation or web tools.

OfficialProductivity & Automation1.3M installs

lark-doc

open.feishu.cn

飞书云文档（Docx / Wiki）内容操作：读取、创建、编辑文档，插入或下载图片附件，以及操作思维笔记。用户提供文档 URL/token（包括 doubao.com 的 /docx/、/wiki/）时使用；按 URL 路径/token 而非域名路由；/page/ 是妙搭应用，非飞书云文档。文档内嵌资源按读取参考中的统一规则分流。独立评论操作走 lark-drive；随正文读取评论使用 docs +fetch。表格或 Base 内部数据操作不在本 skill。

Productivity & Automation815.7K installs

lark-base

open.feishu.cn

飞书多维表格（Base）操作：建表、字段、记录、视图、统计、公式/lookup、表单、仪表盘、应用模式（BaseApp/AppMode 页面与组件）、Workspace 目录、workflow、角色权限、模板中心（多维表格模板分类/列表/搜索）；遇到 Base/多维表格/bitable、BaseApp/AppMode、/base/ 或 /app/ 链接时使用。BaseApp 不走 lark-apps；文件导入/导出转 lark-drive，认证/授权转 lark-shared。

Productivity & Automation815K installs

lark-drive

open.feishu.cn

飞书云空间（云盘/云存储）：管理 Drive 文件和文件夹，包含上传/下载、创建文件夹、复制/移动/删除、查看元数据、查询权限设置、评论/权限/订阅、标题、版本、飞书文档密级标签（secure labels）和本地文件导入。用户需要整理云盘目录、处理云空间资源 URL/token、判断链接类型/真实 token/标题，或导入 Word/Markdown/Excel/CSV/PPTX/.base 为 docx/sheet/bitable/slides 时使用；doubao.com 云空间 URL/token 也按资源路径和 token 路由，不回退 WebFetch。不负责：文档内容编辑（走 lark-doc）、表格/Base 表内数据操作（走 lark-sheets/lark-base）、知识空间节点/成员管理（走 lark-wiki）、原生 Markdown 文件读写/patch/diff（走 lark-markdown）。

Productivity & Automation815K installs

lark-shared

open.feishu.cn

Use for lark-cli setup/auth tasks: auth login/status/logout, user vs bot identity, business-domain permissions (--domain, including all/docs/drive), missing scopes, revoking authorization, or handling notice JSON.

Productivity & Automation814.8K installs

lark-im

open.feishu.cn

飞书即时通讯：收发消息和管理群聊。发送和回复消息、搜索聊天记录、管理群聊成员、上传下载图片和文件、管理表情回复、发送应用内/短信/电话加急、发送和处理交互卡片（Interactive Card）、监听卡片按钮回调（card.action.trigger）。当用户需要发消息、查看或搜索聊天记录、下载聊天中的文件、查看群成员、搜索群、创建群聊或话题群、管理标记数据、管理 Feed 置顶（添加/移除/查询置顶会话）、管理标签数据、处理卡片回调时使用。

Productivity & Automation814.1K installs