Theme File Structure

A basic WordPress theme requires:

  • style.css (theme metadata and styles)

  • index.php (fallback template)

Common additional files:

  • header.php

  • footer.php

  • sidebar.php

  • functions.php

  • single.php

  • page.php

  • archive.php

  • search.php

  • 404.php

Page Template Layout

Custom Page Template:

<?php
/* Template Name: Custom Layout */
get_header();
?>

<section class="custom-page">
    <?php
    while (have_posts()) : the_post();
        the_content();
    endwhile;
    ?>
</section>

<?php get_footer(); ?>

Enqueue Styles and Scripts

In functions.php:

function theme_enqueue_assets() {
    wp_enqueue_style('main-style', get_stylesheet_uri());
    wp_enqueue_script('main-js', get_template_directory_uri() . '/js/main.js', array(), null, true);
}
add_action('wp_enqueue_scripts', 'theme_enqueue_assets');

Block Theme Layout (FSE – Full Site Editing)

Block themes use:

  • theme.json

  • templates/

  • parts/

Example: templates/index.html

<!-- wp:template-part {"slug":"header"} /-->

<!-- wp:group -->
    <!-- wp:post-title /-->
    <!-- wp:post-content /-->
<!-- /wp:group -->

<!-- wp:template-part {"slug":"footer"} /-->

Layout with CSS Grid Example

.site-layout {
    display: grid;
    grid-template-columns: 3fr 1fr;
    gap: 20px;
}

main {
    grid-column: 1;
}

aside {
    grid-column: 2;
}