The Theme Files

Understand the anatomy of a WordPress theme — all the template files, functions.php, and how they work together.

The Theme Files

A WordPress theme is made up of PHP template files, a stylesheet, and a functions file. Let's understand what each file does and how they work together.

Essential Theme Files

File	Purpose
`style.css`	Theme metadata (header comment) + all CSS styles
`index.php`	Main fallback template — used when no more specific template exists
`functions.php`	Theme setup — register menus, enqueue styles, add theme support
`header.php`	Site header — `<head>`, logo, navigation
`footer.php`	Site footer — footer content, closing `</body>`
`front-page.php`	Custom homepage template
`page.php`	Template for static pages
`single.php`	Template for individual blog posts
`archive.php`	Template for category, tag, date, and author archives
`search.php`	Template for search results
`404.php`	Template for "Page Not Found" errors
`sidebar.php`	Sidebar widget area
`screenshot.png`	Theme preview image

Creating functions.php

The functions.php file is like a plugin for your theme. It runs every time your site loads.

<?php

// Theme Setup
function developer_coffee_setup() {
    // Add support for title tag
    add_theme_support('title-tag');

    // Add support for post thumbnails (featured images)
    add_theme_support('post-thumbnails');

    // Register navigation menu
    register_nav_menus(array(
        'primary' => __('Primary Menu', 'developer-coffee'),
    ));
}
add_action('after_setup_theme', 'developer_coffee_setup');

// Enqueue Styles and Scripts
function developer_coffee_scripts() {
    wp_enqueue_style(
        'developer-coffee-style',
        get_stylesheet_uri(),
        array(),
        '1.0'
    );
}
add_action('wp_enqueue_scripts', 'developer_coffee_scripts');
?>

Key Functions Explained

Function	What It Does
`add_theme_support('title-tag')`	Lets WordPress manage the `<title>` tag
`add_theme_support('post-thumbnails')`	Enables featured images on posts
`register_nav_menus()`	Creates menu locations for the admin panel
`wp_enqueue_style()`	Properly loads your CSS stylesheet
`get_stylesheet_uri()`	Returns the URL to your theme's `style.css`
`add_action()`	Hooks your function into a WordPress event

WordPress Hooks — Actions & Filters

WordPress uses a hook system to let you run code at specific points:

Actions — "Do something at this point" (e.g., register menus at setup)
Filters — "Modify this data before it's used" (e.g., change the title format)

// Action: run developer_coffee_setup when WordPress sets up the theme
add_action('after_setup_theme', 'developer_coffee_setup');

// Action: run developer_coffee_scripts when loading front-end scripts
add_action('wp_enqueue_scripts', 'developer_coffee_scripts');

Updated Theme Structure

developer-coffee/
├── style.css
├── index.php
├── functions.php
├── header.php
├── footer.php
├── screenshot.png
├── front-page.php
├── page.php
├── single.php
├── archive.php
├── search.php
├── 404.php
├── sidebar.php
├── css/           ← Additional CSS
├── js/            ← JavaScript files
└── img/           ← Theme images

Key Takeaways

A theme is a collection of PHP template files, CSS, and a functions file
functions.php sets up theme features, menus, and loads stylesheets
WordPress hooks (actions and filters) let you add functionality at specific points
Use wp_enqueue_style() to load CSS properly — never use plain <link> tags
We'll build each template file in the coming episodes