Build a Basic WordPress Theme from Scratch (Full Code Guide)
This guide provides a complete, minimal WordPress theme implementation using core PHP, HTML, and CSS. It follows WordPress theme development standards and includes all essential files: style.css, index.php, functions.php, header.php, and footer.php. The result is a functional, lightweight theme suitable for customization or as a development baseline.
1. Theme Folder Structure
Create a new folder in:
/wp-content/themes/basic-theme/
Inside it, create these files:
basic-theme/
│── style.css
│── index.php
│── functions.php
│── header.php
│── footer.php
│── screenshot.png (optional)
2. style.css (Theme Metadata + Basic Styling)
Theme Name: Basic Theme
Theme URI: http://example.com
Author: Your Name
Author URI: http://example.com
Description: A simple custom WordPress theme built from scratch.
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: basic-theme
*/
/* Basic Reset */
body {
margin: 0;
font-family: Arial, sans-serif;
background: #f5f5f5;
}
header {
background: #222;
color: #fff;
padding: 15px;
}
footer {
background: #222;
color: #fff;
text-align: center;
padding: 10px;
}
.container {
width: 80%;
margin: auto;
padding: 20px;
background: #fff;
}
a {
color: #0073aa;
text-decoration: none;
}
3. functions.php (Theme Setup)
<?php
function basic_theme_setup() {
add_theme_support('title-tag');
add_theme_support('post-thumbnails');
register_nav_menus(array(
'primary' => __('Primary Menu', 'basic-theme'),
));
}
add_action('after_setup_theme', 'basic_theme_setup');
// Enqueue styles
function basic_theme_scripts() {
wp_enqueue_style('basic-style', get_stylesheet_uri()); }
add_action('wp_enqueue_scripts', 'basic_theme_scripts');
4. header.php (Top Layout)
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<header>
<h1><?php bloginfo('name'); ?></h1>
<p><?php bloginfo('description'); ?></p>
<nav>
<?php
wp_nav_menu(array(
'theme_location' => 'primary'
));
?>
</nav>
</header>
<div class="container">
5. footer.php (Bottom Layout)
</div> <!-- .container -->
<footer>
<p>© <?php echo date('Y'); ?> <?php bloginfo('name'); ?></p>
</footer>
<?php wp_footer(); ?>
</body>
</html>
6. index.php (Main Template File)
<?php get_header(); ?>
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<article>
<h2>
<a href="<?php the_permalink(); ?>">
<?php the_title(); ?>
</a>
</h2>
<p><?php the_time('F j, Y'); ?> by <?php the_author(); ?></p>
<div>
<?php the_excerpt(); ?>
</div>
</article>
<hr>
<?php endwhile; ?>
<?php else : ?>
<p>No posts found.</p>
<?php endif; ?>
<?php get_footer(); ?>
7. Activate the Theme
Go to WordPress Admin Dashboard
Navigate to Appearance → Themes
Find Basic Theme
Click Activate
8. Optional Enhancements
You can extend this base theme by adding:
single.php→ individual post layoutpage.php→ static pagesarchive.php→ category/tag pagessidebar.php→ widget areasfunctions.phpadditions for:custom post types
widgets
customizer settings
Summary
This implementation establishes:
Proper theme registration via
style.cssCore WordPress hooks (
wp_head,wp_footer)Loop rendering posts dynamically
Menu registration and rendering
Asset loading via
functions.php
It is intentionally minimal but structurally correct, making it a stable base for further theme engineering or conversion into a production-grade theme.
