Develop Custom WordPress Themes with Modern Features

This skill covers building custom WordPress themes from scratch across eight phases: theme setup (directory structure, style.css header with Requires PHP: 7.4, functions.php), template hierarchy (index.php as fallback, header.php/footer.php, single.php, page.php, archive.php, search.php, 404.php), theme functions with a full theme.json v3 schema example (layout content/wide sizes, typography, spacing, per-block settings, custom templates and template parts), custom post types (with show_in_rest => true required for Real-Time Collaboration compatibility, shown registering a "portfolio" CPT with collaboration-ready meta), block editor support, styling/responsive design, and browser/accessibility/performance testing.

Its most detailed content covers WordPress 7.0-specific theme features: Admin Refresh (new default color scheme, view-transition CSS between admin screens); Pattern Editing with ContentOnly mode as the default for unsynced patterns (shown with a full hero-section block pattern using contentOnly: true and templated {{hero_image}}/{{hero_title}} placeholders); customizable Navigation Overlays (a full template-part example with an accessible close button and wp_nav_menu()); new core blocks (Icon, Breadcrumbs with filterable hooks like wp_breadcrumb_args and breadcrumb_items for injecting custom post type crumbs, and a Responsive Grid block); theme.json enhancements (pseudo-element support, block-defined feature selectors); and the iframed post editor enabled by Block API v3+ (opt-in in 7.0, fully enforced in 7.1). It provides a complete theme directory structure including WordPress 7.0-specific patterns/ and templates/ (site editor) folders, and closes with a dedicated WordPress 7.0 theme checklist (PHP 7.4+ documented, theme.json v3 schema, ContentOnly editing, navigation overlays, breadcrumb filters, view transitions, admin refresh compatibility, CPT meta show_in_rest, iframe editor tested).

Use this skill when creating a custom WordPress theme, converting a design into a WordPress theme, adding block editor (Gutenberg) support, implementing custom post types within a theme, building a child theme, or specifically implementing WordPress 7.0 theme-layer features (Admin Refresh, Pattern Editing, Navigation Overlays, new blocks).

It names three related workflow bundles for adjacent scope - wordpress (the broader development workflow), wordpress-plugin-development, and wordpress-woocommerce - so plugin logic or ecommerce-specific work should go to those instead of being forced into theme files.

Input is a WordPress theme project at any stage, from scaffolding through testing. Output is a complete theme directory (templates, theme.json, patterns/, template-parts/, inc/, assets/) with working block patterns, RTC-compatible custom post types, navigation overlays, and breadcrumb integration, validated against the WordPress 7.0 theme checklist and general quality gates (responsive, accessible, performant, cross-browser tested).

{"$schema": "https://schemas.wp.org/trunk/theme.json", "version": 3}

Built on WordPress's template hierarchy, the Block Editor (Gutenberg) and Block API v3, theme.json v3 schema, and WordPress 7.0's Real-Time Collaboration (via show_in_rest), Breadcrumbs block filters, and Icon block pattern registration. Composes with app-builder, frontend-developer, frontend-design, tailwind-patterns, and playwright-skill across its phases.

Theme developers building custom or child WordPress themes who need concrete template hierarchy, theme.json, and Gutenberg block patterns, plus the specific adaptations WordPress 7.0 introduces at the theme layer.