WordPress Theme

  • A theme controls the visual presentation of a WordPress website.
  • It defines layout, typography, colors, and structure.
  • Themes use PHP, HTML, CSS, and JavaScript.
  • WordPress themes follow a template hierarchy to load files.

Theme Architecture Overview

A WordPress theme is composed of:

  • Template files (PHP)
  • Stylesheets (CSS)
  • Functions file
  • Assets (CSS, JS, images)
theme-name/
├── style.css
├── index.php
├── functions.php
├── header.php
├── footer.php
├── sidebar.php
├── page.php
├── single.php
├── archive.php
├── 404.php

Required Theme Files

1. style.css

  • Contains theme metadata
  • Required for theme recognition
/*
Theme Name: Basic Theme
Author: Developer
Version: 1.0
*/

2. index.php

  • Main fallback template
  • Required for rendering content
<?php
if ( have_posts() ) {
    while ( have_posts() ) {
        the_post();
        the_title('<h1>', '</h1>');
        the_content();
    }
}

Template Files and Their Purpose

header.php

  • Contains opening HTML, <head>, and navigation
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>

footer.php

  • Contains footer content and closing tags
<?php wp_footer(); ?>
</body>
</html>

sidebar.php

  • Displays widget areas
<?php if ( is_active_sidebar('main-sidebar') ) : ?>
    <?php dynamic_sidebar('main-sidebar'); ?>
<?php endif; ?>

page.php

  • Used for static pages
<?php get_header(); ?>
<?php the_title('<h1>', '</h1>'); ?>
<?php the_content(); ?>
<?php get_footer(); ?>

single.php

  • Used for single blog posts
<?php get_header(); ?>
<h1><?php the_title(); ?></h1>
<?php the_content(); ?>
<?php get_footer(); ?>

Template Hierarchy (Basic)

Order WordPress follows to load templates:

single post → single.php → index.php
page        → page.php   → index.php
archive     → archive.php → index.php

If a specific template does not exist, WordPress loads index.php.

functions.php

  • Adds theme features
  • Registers menus, sidebars, and assets
  • Executes automatically when the theme loads

Example

<?php
function theme_setup() {
    add_theme_support('title-tag');
    add_theme_support('post-thumbnails');
    register_nav_menu('primary', 'Primary Menu');
}
add_action('after_setup_theme', 'theme_setup');

Enqueuing Styles and Scripts

  • Prevents conflicts
  • Proper WordPress method to load assets
<?php
function theme_assets() {
    wp_enqueue_style('main-style', get_stylesheet_uri());
    wp_enqueue_script('main-js', get_template_directory_uri() . '/assets/js/main.js', [], false, true);
}
add_action('wp_enqueue_scripts', 'theme_assets');

The Loop

  • Core WordPress structure to display content
<?php
if ( have_posts() ) {
    while ( have_posts() ) {
        the_post();
        the_title();
        the_content();
    }
}

Theme Support Features

Common theme supports:

add_theme_support('custom-logo');
add_theme_support('automatic-feed-links');
add_theme_support('html5', ['search-form', 'gallery']);

Template Tags

  • Built-in WordPress functions used in themes

Examples:

the_title();
the_content();
the_permalink();
bloginfo('name');

Responsive Design in Themes

Viewport meta tag

<meta name="viewport" content="width=device-width, initial-scale=1">

Media query example

@media (max-width: 768px) {
    body {
        font-size: 16px;
    }
}

Best Practices (Theme Architecture)

  • Keep functionality in plugins, not themes
  • Use child themes for customization
  • Follow WordPress coding standards
  • Use template parts for reusable sections

Template part example

<?php get_template_part('template-parts/content'); ?>