What is a WordPress Theme?

A WordPress theme is a collection of templates and stylesheets that define the appearance and display of a WordPress-powered website. Themes control everything from layout and typography to colors and widget placement, allowing you to change your site's design without affecting the underlying content.

Anatomy of a WordPress Theme

How WordPress Themes Work

Theme Files Explained

<?php
/* style.css - Theme Header (Required) */
/*
Theme Name: My Awesome Theme
Theme URI: http://example.com/my-theme
Author: Your Name
Author URI: http://example.com
Description: A custom WordPress theme with modern features
Version: 1.0.0
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: my-theme
Tags: custom-background, custom-logo, custom-menu, featured-images
*/

/* index.php - Main Template File (Required) */
<?php get_header(); ?>

<main id="primary" class="site-main">
    <?php
    if ( have_posts() ) :
        while ( have_posts() ) :
            the_post();
            get_template_part( 'template-parts/content', get_post_type() );
        endwhile;
        
        the_posts_navigation();
    else :
        get_template_part( 'template-parts/content', 'none' );
    endif;
    ?>
</main>

<?php
get_sidebar();
get_footer();
?>

/* functions.php - Theme Functions */
<?php
// Theme Setup
function my_theme_setup() {
    // Add theme support features
    add_theme_support( 'post-thumbnails' );
    add_theme_support( 'custom-logo' );
    add_theme_support( 'automatic-feed-links' );
    add_theme_support( 'title-tag' );
    add_theme_support( 'html5', array(
        'search-form',
        'comment-form',
        'comment-list',
        'gallery',
        'caption',
    ) );
    
    // Register navigation menus
    register_nav_menus( array(
        'primary' => __( 'Primary Menu', 'my-theme' ),
        'footer' => __( 'Footer Menu', 'my-theme' ),
    ) );
}
add_action( 'after_setup_theme', 'my_theme_setup' );

