Creating a custom WordPress theme from scratch

Custom Code, JavaScript, WordPress, WP Themes

Creating a custom WordPress theme from scratch requires a good understanding of PHP, HTML, CSS, JavaScript, and WordPress functions. Below, I will guide you step by step with the necessary code.

🔹 Step 1: Set Up Your Theme Folder

Navigate to your WordPress installation:
wp-content/themes/
Create a new folder for your theme:
Example: my-custom-theme
Inside this folder, create the following essential files:
pgsq
lCopymy-custom-theme/
├── style.css
├── index.php
├── header.php
├── footer.php
├── functions.php
├── sidebar.php
├── page.php
├── single.php
├── archive.php
├── 404.php
├── assets/
│ ├── css/
│ ├── js/
│ ├── images/

🔹 Step 2: Add Theme Information (style.css)

Every WordPress theme must have a style.css file with metadata.

📌 Create style.css and add:

cssCopy/*
Theme Name: My Custom Theme
Theme URI: http://yourwebsite.com/
Author: Your Name
Author URI: http://yourwebsite.com/
Description: A custom WordPress theme built from scratch.
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: my-custom-theme
*/

🔹 Step 3: Create the Main Template (index.php)

📌 Create index.php (main template file):

phpCopy<?php get_header(); ?>

<main>
    <h1><?php bloginfo('name'); ?></h1>
    <p><?php bloginfo('description'); ?></p>

    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
        <article>
            <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
            <p><?php the_excerpt(); ?></p>
        </article>
    <?php endwhile; else : ?>
        <p>No posts found.</p>
    <?php endif; ?>
</main>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

🔹 Step 4: Create the Header (header.php)

📌 Create header.php:

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

<header>
    <nav>
        <?php wp_nav_menu(array('theme_location' => 'main-menu')); ?>
    </nav>
</header>

🔹 Step 5: Create the Footer (footer.php)

📌 Create footer.php:

phpCopy<footer>
    <p>&copy; <?php echo date('Y'); ?> <?php bloginfo('name'); ?></p>
</footer>

<?php wp_footer(); ?>
</body>
</html>

🔹 Step 6: Create the Sidebar (sidebar.php)

📌 Create sidebar.php:

phpCopy<aside>
    <?php if (is_active_sidebar('main-sidebar')) : ?>
        <?php dynamic_sidebar('main-sidebar'); ?>
    <?php endif; ?>
</aside>

🔹 Step 7: Add Functions (functions.php)

📌 Create functions.php to register styles, scripts, menus, and widgets:

phpCopy<?php
function my_custom_theme_setup() {
    add_theme_support('title-tag');
    add_theme_support('post-thumbnails');
    register_nav_menus(array(
        'main-menu' => __('Main Menu', 'my-custom-theme'),
    ));
    register_sidebar(array(
        'name' => __('Main Sidebar', 'my-custom-theme'),
        'id' => 'main-sidebar',
        'description' => __('Widgets in this area will be shown in the sidebar.', 'my-custom-theme'),
        'before_widget' => '<div class="widget">',
        'after_widget' => '</div>',
        'before_title' => '<h3>',
        'after_title' => '</h3>',
    ));
}
add_action('after_setup_theme', 'my_custom_theme_setup');

function my_custom_theme_enqueue_scripts() {
    wp_enqueue_style('theme-style', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts', 'my_custom_theme_enqueue_scripts');
?>

🔹 Step 8: Create Templates for Pages & Posts

📌 Create page.php (for static pages):

phpCopy<?php get_header(); ?>

<main>
    <h1><?php the_title(); ?></h1>
    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
        <p><?php the_content(); ?></p>
    <?php endwhile; endif; ?>
</main>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

📌 Create single.php (for individual blog posts):

phpCopy<?php get_header(); ?>

<main>
    <h1><?php the_title(); ?></h1>
    <p><?php the_date(); ?> by <?php the_author(); ?></p>
    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
        <p><?php the_content(); ?></p>
    <?php endwhile; endif; ?>
</main>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

🔹 Step 9: Activate the Theme

Go to WordPress Dashboard → Appearance → Themes.
You should see “My Custom Theme”.
Click Activate.

🔹 Step 10: Customize the Theme

Now, you can:

Add custom CSS (style.css).
Enhance JavaScript in assets/js/ and enqueue in functions.php.
Use Customizer API to make theme options editable.

🎯 Final Thoughts

You have successfully created a WordPress custom theme from scratch