How to Build a Simple Custom WordPress Theme from Scratch

Step 1: Set Up Your Local Environment

Before you start, ensure you have a local development environment (like XAMPP, MAMP, or Local by Flywheel) and WordPress installed on your machine.

Step 2: Create the Theme Folder

Go to wp-content/themes in your WordPress directory.
Create a new folder for your theme, e.g., mytheme.

Step 3: Add Key Files

At the very least, your theme needs two files to function:

style.css – This file contains theme metadata and your CSS styles.
index.php – This is the default template file for your theme.

style.css

				
					/* Theme Name: My Custom Theme Author: Your Name Description: A simple custom WordPress theme. Version: 1.0 */

index.php

				
					<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
     <meta charset="<?php bloginfo( 'charset' ); ?>">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>
         <?php wp_title(); ?>
     </title>
     <?php wp_head(); ?> </head>
         <body <?php body_class(); ?>>
            <header>
              <h1><?php bloginfo( 'name' ); ?></h1>
              <p><?php bloginfo( 'description' ); ?></p>
            </header>
            <main>
             <?php if ( have_posts() ) { while ( have_posts() ) { the_post(); the_title( '<h2>', '</h2>' ); the_content(); } } else { echo '<p>No content found</p>'; } ?>
            </main>
            <footer>
                   <p>&copy; <?php echo date( 'Y' ); ?> <?php bloginfo( 'name' ); ?></p>
            </footer>
            <?php wp_footer(); ?>
        </body>
</html>

Step 4: Activate the Theme

In your WordPress admin dashboard, go to Appearance > Themes.
You should see your theme listed (with the name and description from style.css).
Click Activate.

Step 5: Adding More Templates (Optional)

You can further enhance your theme by adding more template files like:

header.php – For your site’s header.
footer.php – For the footer section.
single.php – For individual posts.
page.php – For static pages.

Example for header.php:

				
					<!DOCTYPE html>
<html <?php language_attributes(); ?>> 
<head>
     <meta charset="<?php bloginfo( 'charset' ); ?>">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>
         <?php wp_title(); ?>
     </title>
     <?php wp_head(); ?>
</head>
     <body <?php body_class(); ?>>
     <header>
        <h1><?php bloginfo( 'name' ); ?></h1>
        <p><?php bloginfo( 'description' ); ?></p>
     </header>

Step 6: Add a functions.php File (Optional)

To extend your theme’s functionality, create a functions.php file in your theme folder. Use it to enqueue scripts, styles, or add theme support.

Example:

				
					<?php 
function mytheme_enqueue_styles() {
        wp_enqueue_style( 'style', get_stylesheet_uri() ); 
} 
add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_styles' );

Final Thoughts
Congratulations! You’ve just built a basic WordPress theme. You can now customize it further by adding more templates, CSS styles, and functionality. Happy coding!

IT Resource