How to Create a WordPress Theme: 2 Easy Steps

Creating a WordPress theme is an exciting way to personalize your website and showcase your unique style. If you have a basic understanding of HTML, CSS, and JavaScript, you’re already on the right path to designing a custom theme that enhances your site’s appearance and functionality. Whether you want to start a blog, an online portfolio, or a business site, a custom theme allows you to tailor your site to fit your vision. In this guide, “How to Create a WordPress Theme,” we’ll walk you through the essential steps to build your theme from scratch. By the end of this tutorial, you’ll have a solid understanding of the theme structure, key files, and how to implement your designs, empowering you to create a site that truly reflects your vision.

Getting Started: How to Create a WordPress Theme

Creating a custom WordPress theme from scratch is a rewarding project that blends creativity with technical skills. This foundational phase is crucial, as it prepares you with the necessary tools and knowledge for successful theme development.

This section will discuss the fundamental skills and resources needed to kick off your journey in WordPress theme development.

File Structure of How to Create a WordPress Theme

Mastering Key Skills for WordPress Theme Development

To design a powerful and effective WordPress theme, it’s vital to master the core web languages that drive the platform. Each of these languages plays a unique role in theme development, enabling you to create a website that is not only visually appealing but also highly functional and user-friendly:

HTML (HyperText Markup Language): As the backbone of all web pages, HTML is essential for structuring your site’s content. It organizes elements like headings, paragraphs, links, and images, providing a solid framework for your theme.
CSS (Cascading Style Sheets): This styling language is crucial for enhancing the visual layout of your web pages. CSS enables you to customize aspects like colors, fonts, layouts, and even advanced animations, contributing to an attractive user interface.
PHP (Hypertext Preprocessor): A key component of WordPress, PHP is a server-side scripting language used extensively in theme development. It is essential for creating dynamic page content, manipulating WordPress data, and ensuring seamless integration with core functionalities.
JavaScript: While not always required for basic themes, JavaScript significantly enhances interactivity on your website. It allows you to implement dynamic content updates, manage form submissions, and create engaging animations, enriching the overall user experience.

By mastering these essential skills, you’ll be well-equipped to create a custom WordPress theme that meets your unique needs and enhances your website’s performance and SEO potential.

Basic Theme Files: Building the Foundation

Creating a basic custom WordPress theme is an exciting way to personalize your website and showcase your unique style. If you’re looking to tailor your site to fit your vision, understanding the fundamental files required for theme development is essential. In this guide on how to create a WordPress theme? we’ll focus on the two critical files you’ll need: style.css and index.php.

Create Your WordPress Theme Folder

Navigate to the Theme Directory
Go to the WordPress installation directory, and then navigate to the wp-content/themes/ folder.
Create a New Folder
Create a new folder for your theme. You can name it something like ‘bitlevelcode‘.

Essential Files for How to Create a WordPress Theme:

1. style.css: The style.css file is crucial for any WordPress theme. It not only contains the CSS styles that determine the visual appearance of your theme but also includes important metadata that WordPress uses to identify your theme. Here’s a breakdown of how to set up your style.css file:

/*! 
Theme Name: Bit Level Code
Theme URI: https://bitlevelcode.com/
Author: bitlevelcode.me 
Author URI: https://bitlevelcode.com/
Description: Custom theme by Bit Level Code
Version: 1.0.0 
Tested up to: 5.4 
Requires PHP: 5.6 
*/

CSS

Ensure you fill out the metadata fields accurately, as this information will help users identify your theme when they browse through the WordPress admin panel.

2. index.php: The index.php file serves as the main template for your custom WordPress theme. It acts as the fallback template for displaying content. Here’s a simple example of what your index.php file might look like:

<?php
get_header();

$args = array(
    'posts_per_page' => get_option('posts_per_page'),
);

$result = new WP_Query($args);

if ($result->have_posts()) : ?>

    <div class="content-container">
        <main class="main-content">
            <?php while ($result->have_posts()) : $result->the_post(); ?>
                <article class="post">
                    <h2 class="post-title">
                        <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
                    </h2>
                    <div class="post-content">
                        <?php the_content(); ?>
                    </div>
                    <div class="post-meta">
                        <?php 
                        $post_id = get_the_ID();
                        $author_name = get_the_author_meta('display_name', get_post_field('post_author', $post_id));
                        echo "Author Name: " . esc_html($author_name) . "<br>";
                        $publish_date = get_post_field('post_date', $post_id);
                        echo 'This post was published on ' . esc_html($publish_date) . "<br><br>";
                        ?>
                    </div>
                </article>
            <?php endwhile;

            wp_reset_postdata(); ?>
        </main>

        <?php get_sidebar(); ?>
    </div>

