WordPress Theme Development Skill

Overview

Comprehensive guide for developing WordPress themes following best practices. Covers both classic PHP-based themes and modern FSE (Full Site Editing) block themes. Core principle: Build accessible, performant, and WordPress-standards-compliant themes.

When to Use

Use when:

• Building new WordPress themes (classic or block)
• Creating child themes
• Implementing template hierarchy
• Adding customizer options
• Setting up FSE templates and template parts
• Troubleshooting theme issues

Don't use for:

• Plugin development (use wp-plugin-development)
• Block development specifically (use wp-gutenberg-blocks)
• Security auditing (use wp-security-review)

Theme Types Overview

Classic Theme Structure

theme-name/
├── assets/
│   ├── css/
│   │   ├── style.css           # Compiled styles
│   │   └── editor-style.css    # Editor styles
│   ├── js/
│   │   ├── main.js             # Main scripts
│   │   └── navigation.js       # Nav scripts
│   ├── images/
│   └── fonts/
├── inc/
│   ├── customizer.php          # Customizer settings
│   ├── template-functions.php  # Template helpers
│   ├── template-tags.php       # Template tags
│   ├── theme-setup.php         # Theme setup
│   └── walker-nav.php          # Custom walkers
├── template-parts/
│   ├── header/
│   │   ├── site-branding.php
│   │   └── site-navigation.php
│   ├── footer/
│   │   ├── footer-widgets.php
│   │   └── site-info.php
│   ├── content/
│   │   ├── content.php
│   │   ├── content-page.php
│   │   ├── content-single.php
│   │   └── content-none.php
│   └── components/
│       ├── post-meta.php
│       └── pagination.php
├── languages/
│   └── theme-name.pot
├── 404.php
├── archive.php
├── comments.php
├── footer.php
├── front-page.php
├── functions.php
├── header.php
├── index.php
├── page.php
├── screenshot.png              # 1200x900px
├── search.php
├── sidebar.php
├── single.php
├── style.css
└── readme.txt

Block Theme Structure

theme-name/
├── assets/
│   ├── css/
│   │   └── custom.css
│   ├── js/
│   └── fonts/
├── parts/
│   ├── header.html
│   ├── footer.html
│   └── sidebar.html
├── patterns/
│   ├── hero.php
│   ├── featured-posts.php
│   └── call-to-action.php
├── styles/
│   ├── blue.json              # Color variations
│   └── dark.json
├── templates/
│   ├── 404.html
│   ├── archive.html
│   ├── front-page.html
│   ├── home.html
│   ├── index.html
│   ├── page.html
│   ├── search.html
│   └── single.html
├── functions.php
├── screenshot.png
├── style.css
├── theme.json
└── readme.txt

Required Files

style.css Header

/*
Theme Name:        Theme Name
Theme URI:         https://example.com/theme
Author:            Your Agency
Author URI:        https://youragency.com
Description:       A custom WordPress theme with modern features.
Version:           1.0.0
Requires at least: 6.0
Tested up to:      6.5
Requires PHP:      8.0
License:           GPL v2 or later
License URI:       https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:       theme-name
Tags:              block-patterns, block-styles, custom-colors, custom-logo, editor-style, full-site-editing, wide-blocks

Theme Name is based on starter theme components.
*/

functions.php Setup

<?php
/**
 * Theme functions and definitions.
 *
 * @package Theme_Name
 */

if ( ! defined( 'THEME_NAME_VERSION' ) ) {
    define( 'THEME_NAME_VERSION', '1.0.0' );
}

/**
 * Theme setup.
 */
function theme_name_setup() {
    // Make theme available for translation.
    load_theme_textdomain( 'theme-name', get_template_directory() . '/languages' );

    // Add default posts and comments RSS feed links.
    add_theme_support( 'automatic-feed-links' );

    // Let WordPress manage the document title.
    add_theme_support( 'title-tag' );

    // Enable support for Post Thumbnails.
    add_theme_support( 'post-thumbnails' );
    set_post_thumbnail_size( 1200, 630, true );

    // Add custom image sizes.
    add_image_size( 'theme-name-featured', 1920, 1080, true );
    add_image_size( 'theme-name-card', 600, 400, true );

    // Register navigation menus.
    register_nav_menus(
        array(
            'primary'   => esc_html__( 'Primary Menu', 'theme-name' ),
            'footer'    => esc_html__( 'Footer Menu', 'theme-name' ),
            'social'    => esc_html__( 'Social Menu', 'theme-name' ),
        )
    );

    // HTML5 markup support.
    add_theme_support(
        'html5',
        array(
            'search-form',
            'comment-form',
            'comment-list',
     

...