wp-theme-dev

Name: wp-theme-dev
Author: wpacademy

33installs17forks

How to install wp-theme-dev?

wpacademy/wordpress-dev-skills/wp-theme-dev

$npx -y skills add wpacademy/wordpress-dev-skills --skill wp-theme-dev

Installs into the current project.

Summary

Develop WordPress themes following official WordPress coding standards, theme review requirements, accessibility standards (WCAG 2.1 AA), and modern web development best practices. Use this skill whenever the user wants to create, scaffold, or develop a WordPress theme — includin

Files · 1

View on GitHub

SKILL.md

1	# WordPress Theme Development
2
3	## Overview
4
5	Create production-ready WordPress themes that follow official WordPress coding standards, the WordPress.org theme
6	review requirements, WCAG 2.1 Level AA accessibility standards, and modern web development best practices. Every
7	theme produced by this skill is accessible, secure, translatable, performant, and ready for WordPress.org submission.
8
9	## Quick Start Workflow
10
11	1. Read references — Before writing any code, read the relevant reference files:
12	- `references/block-theme-architecture.md` — Block theme structure, theme.json, templates, patterns
13	- `references/classic-theme-architecture.md` — Classic theme structure, template hierarchy, The Loop
14	- `references/accessibility.md` — WCAG 2.1 AA requirements, WordPress accessibility-ready standards
15	- `references/review-requirements.md` — WordPress.org theme review checklist (14 categories)
16	2. Determine theme type — Ask if the user wants a block theme (recommended), classic theme, or child theme
17	3. Gather requirements — Design goals, color palette, typography, features needed
18	4. Scaffold — Generate the directory structure, required files, and theme.json
19	5. Build templates & patterns — Create each template/pattern as a separate file
20	6. Generate readme.txt — Always include a WordPress.org-compliant readme.txt
21	7. Deliver — Ask user if they want files for download or a custom path
22
23	## Core Principles — ALWAYS Follow These
24
25	### 1. Block Themes Are the Default
26	Unless the user explicitly asks for a classic theme, always build a block theme (Full Site Editing). Block themes:
27	- Use HTML template files (not PHP template files)
28	- Configure design through `theme.json` (not PHP/CSS)
29	- Support the Site Editor for full visual editing
30	- Use block patterns for reusable layouts
31	- Use template parts for headers, footers, sidebars
32
33	Only build a classic theme when the user specifically requests it or needs features only available in classic themes.
34
35	### 2. Clean functions.php
36	The `functions.php` file should ONLY contain:
37	- Theme setup (`after_setup_theme` hook) — declaring support for theme features
38	- Asset enqueueing (`wp_enqueue_scripts` hook)
39	- Registering block patterns, pattern categories, and block styles
40	- Registering navigation menus (classic themes)
41	- Registering widget areas (classic themes)
42	- Loading additional PHP files from `inc/` directory
43
44	NEVER put lengthy logic, output HTML, or complex functionality directly in functions.php.
45	Split additional functionality into files in the `inc/` directory.
46
47	### 3. Accessibility — Non-Negotiable
48	Every theme MUST meet WCAG 2.1 Level AA and WordPress accessibility requirements. This is not optional.
49
50	Read `references/accessibility.md` for complete requirements. Key mandatory items:
51
52	Skip links: First focusable element, visible on focus, jumps to main content.
53
54	Keyboard navigation: All interactive elements reachable and operable via keyboard. Visible focus indicators on all focusable elements. Focus order follows logical reading order.
55
56	Semantic HTML: Use proper HTML5 landmark elements (`<header>`, `<main>`, `<nav>`, `<aside>`, `<footer>`). Use ARIA landmark roles as reinforcement. Proper heading hierarchy (one H1 per page, no skipped levels).
57
58	Color contrast: All text meets 4.5:1 ratio against background (3:1 for large text 18px+ bold or 24px+ regular). UI components and focus indicators meet 3:1 ratio.
59
60	Content links: Links within body content MUST be underlined. Bold/italic/color-only is not acceptable.
61
62	Forms: All form inputs must have explicit `<label>` elements. No placeholder-only labels. Error states must be perceivable by screen readers.
63
64	Images: All `<img>` tags must have meaningful `alt` attributes. Decorative images use `alt=""`.
65
66	Screen reader text: Use `.screen-reader-text` class for visually hidden but accessible text. Apply to "Read more" links, icon-only buttons, and repetitive link text.
67
68	Repetitive link text: "Read more" links must include the post title (visually hidden is OK).
69
70	Media: Embedded media must not auto-play. Provide controls for all media.
71
72	### 4. Security
73	- Escape ALL output: `esc_html()`, `esc_attr()`, `esc_url()`, `wp_kses_post()`
74	- Sanitize ALL input: `sanitize_text_field()

People who liked this also viewed

6 picks

Type

wp-theme-dev

33installs17forks

View on GitHub

How to install wp-theme-dev?

wpacademy/wordpress-dev-skills/wp-theme-dev

$npx -y skills add wpacademy/wordpress-dev-skills --skill wp-theme-dev

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# WordPress Theme Development
2
3	## Overview
4
5	Create production-ready WordPress themes that follow official WordPress coding standards, the WordPress.org theme
6	review requirements, WCAG 2.1 Level AA accessibility standards, and modern web development best practices. Every
7	theme produced by this skill is accessible, secure, translatable, performant, and ready for WordPress.org submission.
8
9	## Quick Start Workflow
10
11	1. Read references — Before writing any code, read the relevant reference files:
12	- `references/block-theme-architecture.md` — Block theme structure, theme.json, templates, patterns
13	- `references/classic-theme-architecture.md` — Classic theme structure, template hierarchy, The Loop
14	- `references/accessibility.md` — WCAG 2.1 AA requirements, WordPress accessibility-ready standards
15	- `references/review-requirements.md` — WordPress.org theme review checklist (14 categories)
16	2. Determine theme type — Ask if the user wants a block theme (recommended), classic theme, or child theme
17	3. Gather requirements — Design goals, color palette, typography, features needed
18	4. Scaffold — Generate the directory structure, required files, and theme.json
19	5. Build templates & patterns — Create each template/pattern as a separate file
20	6. Generate readme.txt — Always include a WordPress.org-compliant readme.txt
21	7. Deliver — Ask user if they want files for download or a custom path
22
23	## Core Principles — ALWAYS Follow These
24
25	### 1. Block Themes Are the Default
26	Unless the user explicitly asks for a classic theme, always build a block theme (Full Site Editing). Block themes:
27	- Use HTML template files (not PHP template files)
28	- Configure design through `theme.json` (not PHP/CSS)
29	- Support the Site Editor for full visual editing
30	- Use block patterns for reusable layouts
31	- Use template parts for headers, footers, sidebars
32
33	Only build a classic theme when the user specifically requests it or needs features only available in classic themes.
34
35	### 2. Clean functions.php
36	The `functions.php` file should ONLY contain:
37	- Theme setup (`after_setup_theme` hook) — declaring support for theme features
38	- Asset enqueueing (`wp_enqueue_scripts` hook)
39	- Registering block patterns, pattern categories, and block styles
40	- Registering navigation menus (classic themes)
41	- Registering widget areas (classic themes)
42	- Loading additional PHP files from `inc/` directory
43
44	NEVER put lengthy logic, output HTML, or complex functionality directly in functions.php.
45	Split additional functionality into files in the `inc/` directory.
46
47	### 3. Accessibility — Non-Negotiable
48	Every theme MUST meet WCAG 2.1 Level AA and WordPress accessibility requirements. This is not optional.
49
50	Read `references/accessibility.md` for complete requirements. Key mandatory items:
51
52	Skip links: First focusable element, visible on focus, jumps to main content.
53
54	Keyboard navigation: All interactive elements reachable and operable via keyboard. Visible focus indicators on all focusable elements. Focus order follows logical reading order.
55
56	Semantic HTML: Use proper HTML5 landmark elements (`<header>`, `<main>`, `<nav>`, `<aside>`, `<footer>`). Use ARIA landmark roles as reinforcement. Proper heading hierarchy (one H1 per page, no skipped levels).
57
58	Color contrast: All text meets 4.5:1 ratio against background (3:1 for large text 18px+ bold or 24px+ regular). UI components and focus indicators meet 3:1 ratio.
59
60	Content links: Links within body content MUST be underlined. Bold/italic/color-only is not acceptable.
61
62	Forms: All form inputs must have explicit `<label>` elements. No placeholder-only labels. Error states must be perceivable by screen readers.
63
64	Images: All `<img>` tags must have meaningful `alt` attributes. Decorative images use `alt=""`.
65
66	Screen reader text: Use `.screen-reader-text` class for visually hidden but accessible text. Apply to "Read more" links, icon-only buttons, and repetitive link text.
67
68	Repetitive link text: "Read more" links must include the post title (visually hidden is OK).
69
70	Media: Embedded media must not auto-play. Provide controls for all media.
71
72	### 4. Security
73	- Escape ALL output: `esc_html()`, `esc_attr()`, `esc_url()`, `wp_kses_post()`
74	- Sanitize ALL input: `sanitize_text_field()

People who liked this also viewed

6 picks

Type