<?php endif;

get_footer();
?>

PHP

This structure provides a solid foundation for your theme, ensuring that it can display posts and pages correctly. By focusing on these two essential files—style.css and index.php—you can create a basic custom WordPress theme that reflects your unique style. Understanding how to set up these files is the first step in your journey to WordPress theme development.

Code Breakdown:

get_header(); This function includes the header.php file from your theme. It typically contains the opening HTML tags, site title, navigation menu, and other elements common to the top of your pages.
get_option('posts_per_page'): Retrieves the number of posts to display per page as set in the WordPress settings (admin panel). This ensures your query respects the site settings.
new WP_Query($args);: This creates a new instance of the WP_Query class, using the $args defined earlier. It allows you to query the database for posts based on specified criteria.
$result->have_posts(): Checks if the query has any posts to display. It returns true if there are posts, allowing the loop to execute.
<div class="content-container">: A wrapper <div> to contain the main content, useful for styling with CSS.
<main class="main-content">: Represents the main content area of your page, making it easier for search engines and assistive technologies to understand the primary content of the page.
the_permalink(): Retrieves the URL for the current post, allowing users to click through to the post.
the_title(): Displays the title of the current post.
the_content();: Outputs the full content of the post, including any formatting (like paragraphs, images, etc.).
get_the_ID();: Retrieves the ID of the current post within the loop, allowing you to fetch more information about that specific post.
get_post_field('post_author', $post_id): Gets the ID of the author for the current post.
get_the_author_meta('display_name', ...): Retrieves the display name of the author based on their user ID. This allows you to show the author’s name in the post metadata.
get_post_field('post_date', $post_id): Retrieves the date the post was published.
wp_reset_postdata();: Resets the global $post object after the custom query. This is important for maintaining the correct global state for any subsequent queries or template tags.
get_sidebar();: Includes the sidebar.php template file, which usually contains side content such as widgets or additional navigation.
get_footer();: Includes the footer.php file from your theme, typically containing closing HTML tags and footer content.

Advance Feature For Your WordPress Theme

Once you’ve mastered the basics of creating a WordPress theme by using essential files like index.php and style.css, you can elevate your theme by adding more advanced features. These additional template files improve the user experience and allow your theme to handle various types of content more effectively.

archive.php: This file manages archive pages like categories, tags, or date-based groupings, making it easier for users to browse related content.
footer.php: Used to design and customize the footer section of your site, often including elements like copyright information, social media links, or widgets.
functions.php: A vital file for adding custom features, enqueuing styles and scripts, and extending your theme’s functionality by registering menus, widgets, and other custom elements.
header.php: Defines the top section of your theme, such as the logo, navigation menus, or site-wide announcements, ensuring consistency across pages.
home.php: Manages how your homepage displays content when a static front page is not set, allowing you to create a custom layout for the main entry point to your site.
page.php: Handles the layout for individual pages, giving you the flexibility to design pages like About, Services, or Contact independently from blog posts.
screenshot.png: This image file serves as a visual preview of your theme within the WordPress dashboard. Make sure to name it screenshot.png to ensure proper display.
search.php: Customizes how search results are displayed, ensuring that visitors can easily navigate to relevant content based on their queries.
sidebar.php: Controls the display of widgets and other dynamic content in your sidebar, allowing you to easily manage what appears in this area of your theme.
single.php: Responsible for the layout of individual blog posts, letting you design how each post’s title, content, metadata, and comments are shown to readers.

By including these files, you can create a more feature-rich and user-friendly WordPress theme.

Code of Every File for How to Create a WordPress Theme:

archive.php:

<?php
/**
 * The template for displaying archive pages.
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/#archive
 *
 * @package bitlevelcode
 */

