Real WP admin markup. Security patterns built in. CSS, React, and PHP runtimes — plus a plugin scaffold and skill files so AI agents build the same way.
Settings saved. Your changes have been applied.
| API Key | |
|---|---|
| Notifications |
The three pillars
The patterns the WordPress plugin ecosystem needs in 2026, in one framework.
Real WP admin class names — .button, .notice, .wp-list-table. Your plugin inherits the user's color scheme automatically (Default, Midnight, Coffee, Ocean, …). It looks like part of WordPress because it is.
The boilerplate uses capability checks, nonces, sanitize on input, escape on output, and prepared SQL — the patterns plugin reviewers expect. Your AI agent gets the same via skills/security.md.
One URL — cdn.wp-admincss.com/AGENTS.md — feeds your coding agent the framework, the skill files, and a working scaffold. No more guessing how WordPress plugins should be structured.
Three runtimes
Drop-in CSS to start. React components for sophisticated UIs. PHP helpers for server-rendered admin pages. Every package emits identical WordPress-native HTML and inherits the user's color scheme.
<!-- One link, no build step -->
<link rel="stylesheet"
href="https://cdn.wp-admincss.com/css/latest.css">
<button class="button button-primary">
Save Changes
</button>Ideal for static admin pages and existing plugins.
// Typed components, real WP class names
import { Button, Notice }
from '@wp-admincss/react';
<Button variant="primary">
Save Changes
</Button>For modern admin UIs. Pairs with the same CSS bundle.
// Composer-installable render helpers
use WPAdminCSS\Components;
echo Components::button(
'Save Changes',
['variant' => 'primary']
);For server-rendered admin pages in your plugin.
Security by default
Every code example in the framework ships with the security patterns WordPress plugin reviewers expect. AI agents loading skills/security.md get them too.
// 1. Capability check — server-side gate.
if (!current_user_can('manage_options')) {
wp_die(esc_html__('No permission.', 'my-plugin'));
}
// 2. Nonce verification — defense against CSRF.
check_admin_referer('my_save_settings');
// 3. Sanitize each field. Never trust $_POST.
$sanitized = [
'api_key' => sanitize_text_field($_POST['api_key'] ?? ''),
'mode' => in_array($_POST['mode'], ['production', 'sandbox'], true)
? $_POST['mode'] : 'production',
];
// 4. Escape every output.
echo '<input value="' . esc_attr($sanitized['api_key']) . '">';Server-side gate before any read or write.
check_admin_referer() defends against CSRF.
sanitize_text_field, in_array, type coercion — never trust $_POST.
esc_html / esc_attr / esc_url at the moment of render.
Database queries follow the same discipline — every $wpdb call uses prepare(). Full pattern walkthrough in skills/security.md.
Component library
Every primitive you need for a polished plugin admin page. Click any tile to see the live preview and copy the code.
Built for AI workflows
Every component has two copy buttons. Grab the raw HTML for yourself, or grab a ready-to-paste prompt for your coding agent.
<div class="notice notice-success is-dismissible">
<p><strong>Settings saved.</strong></p>
<button type="button" class="notice-dismiss">
<span class="screen-reader-text">Dismiss</span>
</button>
</div>Add a dismissible WordPress admin notice to my
plugin page using WP AdminCSS.
Import the library:
<link rel="stylesheet" href="https://wp-
admincss.com/dist/wp-admin.css">
HTML:
<div class="notice notice-success
is-dismissible">
<p><strong>Saved.</strong></p>
<button class="notice-dismiss">…
</div>Customize
Every primitive uses CSS custom properties. Override them in your plugin's stylesheet to fit your brand. No build step, no preprocessor, no fork.
/* your-plugin/admin.css */
:root {
--wpadmin-primary: #7c3aed;
--wpadmin-primary-dark: #6d28d9;
--wpadmin-radius: 8px;
--wpadmin-text: #1a1a2e;
}
/* Scope to just your plugin page if you want */
.my-plugin-page {
--wpadmin-primary: #0d9488;
}
<div class="my-plugin-page">
<!-- everything inside picks up your tokens -->
</div>
Get started
<link rel="stylesheet" href="https://cdn.wp-admincss.com/css/latest.css">
<div class="wrap">
<h1>My Plugin</h1>
<button class="button button-primary">Save</button>
</div>
Built for AI-driven development
Point your coding agent at one URL. It gets the framework instructions, the security patterns, the database conventions, and a working WP plugin to copy from — all in one shot.
The master entry point. The framework, the anti-patterns, the security checklist. Hosted at cdn.wp-admincss.com/AGENTS.md — load it once, the agent has everything.
Security, database, data-modeling, enqueue, plugin-structure, i18n. Each focuses on the patterns AI agents commonly get wrong in WordPress. Load on demand.
A working plugin scaffold — settings page, REST endpoint, custom table, lifecycle hooks. Clone, find-replace the names, ship.
# Tell your agent to use the framework
@docs https://cdn.wp-admincss.com/AGENTS.md
# Or read into the conversation directly
curl https://cdn.wp-admincss.com/AGENTS.md
curl https://cdn.wp-admincss.com/skills/security.md
# Then ask: "Build a WP plugin settings page following WP AdminCSS"
# The agent already knows the security boundary, the markup, the conventions.
gh repo clone artificialpoets/wp-admincss
cp -r wp-admincss/boilerplate ~/my-plugin
cd ~/my-plugin && composer install
Native admin design. Security by default. CSS, React, or PHP — your call. Apache 2.0.