// Enqueue Scripts and Styles
function my_theme_scripts() {
    wp_enqueue_style( 'my-theme-style', get_stylesheet_uri() );
    wp_enqueue_script( 'my-theme-script', get_template_directory_uri() . '/assets/js/main.js', array('jquery'), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );

// Register Widget Areas
function my_theme_widgets_init() {
    register_sidebar( array(
        'name'          => __( 'Sidebar', 'my-theme' ),
        'id'            => 'sidebar-1',
        'description'   => __( 'Add widgets here.', 'my-theme' ),
        'before_widget' => '<section id="%1$s" class="widget %2$s">',
        'after_widget'  => '</section>',
        'before_title'  => '<h2 class="widget-title">',
        'after_title'   => '</h2>',
    ) );
}
add_action( 'widgets_init', 'my_theme_widgets_init' );
?>

WordPress Template Hierarchy

The template hierarchy determines which template file WordPress uses to display content. It follows a specific order from most specific to most general.

Common Template Files

<?php
// Home Page
// 1. front-page.php
// 2. home.php (blog posts index)
// 3. page.php (if static page)
// 4. index.php

// Single Post
// 1. single-{post-type}-{slug}.php
// 2. single-{post-type}.php
// 3. single.php
// 4. singular.php
// 5. index.php

// Page
// 1. custom template file
// 2. page-{slug}.php
// 3. page-{id}.php
// 4. page.php
// 5. singular.php
// 6. index.php

// Category
// 1. category-{slug}.php
// 2. category-{id}.php
// 3. category.php
// 4. archive.php
// 5. index.php

// Custom Post Type Archive
// 1. archive-{post-type}.php
// 2. archive.php
// 3. index.php

// Search Results
// 1. search.php
// 2. index.php

// 404 Error
// 1. 404.php
// 2. index.php
?>

Themes vs Plugins

Common Theme Features

Implementing Theme Features

<?php
// Add theme support in functions.php
function theme_features_setup() {
    // Post thumbnails
    add_theme_support( 'post-thumbnails' );
    set_post_thumbnail_size( 1200, 9999 );
    
    // Custom logo
    add_theme_support( 'custom-logo', array(
        'height'      => 100,
        'width'       => 400,
        'flex-height' => true,
        'flex-width'  => true,
        'header-text' => array( 'site-title', 'site-description' ),
    ) );
    
    // Custom background
    add_theme_support( 'custom-background', array(
        'default-color' => 'ffffff',
        'default-image' => '',
    ) );
    
    // Custom header
    add_theme_support( 'custom-header', array(
        'default-image'          => '',
        'default-text-color'     => '000000',
        'width'                  => 1920,
        'height'                 => 250,
        'flex-height'            => true,
        'wp-head-callback'       => 'theme_header_style',
    ) );
    
    // Post formats
    add_theme_support( 'post-formats', array(
        'aside',
        'gallery',
        'link',
        'image',
        'quote',
        'status',
        'video',
        'audio',
        'chat',
    ) );
    
    // HTML5 support
    add_theme_support( 'html5', array(
        'comment-form',
        'comment-list',
        'gallery',
        'caption',
        'style',
        'script',
        'navigation-widgets',
    ) );
    
    // Selective refresh for widgets
    add_theme_support( 'customize-selective-refresh-widgets' );
    
    // Block editor support
    add_theme_support( 'wp-block-styles' );
    add_theme_support( 'align-wide' );
    add_theme_support( 'editor-styles' );
    add_editor_style( 'style-editor.css' );
    
    // Responsive embeds
    add_theme_support( 'responsive-embeds' );
}
add_action( 'after_setup_theme', 'theme_features_setup' );
?>

Visual Theme Structure

Theme Hooks and Actions

<?php
// Common theme hooks
// Hook into theme initialization
add_action( 'init', 'theme_init' );
function theme_init() {
    // Register custom post types
    // Register taxonomies
    // Add image sizes
}

// Theme setup
add_action( 'after_setup_theme', 'theme_setup' );
function theme_setup() {
    // Add theme support
    // Register menus
    // Load textdomain
}

// Enqueue assets
add_action( 'wp_enqueue_scripts', 'theme_scripts' );
function theme_scripts() {
    // Load stylesheets
    // Load JavaScript
}

// Customize wp_head output
add_action( 'wp_head', 'theme_head' );
function theme_head() {
    // Add meta tags
    // Add custom CSS
    // Add analytics
}

// Customize wp_footer output
add_action( 'wp_footer', 'theme_footer' );
function theme_footer() {
    // Add tracking scripts
    // Add custom JavaScript
}

// Widget areas
add_action( 'widgets_init', 'theme_widgets' );
function theme_widgets() {
    // Register sidebars
    // Register custom widgets
}

// Customize login screen
add_action( 'login_enqueue_scripts', 'theme_login' );
function theme_login() {
    // Custom login styles
}

// Admin customizations
add_action( 'admin_init', 'theme_admin' );
function theme_admin() {
    // Add theme options
    // Customize admin
}
?>

Theme Development Best Practices

Common Theme Issues and Solutions

<?php
// Issue: White screen of death
// Solution: Enable debugging
define( 'WP_DEBUG', true );
define( 'WP_DEBUG_LOG', true );
define( 'WP_DEBUG_DISPLAY', false );

// Issue: Styles not loading
// Solution: Properly enqueue styles
function correct_style_loading() {
    wp_enqueue_style( 
        'theme-style', 
        get_stylesheet_uri(), 
        array(), // Dependencies
        filemtime( get_stylesheet_directory() . '/style.css' ) // Version
    );
}
add_action( 'wp_enqueue_scripts', 'correct_style_loading' );

// Issue: JavaScript conflicts
// Solution: Use no-conflict mode
jQuery(document).ready(function($) {
    // $ is now safe to use
});

// Issue: Missing theme features
// Solution: Add theme support
add_theme_support( 'post-thumbnails' );
add_theme_support( 'title-tag' );

// Issue: Broken responsive design
// Solution: Add viewport meta tag
function add_viewport_meta() {
    echo '<meta name="viewport" content="width=device-width, initial-scale=1">';
}
add_action( 'wp_head', 'add_viewport_meta' );

// Issue: Slow page load
// Solution: Optimize asset loading
function optimize_theme_assets() {
    // Remove unnecessary scripts
    wp_dequeue_script( 'unnecessary-script' );
    
    // Load scripts in footer
    wp_enqueue_script( 
        'theme-script', 
        get_template_directory_uri() . '/js/script.js', 
        array('jquery'), 
        '1.0.0', 
        true // Load in footer
    );
}
?>

Practice Exercise