get_header(); ?>
<div class="content-container">
    <div class="site-content">
        <header class="page-header">
            <?php
            the_archive_title( '<h1 class="page-title">', '</h1>' );
            the_archive_description( '<div class="archive-description">', '</div>' );
            ?>
        </header><!-- .page-header -->

        <?php
        if ( have_posts() ) :

            while ( have_posts() ) : the_post(); ?>

                <article <?php post_class(); ?>>
                    <header class="entry-header">
                        <?php the_title( '<h2 class="entry-title"><a href="' . esc_url( get_permalink() ) . '">', '</a></h2>' ); ?>
                        <div class="entry-meta">
                            <span class="author">By <?php the_author(); ?></span>
                            <span class="publish-date"> on <?php the_date(); ?></span>
                        </div>
                    </header><!-- .entry-header -->

                    <div class="entry-content">
                        <?php the_excerpt(); ?>
                    </div><!-- .entry-content -->
                </article><!-- #post-## -->

            <?php endwhile;

            the_posts_navigation();

        else :
            get_template_part( 'content-none' );
        endif;
        ?>
    </div><!-- .site-content -->

    <?php get_sidebar(); ?>
</div><!-- .content-container -->

<?php
get_footer();
?>

PHP

404.php

<?php
/**
 * The template for displaying 404 pages (Not Found)
 *
 * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
 *
 * @package bitlevelcode
 */

get_header(); ?>

<div class="error-404 not-found">
    <header class="page-header">
        <h1 class="page-title">Oops! That page can’t be found.</h1>
    </header>

    <div class="page-content">
        <p>It looks like nothing was found at this location. Maybe try a search?</p>
        <?php get_search_form(); ?> 
        
        <h2>Helpful Links:</h2>
        <ul>
            <li><a href="<?php echo esc_url(home_url('/')); ?>">Return to Home</a></li>
            <li><a href="<?php echo esc_url(home_url('/blog')); ?>">Visit the Blog</a></li>
            <li><a href="<?php echo esc_url(home_url('/contact')); ?>">Contact Us</a></li>
        </ul>
    </div>
</div>

<?php get_footer(); ?>

PHP

footer.php:

<?php
/**
 * The template for displaying the footer
 *
 * Contains the closing of the #content div and all content after.
 *
 * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
 *
 * @package bitlevelcode
 */

?>

<footer id="colophon" class="site-footer">
    <div class="site-info">
        <a href="<?php echo esc_url( __( 'https://wordpress.org/', 'bitlevelcode' ) ); ?>">
            <?php
            /* translators: %s: CMS name, i.e. WordPress. */
            printf( esc_html__( 'Proudly powered by %s', 'bitlevelcode' ), 'WordPress' );
            ?>
        </a>
        <span class="sep"> | </span>
        <?php
        /* translators: 1: Theme name, 2: Theme author. */
        printf( esc_html__( 'Theme: %1$s by %2$s.', 'bitlevelcode' ), 'bitlevelcode', '<a href="https://bitlevelcode.com/">Bit Level Code</a>' );
        ?>
    </div><!-- .site-info -->
</footer><!-- #colophon -->
</div><!-- #page -->

<?php wp_footer(); ?>

</body>
</html>

PHP

functions.php:

<?php
/**
 * bitlevelcode functions and definitions
 *
 * @link https://developer.wordpress.org/themes/basics/theme-functions/
 *
 * @package bitlevelcode
 */


/**
 * Sets up theme defaults and registers support for various WordPress features.
 *
 * Note that this function is hooked into the after_setup_theme hook, which
 * runs before the init hook. The init hook is too late for some features, such
 * as indicating support for post thumbnails.

 * Register widget area.
 *
 * @link https://developer.wordpress.org/themes/functionality/sidebars/#registering-a-sidebar
 */
/**
 * Register widget area.
 *
 * @link https://developer.wordpress.org/themes/functionality/sidebars/#registering-a-sidebar
 */




 function bitlevelcode_widgets_init() {
    register_sidebar( array(
        'name'          => __( 'Primary Sidebar', 'bitlevelcode' ),
        'id'            => 'sidebar-1',
        'description'   => __( 'Add widgets here.', 'bitlevelcode' ),
        'before_widget' => '<section id="%1$s" class="widget %2$s">',
        'after_widget'  => '</section>',
        'before_title'  => '<h2 class="widget-title">',
        'after_title'   => '</h2>',
    ) );
}
add_action( 'widgets_init', 'bitlevelcode_widgets_init' );

/**
 * Proper way to enqueue scripts and styles
 */
