A WordPress theme is, at minimum, two files in a folder. Everything else is structure you add as the design needs it. This tutorial builds a complete custom theme from an empty directory — header, footer, the Loop, menus, widget areas and properly enqueued assets — so you understand exactly what a page builder hides from you, and why hand-built themes stay fast. (If you are looking to decouple your frontend entirely, explore how to build a headless WordPress site with Next.js).
Step 1 — The two files WordPress requires
Create a folder named mytheme inside wp-content/themes/. A theme becomes visible in the dashboard with just style.css (carrying the theme header comment) and index.php:
/*
Theme Name: My Theme
Theme URI: https://example.com/
Author: Your Name
Description: A hand-built theme with no page builder.
Version: 1.0
*/That comment block is not decoration — WordPress parses it as the theme’s metadata. Activate the theme now; the site will render blank until templates exist, which is the correct starting point.
Step 2 — Split the page: header.php and footer.php
header.php owns everything from the doctype to the opening of the main content. Two calls are non-negotiable: wp_head() before </head> and body_class() on the body tag.
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<header class="site-header">
<a class="logo" href="<?php echo esc_url( home_url( '/' ) ); ?>">
<?php bloginfo( 'name' ); ?>
</a>
<?php
wp_nav_menu( array(
'theme_location' => 'primary',
'container' => 'nav',
) );
?>
</header>footer.php mirrors it: closing markup, then wp_footer() before </body>. Plugins and WordPress itself inject scripts and styles through these two hooks — skip them and things break silently.
Step 3 — functions.php: declare what the theme supports
This file is the theme’s control panel. Register menus, featured images, the title tag and widget areas, and enqueue your CSS and JavaScript the WordPress way — never by hard-coding <link> tags into the header:
<?php
function mytheme_setup() {
add_theme_support( 'title-tag' );
add_theme_support( 'post-thumbnails' );
add_theme_support( 'html5', array( 'search-form', 'gallery' ) );
register_nav_menus( array(
'primary' => 'Primary Menu',
) );
}
add_action( 'after_setup_theme', 'mytheme_setup' );
function mytheme_assets() {
wp_enqueue_style(
'mytheme-style',
get_stylesheet_uri(),
array(),
'1.0'
);
wp_enqueue_script(
'mytheme-main',
get_template_directory_uri() . '/assets/main.js',
array(),
'1.0',
true
);
}
add_action( 'wp_enqueue_scripts', 'mytheme_assets' );Step 4 — index.php and the Loop
The Loop is WordPress’s core idea: iterate over the posts the query returned and print them with template tags. A complete blog index:
<?php get_header(); ?>
<main class="site-main">
<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>
<article <?php post_class(); ?>>
<h2>
<a href="<?php the_permalink(); ?>">
<?php the_title(); ?>
</a>
</h2>
<?php the_excerpt(); ?>
</article>
<?php endwhile; ?>
<?php the_posts_pagination(); ?>
<?php else : ?>
<p>No posts found.</p>
<?php endif; ?>
</main>
<?php get_footer(); ?>Step 5 — Add the templates that matter
WordPress picks templates by hierarchy: it looks for the most specific file and falls back to index.php. Add these next, each reusing the header/footer pattern:
-
single.php — a full article: title, featured image with
the_post_thumbnail(),the_content(), comments viacomments_template(). -
page.php — static pages; usually the same skeleton minus the date/author meta.
-
archive.php — category, tag and date listings, headed by
the_archive_title(). -
404.php — a helpful dead end with a search form (
get_search_form()). -
search.php — results using the same loop as the index.
Step 6 — Widget areas and the Customizer basics
Register a sidebar in functions.php with register_sidebar() and print it with dynamic_sidebar(). For editable settings such as a footer line or a logo, use the Customizer API (add_theme_support('custom-logo') covers the logo case in one line). The rule: anything a non-developer might need to change should be reachable from the dashboard, not buried in template files.
Step 7 — Style it like you mean it
Write plain CSS in style.css (or enqueue a compiled stylesheet from a build step). Because every class is yours, the stylesheet stays small and predictable — no framework fighting a builder’s generated markup. Finish with a validation pass: every template escapes output correctly (esc_html(), esc_url(), esc_attr()), and the theme works with the default content in the Theme Unit Test data. For production environments, remember to harden WordPress security without plugins to protect against common attack vectors.
Two files make a theme valid. Structure, escaping and the enqueue system make it professional. That gap is exactly what a page builder fills with megabytes — and what you now know how to fill with a few hundred lines.
