wordpress-elementor

Name: wordpress-elementor
Author: jezweb

937stars96forks

How to install wordpress-elementor?

jezweb/claude-skills/wordpress-elementor

$npx -y skills add jezweb/claude-skills --skill wordpress-elementor

Installs into the current project.

Summary

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 templat

Files · 1

View on GitHub

SKILL.md

1	# WordPress Elementor
2
3	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).
4
5	## Prerequisites
6
7	- Working WP-CLI connection or admin access (use wordpress-setup skill)
8	- Elementor installed and active: `wp @site plugin status elementor`
9
10	## Workflow
11
12	### Step 1: Identify the Page
13
14	```bash
15	# List Elementor pages
16	wp @site post list --post_type=page --meta_key=_elementor_edit_mode --meta_value=builder \
17	--fields=ID,post_title,post_name,post_status
18
19	# Editor URL format: https://example.com/wp-admin/post.php?post={ID}&action=elementor
20	```
21
22	### Step 2: Choose Editing Method
23
24	\| Change Type \| Method \| Risk \|
25	\|-------------\|--------\|------\|
26	\| Text content updates \| WP-CLI search-replace \| Low (with backup) \|
27	\| Image URL swaps \| WP-CLI meta update \| Low (with backup) \|
28	\| Widget styling \| Browser automation \| None \|
29	\| Add/remove sections \| Browser automation \| None \|
30	\| Layout changes \| Browser automation \| None \|
31	\| Template application \| Browser automation \| None \|
32
33	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.
34
35	### Step 3a: Text Updates via WP-CLI
36
37	Always back up first:
38
39	```bash
40	wp @site post meta get {post_id} _elementor_data > /tmp/elementor-backup-{post_id}.json
41	```
42
43	Pre-flight checklist:
44
45	1. Back up the postmeta (above)
46	2. Dry run the replacement
47	3. Verify the dry run matches expectations (correct number of replacements)
48	4. Execute
49	5. Flush CSS cache
50	6. Verify visually
51
52	Simple text replacement:
53
54	```bash
55	# Dry run
56	wp @site search-replace "Old Heading Text" "New Heading Text" wp_postmeta \
57	--include-columns=meta_value --dry-run --precise
58
59	# Execute (after confirming dry run looks correct)
60	wp @site search-replace "Old Heading Text" "New Heading Text" wp_postmeta \
61	--include-columns=meta_value --precise
62	```
63
64	After updating, clear Elementor's CSS cache:
65
66	```bash
67	wp @site elementor flush-css
68	```
69
70	If the `elementor` WP-CLI command isn't available:
71
72	```bash
73	wp @site option delete _elementor_global_css
74	wp @site post meta delete-all _elementor_css
75	```
76
77	What's safe to replace:
78
79	\| Safe \| Risky \|
80	\|------\|-------\|
81	\| Headings text \| HTML structure \|
82	\| Paragraph text \| Widget IDs \|
83	\| Button text and URLs \| Section/column settings \|
84	\| Image URLs (same dimensions) \| Layout properties \|
85	\| Phone numbers, emails \| CSS classes \|
86	\| Addresses \| Element ordering \|
87
88	### Step 3b: Visual Editing via Browser Automation
89
90	For structural changes, use browser automation to interact with Elementor's visual editor.
91
92	Login flow (skip if already logged in via Chrome MCP):
93
94	1. Navigate to `https://example.com/wp-admin/`
95	2. Enter username and password
96	3. Click "Log In"
97	4. Wait for dashboard to load
98
99	Open the editor:
100
101	1. Navigate to `https://example.com/wp-admin/post.php?post={ID}&action=elementor`
102	2. Wait for Elementor loading overlay to disappear (can take 5-10 seconds)
103	3. Editor is ready when the left sidebar shows widget panels
104
105	Edit text content:
106
107	1. Click on the text element in the page preview (right panel)
108	2. The element becomes selected (blue border)
109	3. The left sidebar shows the element's settings
110	4. Under "Content" tab, edit the text in the editor field
111	5. Changes appear live in the preview
112	6. Click "Update" (green button, bottom left) or Ctrl+S
113
114	Edit heading:
115
116	1. Click the heading in the preview
117	2. Left sidebar > Content tab > "Title" field
118	3. Edit the text
119	4. Optionally adjust: HTML tag (H1-H6), alignment, link
120	5. Save
121
122	Change image:
123
124	1. Click the image widget in the preview
125	2. Left sidebar > Content tab > click the image thumbnail
126	3. Media Library opens
127	4. Select new image or upload
128	5. Click "Insert Media"
129	6. Save
130
131	Edit button:
132
133	1. Click the button in the preview
134	2. Left sidebar > Content tab: Text (label), Link (URL), Icon (optional)
135	3. Style tab: colours, typography, border, padding
136	4. Save
137
138	Using playwright-cli:
139
140	```bash
141	playwright-cli -s=wp-editor open "https://example.com/wp-admin/"
142	# Login first, then navigate to Elementor editor
143	playwright-cli -s=wp-editor navigate "https://example.com/wp-admin/post.php?post={ID}&action=elementor"
144	```
145
146	Or Chrome MCP if using the user's logged-in session.
147
148	### Step 4: Manage Templates
149
150	List saved templates:
151
152	```bash
153	wp @site post list --post_type=elementor_library --fields=ID,post_title,post_status
154	```
155
156	Export a template (browser):
157
158	1. Navigate to: `https

People who liked this also viewed

6 picks

Type

wordpress-elementor

937stars96forks

View on GitHub

How to install wordpress-elementor?

jezweb/claude-skills/wordpress-elementor

$npx -y skills add jezweb/claude-skills --skill wordpress-elementor

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# WordPress Elementor
2
3	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).
4
5	## Prerequisites
6
7	- Working WP-CLI connection or admin access (use wordpress-setup skill)
8	- Elementor installed and active: `wp @site plugin status elementor`
9
10	## Workflow
11
12	### Step 1: Identify the Page
13
14	```bash
15	# List Elementor pages
16	wp @site post list --post_type=page --meta_key=_elementor_edit_mode --meta_value=builder \
17	--fields=ID,post_title,post_name,post_status
18
19	# Editor URL format: https://example.com/wp-admin/post.php?post={ID}&action=elementor
20	```
21
22	### Step 2: Choose Editing Method
23
24	\| Change Type \| Method \| Risk \|
25	\|-------------\|--------\|------\|
26	\| Text content updates \| WP-CLI search-replace \| Low (with backup) \|
27	\| Image URL swaps \| WP-CLI meta update \| Low (with backup) \|
28	\| Widget styling \| Browser automation \| None \|
29	\| Add/remove sections \| Browser automation \| None \|
30	\| Layout changes \| Browser automation \| None \|
31	\| Template application \| Browser automation \| None \|
32
33	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.
34
35	### Step 3a: Text Updates via WP-CLI
36
37	Always back up first:
38
39	```bash
40	wp @site post meta get {post_id} _elementor_data > /tmp/elementor-backup-{post_id}.json
41	```
42
43	Pre-flight checklist:
44
45	1. Back up the postmeta (above)
46	2. Dry run the replacement
47	3. Verify the dry run matches expectations (correct number of replacements)
48	4. Execute
49	5. Flush CSS cache
50	6. Verify visually
51
52	Simple text replacement:
53
54	```bash
55	# Dry run
56	wp @site search-replace "Old Heading Text" "New Heading Text" wp_postmeta \
57	--include-columns=meta_value --dry-run --precise
58
59	# Execute (after confirming dry run looks correct)
60	wp @site search-replace "Old Heading Text" "New Heading Text" wp_postmeta \
61	--include-columns=meta_value --precise
62	```
63
64	After updating, clear Elementor's CSS cache:
65
66	```bash
67	wp @site elementor flush-css
68	```
69
70	If the `elementor` WP-CLI command isn't available:
71
72	```bash
73	wp @site option delete _elementor_global_css
74	wp @site post meta delete-all _elementor_css
75	```
76
77	What's safe to replace:
78
79	\| Safe \| Risky \|
80	\|------\|-------\|
81	\| Headings text \| HTML structure \|
82	\| Paragraph text \| Widget IDs \|
83	\| Button text and URLs \| Section/column settings \|
84	\| Image URLs (same dimensions) \| Layout properties \|
85	\| Phone numbers, emails \| CSS classes \|
86	\| Addresses \| Element ordering \|
87
88	### Step 3b: Visual Editing via Browser Automation
89
90	For structural changes, use browser automation to interact with Elementor's visual editor.
91
92	Login flow (skip if already logged in via Chrome MCP):
93
94	1. Navigate to `https://example.com/wp-admin/`
95	2. Enter username and password
96	3. Click "Log In"
97	4. Wait for dashboard to load
98
99	Open the editor:
100
101	1. Navigate to `https://example.com/wp-admin/post.php?post={ID}&action=elementor`
102	2. Wait for Elementor loading overlay to disappear (can take 5-10 seconds)
103	3. Editor is ready when the left sidebar shows widget panels
104
105	Edit text content:
106
107	1. Click on the text element in the page preview (right panel)
108	2. The element becomes selected (blue border)
109	3. The left sidebar shows the element's settings
110	4. Under "Content" tab, edit the text in the editor field
111	5. Changes appear live in the preview
112	6. Click "Update" (green button, bottom left) or Ctrl+S
113
114	Edit heading:
115
116	1. Click the heading in the preview
117	2. Left sidebar > Content tab > "Title" field
118	3. Edit the text
119	4. Optionally adjust: HTML tag (H1-H6), alignment, link
120	5. Save
121
122	Change image:
123
124	1. Click the image widget in the preview
125	2. Left sidebar > Content tab > click the image thumbnail
126	3. Media Library opens
127	4. Select new image or upload
128	5. Click "Insert Media"
129	6. Save
130
131	Edit button:
132
133	1. Click the button in the preview
134	2. Left sidebar > Content tab: Text (label), Link (URL), Icon (optional)
135	3. Style tab: colours, typography, border, padding
136	4. Save
137
138	Using playwright-cli:
139
140	```bash
141	playwright-cli -s=wp-editor open "https://example.com/wp-admin/"
142	# Login first, then navigate to Elementor editor
143	playwright-cli -s=wp-editor navigate "https://example.com/wp-admin/post.php?post={ID}&action=elementor"
144	```
145
146	Or Chrome MCP if using the user's logged-in session.
147
148	### Step 4: Manage Templates
149
150	List saved templates:
151
152	```bash
153	wp @site post list --post_type=elementor_library --fields=ID,post_title,post_status
154	```
155
156	Export a template (browser):
157
158	1. Navigate to: `https

People who liked this also viewed

6 picks

Type