function wpdocs_theme_name_scripts() {
	wp_enqueue_style( 'style-name', get_stylesheet_uri() );
	// wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/example.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'wpdocs_theme_name_scripts' );

PHP

header.php

<!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">
        <div class="container">
            <!-- Navigation Menu Section -->
            <nav class="main-navigation">
                <?php
                $menus = wp_get_nav_menus();

                foreach ( $menus as $menu ) {
                    echo '<div class="menu-container">';
                    echo '<h2 class="menu-title">' . esc_html( $menu->name ) . '</h2>';
                    
                    $menu_items = wp_get_nav_menu_items( $menu->term_id );
                    
                    if ( ! empty( $menu_items ) ) {
                        echo '<ul class="menu-list">';
                        
                        foreach ( $menu_items as $menu_item ) {
                            echo '<li class="menu-item">';
                            echo '<a href="' . esc_url( $menu_item->url ) . '" class="menu-link">' . esc_html( $menu_item->title ) . '</a>';
                            echo '</li>';
                        }
                        
                        echo '</ul>';
                    }
                    
                    echo '</div>';
                }
                ?>
            </nav>

            <!-- Search Bar -->
            <div class="header-search">
                <form action="<?php echo esc_url(home_url('/')); ?>" method="get">
                    <input type="text" name="s" placeholder="Search..." value="<?php the_search_query(); ?>">
                    <button type="submit">Search</button>
                </form>
            </div>
        </div>
    </header>

PHP

page.php:

<?php
/**
 * The template for displaying all single pages
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/#single-post
 *
 * @package bitlevelcode
 */

get_header();
?>

<div class="content-container">
    <main id="primary" class="main-content">
        <?php
        while ( have_posts() ) :
            the_post();
            ?>

            <article <?php post_class(); ?>>
                <header class="entry-header">
                    <h1 class="entry-title"><?php the_title(); ?></h1>
                    <div class="entry-meta">
                        <span class="author">By <?php the_author(); ?></span>
                        <span class="publish-date"> on <?php the_date(); ?></span>
                    </div>
                </header>

                <div class="entry-content">
                    <?php
                    the_content();
                    ?>
                </div>

            </article>

            <?php
      
            if ( comments_open() || get_comments_number() ) :
                comments_template();
            endif;

        endwhile; 
        ?>
    </main><!-- #main -->

    <?php get_sidebar(); ?>
</div><!-- .content-container -->

<?php
get_footer();
?>

PHP

single.php:

<?php
get_header();
?>

<div class="content-container">
    <main id="primary" class="site-main">
        <?php
        while (have_posts()) :
            the_post();
            get_template_part('template-parts/content', get_post_type()); ?>
            <h2><?php the_title(); ?></h2>
            <?php the_content(); ?>
            <?php
            $post_id = the_ID();
            $author_name = get_the_author_meta('display_name', get_post_field('post_author', $post_id));
            echo "Author Name: " . $author_name . "<br>";
            $publish_date = get_post_field('post_date', $post_id);
            echo 'This post was published on ' . $publish_date . "<br><br>";
        endwhile; // End of the loop.
        ?>
    </main><!-- #main -->

    <?php get_sidebar(); ?>
</div><!-- .content-container -->

<?php get_footer(); ?>

PHP

sidebar.php:

<aside id="secondary" class="widget-area">
    <h2 class="sidebar-title">Sidebar</h2>
    <?php if ( is_active_sidebar( 'sidebar-1' ) ) : ?>
        <?php dynamic_sidebar( 'sidebar-1' ); ?>
    <?php else : ?>
        <p>No widgets are active in the sidebar.</p>
    <?php endif; ?>
</aside>

PHP

search.php:

<?php
$search = $_GET['s'];
echo $search;

PHP

style.css:

body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f5f5f5;
}

.site-header {
    background-color: #2c3e50;
    padding: 20px 0;
    color: #fff;
}

.site-header .container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.main-navigation {
    flex-grow: 1;
    margin-right: 20px;
}

.menu-container {
    display: inline-block;
    margin-right: 30px;
}

.menu-title {
    display: none;
}

.menu-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
}

.menu-item {
    margin-right: 15px;
}

.menu-link {
    color: #fff;
    text-decoration: none;
    padding: 10px 20px;
    font-size: 16px;
    transition: background-color 0.3s ease, color 0.3s ease;
    border-radius: 5px;
}

.menu-link:hover {
    background-color: #34495e;
    color: #fff;
    border-radius: 5px;
}

.header-search {
    position: relative;
}

.header-search input[type="text"] {
    padding: 8px 12px;
    border: none;
    border-radius: 20px;
    width: 200px;
    font-size: 14px;
    outline: none;
    background-color: #ecf0f1;
    color: #333;
    transition: width 0.3s ease;
}

