# Wp Admin Panel Builder > 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. - Skill: `abdul977/wp-admin-panel-builder` (Agent Skill, multi-file: 6 files) - Install (CLI): `npx skillmds@latest add abdul977/wp-admin-panel-builder` - Raw SKILL.md: https://api.skillmd.com/api/skills/abdul977/wp-admin-panel-builder/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Design & Media - Author: abdul977 (https://skillmd.com/u/abdul977) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/abdul977/wp-admin-panel-builder --- # 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 ``). - **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_`, blocks in `impacter_cms_blocks_post_`, 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 `` 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.