WordPress Admin Panel / Page-Builder Builder
Stands up a complete, standalone page-builder CMS on a WordPress site as ONE self-contained plugin file. It gives a non-technical client their own login-protected /admin editor (separate from wp-admin) with a live preview, ready-made section templates, 15+ drag/tap-editable content blocks, and pro editor features — Elementor-like, but locked to the client's brand and simple enough for someone with zero tech skill.
This skill exists because that system was built and battle-tested once (192KB, all features verified live). Don't rebuild from scratch — adapt the proven template plugin in reference/page-cms.template.php.
Trigger
Use when the user asks to: create a WordPress admin panel; build a custom page builder / no-code editor; make a site "client-editable"; add a standalone /admin; or replicate "the Impacter admin" on another site.
Resolve skill directory
This skill may live in different locations. Determine $SKILL_DIR from where this SKILL.md was loaded (e.g. C:/Users/user/.claude/skills/wp-admin-panel-builder). All paths below are relative to it.
What you get (feature inventory)
The template already implements ALL of this — verify, don't re-derive:
- Standalone
/admin: own email+password login (hashed via wp_hash_password), CSRF per session, brute-force lockout, secure session cookie. No wp-admin needed.
- Live two-pane editor: field panel + iframe preview, device widths (desktop/tablet/mobile), mobile preview-first with a Preview/Edit toggle, tap-to-edit inline on the preview, floating "+" to add.
- Ready-made section templates (hero, CTA, features, stats, image+text, quote…) + a Saved Sections library (★ save any block, reuse anywhere).
- Content blocks: heading, text (rich), image (url/upload, custom px width, align, nudge), button, video (YouTube/MP4), cards, stats, divider, spacer, section (bg colour/image/video/gradient + overlay + layout + children), columns, accordion/FAQ, tabs, testimonial, gallery (+lightbox), icon list, pricing, form (auto-lists the site's Contact Form 7 forms + Newsletter).
- Rich text: B/I/Link/•List toolbar over a plain textarea (so a
/ slash-command menu still works), rendered safely by rte_render() (**bold**, *italic*, [text](url), - bullets).
- Per-block design controls ("⚙ Spacing & effects"): space above/below, scroll animation (fade-up/in/zoom), hide-on-mobile, text size + weight. Applied by
block_wrap().
- Editor confidence: Undo/Redo (Ctrl+Z/Y + buttons), Duplicate, Copy/Paste across pages, Move ▲▼, drag reorder, unsaved-changes guard, client autosave-recovery.
- Global brand theme: change brand colours + heading/body Google fonts + logo + favicon once → applies to every page (
theme_css(); brand panel handles uploads, logos() serves them, favicon injected in every <head>).
- Editable menu: an admin Menu & navigation panel (option
impacter_cms_menu) drives header + mobile nav + CTA on every page via nav_html()/cta_html() — no hardcoded nav.
- Template library:
page_templates() returns ~10 full-page + ~10 article layouts with demo data; the editor picker (#ibPageTpl / loadTemplate()) drops a whole design onto a page.
- Blog-post authoring: create/edit WordPress Posts from
/admin as block content (key post_<id>, blocks in impacter_cms_blocks_post_<id>, meta _impacter_cms_post=1); render_post() renders them branded (hooked in maybe_render_page on is_singular('post')); the Insights page + home digest list them.
- Page manager: duplicate any page, delete/rename/change-slug user pages, Published/Hidden toggle, per-page SEO.
- Version history: every Save snapshots the previous version (last 6); restore any.
Workflow
1. Gather inputs (ask the user, or infer from the existing site)
- Brand palette (primary/accent/highlight hex), heading + body fonts, logo image URL(s).
- The nav/header links and footer content.
- The set of pages to manage (keys → titles → slugs) and their starter content.
- Admin login email; generate a strong password (show once, store only the hash).
2. Confirm the deploy channel
The template is a normal active plugin file. How you write it to the server depends on what's available — see reference/deploy-and-verify.md:
- novamira MCP present (preferred): upload-link + curl +
php -l gate + execute-php install. This is the exact, safest pipeline used originally.
- No MCP: build a
.zip and have the user upload via Plugins → Add New → Upload, or use SFTP / WP-CLI. Never paste a broken file — always lint first.
3. Customize the template
Copy reference/page-cms.template.php to a working copy, then change ONLY the customization points listed in reference/customize-for-a-new-site.md (brand palette defaults, logo URLs, site_header() nav, pages() registry, gen_defaults() starter content, plugin header name/slug, and — if two installs share a site — the option prefixes). Leave the block engine untouched.
4. Deploy + verify
Follow reference/deploy-and-verify.md exactly. Non-negotiables:
php -l gate before install. This plugin loads early; a fatal can white-screen the site (and lock out MCP). Never install unlinted.node --check the editor IIFE (strip <?php…?> first) — a JS typo silently breaks saving.- Keep a timestamped
.bak of the live file every install.
- The install call runs the OLD in-memory class — always verify new behaviour in a SEPARATE fresh call/request.
- Confirm local md5 == live md5 when done.
5. Set credentials & hand off
Set the admin email/password option, confirm the /admin login flow (login → editor loads), and give the client the URL + how-to (pick a page → edit/add sections → Save).
Extending (add a new block type)
Every block follows the same 6-touchpoint pattern (render_block case → block_css → editor card() UI branch → serist() parser if composite → clean_block() sanitizer → TYPES/add-button). Interactive blocks add a runtime handler in block_js(). Full recipe with a worked example: reference/add-a-block-type.md.
Architecture & internals
Method map, option keys, data flow, and known gotchas (the ??-in-ternary "Undefined array key" trap; CSS specificity of inline-edit markers): reference/architecture.md.
Golden rules
- Brand-lock, don't free-form. The value over raw Elementor is that everything auto-matches the brand and a non-technical user cannot make it ugly. Keep controls curated.
- Verify server-side. If Cloudflare (or anything) blocks live browser testing, verify via
php -l, node --check, and execute-php render tests of each block and flow. Say so honestly if you couldn't click-test.
- Small, reversible batches. Ship a few features per deploy, lint-gated, each verified, with a backup — the way the original 20 features were landed across 8 batches.
1---2name: wp-admin-panel-builder3description: Build a standalone, Elementor-like page-builder CMS with its own /admin editor as a single self-contained WordPress plugin. Beginner-friendly tap/drag editing, 15+ content blocks (columns, accordion, tabs, testimonial, gallery, pricing, form...), rich text, per-block spacing/animation/typography, undo/redo, duplicate & copy-paste, saved-section library, autosave recovery, global brand theme, page manager (duplicate/delete/rename/publish), and version history. Use when asked to create a WordPress admin panel, a custom client-editable page builder, a no-code CMS editor, or a standalone /admin for editing pages.4---56# WordPress Admin Panel / Page-Builder Builder78Stands up a **complete, standalone page-builder CMS** on a WordPress site as ONE self-contained plugin file. It gives a non-technical client their own login-protected `/admin` editor (separate from wp-admin) with a live preview, ready-made section templates, 15+ drag/tap-editable content blocks, and pro editor features — Elementor-like, but locked to the client's brand and simple enough for someone with zero tech skill.910This skill exists because that system was built and battle-tested once (192KB, all features verified live). Don't rebuild from scratch — **adapt the proven template plugin** in `reference/page-cms.template.php`.1112## Trigger1314Use when the user asks to: create a WordPress admin panel; build a custom page builder / no-code editor; make a site "client-editable"; add a standalone `/admin`; or replicate "the Impacter admin" on another site.1516## Resolve skill directory1718This skill may live in different locations. Determine `$SKILL_DIR` from where this SKILL.md was loaded (e.g. `C:/Users/user/.claude/skills/wp-admin-panel-builder`). All paths below are relative to it.1920## What you get (feature inventory)2122The template already implements ALL of this — verify, don't re-derive:2324- **Standalone `/admin`**: own email+password login (hashed via `wp_hash_password`), CSRF per session, brute-force lockout, secure session cookie. No wp-admin needed.25- **Live two-pane editor**: field panel + iframe preview, device widths (desktop/tablet/mobile), mobile preview-first with a Preview/Edit toggle, tap-to-edit inline on the preview, floating "+" to add.26- **Ready-made section templates** (hero, CTA, features, stats, image+text, quote…) + a **Saved Sections** library (★ save any block, reuse anywhere).27- **Content blocks**: heading, text (rich), image (url/upload, custom px width, align, nudge), button, video (YouTube/MP4), cards, stats, divider, spacer, **section** (bg colour/image/video/gradient + overlay + layout + children), **columns**, **accordion/FAQ**, **tabs**, **testimonial**, **gallery** (+lightbox), **icon list**, **pricing**, **form** (auto-lists the site's Contact Form 7 forms + Newsletter).28- **Rich text**: B/I/Link/•List toolbar over a plain textarea (so a `/` slash-command menu still works), rendered safely by `rte_render()` (`**bold**`, `*italic*`, `[text](url)`, `- bullets`).29- **Per-block design controls** ("⚙ Spacing & effects"): space above/below, scroll animation (fade-up/in/zoom), hide-on-mobile, text size + weight. Applied by `block_wrap()`.30- **Editor confidence**: Undo/Redo (Ctrl+Z/Y + buttons), Duplicate, Copy/Paste across pages, Move ▲▼, drag reorder, unsaved-changes guard, client autosave-recovery.31- **Global brand theme**: change brand colours + heading/body Google fonts + **logo + favicon** once → applies to every page (`theme_css()`; brand panel handles uploads, `logos()` serves them, favicon injected in every `<head>`).32- **Editable menu**: an admin **Menu & navigation** panel (option `impacter_cms_menu`) drives header + mobile nav + CTA on every page via `nav_html()`/`cta_html()` — no hardcoded nav.33- **Template library**: `page_templates()` returns ~10 full-page + ~10 article layouts with demo data; the editor picker (`#ibPageTpl` / `loadTemplate()`) drops a whole design onto a page.34- **Blog-post authoring**: create/edit WordPress Posts from `/admin` as block content (key `post_<id>`, blocks in `impacter_cms_blocks_post_<id>`, meta `_impacter_cms_post=1`); `render_post()` renders them branded (hooked in `maybe_render_page` on `is_singular('post')`); the Insights page + home digest list them.35- **Page manager**: duplicate any page, delete/rename/change-slug user pages, Published/Hidden toggle, per-page SEO.36- **Version history**: every Save snapshots the previous version (last 6); restore any.3738## Workflow3940### 1. Gather inputs (ask the user, or infer from the existing site)41- Brand palette (primary/accent/highlight hex), heading + body fonts, logo image URL(s).42- The nav/header links and footer content.43- The set of pages to manage (keys → titles → slugs) and their starter content.44- Admin login email; generate a strong password (show once, store only the hash).4546### 2. Confirm the deploy channel47The template is a normal active plugin file. How you write it to the server depends on what's available — see `reference/deploy-and-verify.md`:48- **novamira MCP present** (preferred): upload-link + curl + `php -l` gate + `execute-php` install. This is the exact, safest pipeline used originally.49- **No MCP**: build a `.zip` and have the user upload via *Plugins → Add New → Upload*, or use SFTP / WP-CLI. Never paste a broken file — always lint first.5051### 3. Customize the template52Copy `reference/page-cms.template.php` to a working copy, then change ONLY the customization points listed in `reference/customize-for-a-new-site.md` (brand palette defaults, logo URLs, `site_header()` nav, `pages()` registry, `gen_defaults()` starter content, plugin header name/slug, and — if two installs share a site — the option prefixes). Leave the block engine untouched.5354### 4. Deploy + verify55Follow `reference/deploy-and-verify.md` exactly. Non-negotiables:56- **`php -l` gate before install.** This plugin loads early; a fatal can white-screen the site (and lock out MCP). Never install unlinted.57- **`node --check` the editor IIFE** (strip `<?php…?>` first) — a JS typo silently breaks saving.58- Keep a timestamped `.bak` of the live file every install.59- **The install call runs the OLD in-memory class** — always verify new behaviour in a SEPARATE fresh call/request.60- Confirm local md5 == live md5 when done.6162### 5. Set credentials & hand off63Set the admin email/password option, confirm the `/admin` login flow (login → editor loads), and give the client the URL + how-to (pick a page → edit/add sections → Save).6465## Extending (add a new block type)66Every block follows the same 6-touchpoint pattern (render_block case → block_css → editor `card()` UI branch → `serist()` parser if composite → `clean_block()` sanitizer → TYPES/add-button). Interactive blocks add a runtime handler in `block_js()`. Full recipe with a worked example: `reference/add-a-block-type.md`.6768## Architecture & internals69Method map, option keys, data flow, and known gotchas (the `??`-in-ternary "Undefined array key" trap; CSS specificity of inline-edit markers): `reference/architecture.md`.7071## Golden rules72- **Brand-lock, don't free-form.** The value over raw Elementor is that everything auto-matches the brand and a non-technical user cannot make it ugly. Keep controls curated.73- **Verify server-side.** If Cloudflare (or anything) blocks live browser testing, verify via `php -l`, `node --check`, and `execute-php` render tests of each block and flow. Say so honestly if you couldn't click-test.74- **Small, reversible batches.** Ship a few features per deploy, lint-gated, each verified, with a backup — the way the original 20 features were landed across 8 batches.
abdul977