.header-search input[type="text"]:focus {
    width: 250px;
}

.header-search button {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    background-color: #2980b9;
    border: none;
    color: white;
    padding: 8px 10px;
    border-radius: 50%;
    cursor: pointer;
}

.header-search button:hover {
    background-color: #1abc9c;
}

@media (max-width: 768px) {
    .menu-list {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .menu-item {
        margin-bottom: 10px;
    }

    .header-search input[type="text"] {
        width: 180px;
    }
}

.content-container {
    display: flex;
    flex-direction: row;
    max-width: 1200px; 
    margin: 0 auto; 
}

.main-content {
    flex: 1; 
    padding: 20px;
    background-color: #fff; 
}

.post-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    background-color: #f9f9f9;
}

.post {
    border: 1px solid #ddd;
    border-radius: 8px;
    margin-bottom: 20px;
    padding: 15px;
    background-color: #fff;
    transition: box-shadow 0.3s ease;
}

.post:hover {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.post-title {
    font-size: 24px;
    color: #333;
}

.post-title a {
    text-decoration: none;
    color: inherit;
}

.post-title a:hover {
    color: #0073aa;
}

.post-content {
    font-size: 16px;
    color: #555;
    margin: 10px 0;
}

.post-meta {
    font-size: 14px;
    color: #888;
}

#secondary {
    background-color: #f4f4f4;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    margin-left: 20px; 
    max-width: 300px;
    flex: 0 0 auto; 
    position: sticky; 
    top: 20px; 
}

.sidebar-title {
    font-size: 22px;
    margin-bottom: 15px;
    color: #333;
}

.widget-area {
    margin: 0;
    padding: 0;
}

.widget {
    margin-bottom: 15px;
}

.widget-title {
    font-size: 18px;
    color: #0073aa;
    margin-bottom: 10px;
}

.widget p {
    color: #555;
    line-height: 1.5;
}

.widget a {
    color: #0073aa;
    text-decoration: none;
}

.widget a:hover {
    text-decoration: underline;
}

#colophon {
    background-color: #333;
    color: #ffffff;
    padding: 20px 0; 
    text-align: center; 
}

.site-info {
    max-width: 1200px; 
    margin: 0 auto; 
    padding: 0 20px; 
}

.site-info a {
    color: #ffffff; 
    text-decoration: none; 
    transition: color 0.3s; 
}

.site-info a:hover {
    color: #ffcc00; 
    text-decoration: underline; 
}

.sep {
    margin: 0 10px;
}

.error-404 {
    text-align: center;
    padding: 50px 20px; 
    background-color: #f9f9f9; 
}

.page-title {
    font-size: 2.5em; 
    color: #333; 
    margin-bottom: 20px;
}

.page-content {
    font-size: 1.2em;
    color: #666; 
    margin: 0 auto; 
    max-width: 600px; 
}

.page-content a {
    color: #0073aa; 
    text-decoration: none; 
}

.page-content a:hover {
    color: #ffcc00;
    text-decoration: underline; 
}

ul {
    list-style: none; 
    padding: 0; 
}

li {
    margin: 10px 0; 
}

.entry-header {
    text-align: center; 
    margin-bottom: 30px; 
}

.entry-title {
    font-size: 2.5em; 
    margin: 0; 
    color: #333; 
}

.entry-meta {
    font-size: 1em;
    color: #666; 
    margin-bottom: 20px; 
}

.entry-content {
    font-size: 1.2em; 
    line-height: 1.6;
    color: #444; 
    margin-bottom: 30px; 
}

.entry-footer {
    text-align: center; 
    margin-top: 20px; 
}

.post-navigation {
    font-size: 1em; 
}

.post-navigation a {
    color: #0073aa; 
    text-decoration: none; 
    margin: 0 15px; 
}

.post-navigation a:hover {
    color: #ffcc00; 
    text-decoration: underline; 
}

CSS

Output:

>> How To Resize Image in PHP?

Conclusion for How to Create a WordPress Theme

Creating a WordPress theme involves mastering essential web technologies like HTML, CSS, JavaScript, and PHP to build a custom design that suits your website’s needs. By starting with core files such as index.php and style.css and gradually incorporating advanced features through additional files like functions.php, you can develop a unique and functional theme. With the right skills and approach, you’ll have a fully personalized WordPress theme that reflects your vision and enhances the user experience.

Happy Coding!!!