WordPress Theme Development Guide: Building Custom Websites from Scratch

I want to build my own thing from scratch.WordPressWhen it comes to websites, the first thing to understand is their core: the theme. The theme determines the website’s appearance, layout, functionality, and user experience. Unlike using pre-made themes, developing a theme from scratch gives you complete control, better performance, and the ability to create a unique brand identity. Whether you are a front-end developer who wants to gain a deeper understanding of the process…PHPDynamic rendering, or…PHPBackend developers who wish to improve their front-end skills will find that mastering theme development will open a whole new world of possibilities for them.

Preparatory work: Setting up a local development environment

Before writing the first line of code, a professional local development environment can greatly improve efficiency and the development experience. It eliminates the risks associated with making direct changes on an online server.

Configuring the local development environment

First of all, we need to simulate a network server environment on our local computer. It is recommended to use software packages such as… Local(ByWP EngineProduced by:XAMPP Or MAMPThese tools can be installed with just one click.Apache、MySQLandPHP. ByLocalFor example, it integrates…WordPressOne-click installation.SSLThe certificate and email capture features are extremely user-friendly for developers.

Recommended Reading Learning WordPress Theme Development from Scratch: A Complete Guide to Building Custom Website Themes。

After the installation is complete, create a new one.WordPressSite. Please make sure your…PHPThe version must be 7.4 or higher. Also, remember the database name, username, and password, as they will be needed for subsequent configurations.

UltaHost WordPress Hosting

30-day refund guarantee, unlimited bandwidth and database usage, free DDoS protection; purchase for 3 years and get a discount of 50%.

access page

Code Editing and Version Control

A workman must first sharpen his tools if he is to do his work well. It is recommended to use a powerful code editor, such as… Visual Studio Code、PhpStorm Or Sublime TextThey offer syntax highlighting, code suggestions, auto-completion, and a robust plugin ecosystem.

At the same time, start using a version control system immediately – this is the preferred option.GitBy initializing something in the root directory of the project…GitRepository, and use it..gitignoreThe file system excludes unnecessary files (such as uploaded media and caches), allowing you to manage code changes securely, making it easier to track changes and collaborate with others. Host the repository on…GitHub、GitLabOrBitbucketIt is an industry-standard practice.

Understand the file structure of the topic and the core templates.

A standard oneWordPressA “theme” is a folder that contains specific files. Understanding the purpose of each file is the foundation for building a successful theme.

Required theme files

According toWordPressAccording to the official requirements, the most basic theme only needs two files:style.css and index.phpAmong them,style.cssIt's not just a style sheet; it's also the “identity card” of a theme, as the comments at the beginning of the file contain the meta-information about the theme.

Recommended Reading A comprehensive guide to website construction: a professional process from scratch to going live, with an analysis of core technologies。

/*
Theme Name: 我的第一个主题
Theme URI: https://example.com/my-first-theme
Author: 你的名字
Author URI: https://example.com
Description: 这是一个用于学习的自定义WordPress主题。
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: my-first-theme
*/

index.phpIt serves as a backup template file, which will be used when other, more specific template files are not available. Of course, a mature theme consists of much more than just these two files.

Common template files and their hierarchy

WordPressAdopt a template hierarchy system to determine which template to use for different types of content.PHPTemplate files: This is a core concept in theme development.

A typical template invocation process is as follows:
1. Accessing a single article: Prefer to use this method.single-post.phpIf not available, use the default option.single.phpAnd finally,singular.php。
2. Access the page: Use it preferentially.page-{slug}.phpOrpage-{id}.phpIf not available, use the default option.page.phpAnd finally,singular.php。
3. Access the article archive page: Prefer to use it.archive-{post-type}.phpIf not available, use the default option.archive.phpAnd finally,index.php。

hosting.com Shared Hosting

High performance with AMD EPYC CPUs, NVMe SSD storage and LiteSpeed, 24/7, 24x7 expert in-house support, advanced security measures including SSL, brute force, malware and DDoS protection, savings of up to 73%

access page

Other key templates include:header.php(Header)footer.php(Footer)sidebar.php(Sidebar)functions.php(Functional function files) as well asfront-page.php(Static Home Page): Understand how these files work and how they are used to create the static homepage.get_header()， get_footer()Functions such as these, when assembled together, are crucial for building web pages.

Building a theme skeleton from scratch

Now, let’s get to work and create something called…“MyFirstTheme”The theme framework of “…”; true knowledge is gained through practice.

Create a basic template file.

In yourWordPressThe installation directory is…wp-content/themes/Below, create a new one named…my-first-themeCreate a folder. Then create the following files:

Recommended Reading The complete process of modern website construction: the core technologies and practices from architecture design to deployment and operation and maintenance。

1. style.cssWrite the header information mentioned above.
2. index.phpThis is the most basic template.

Inindex.phpIn this process, let’s first build the simplest version of it.HTML5The structure, and the header and footer were manually added.

InterServer Shared Hosting

Shared hosting $2.50 USD per month , first month $0.1 USD promo code tryinterserver, 461 cloud apps scripts, one click install.

access page

<!DOCTYPE html>
<html no numeric noise key 1005>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
</head>
<body no numeric noise key 1002>
    <header>
        <h1>My custom theme</h1>
    </header>
    <main>
        &lt;?php
        if ( have_posts() ) :
            while ( have_posts() ) : the_post();
                the_title( &#039;<h2>', '</h2>' );
                the_content();
            endwhile;
        else :
            _e( '抱歉，没有找到您要的内容。', 'my-first-theme' );
        endif;
        ?&gt;
    </main>
    <footer>
        <p>© My Website</p>
    </footer>
    
</body>
</html>

take note ofwp_head()andwp_footer()These two hooks allow plugins and themes to insert code in the designated locations, and they must be invoked accordingly.

Split the template into modular components.

The code mentioned above contains all the functionality in a single file, which will soon become difficult to maintain. Next, we will proceed with modularization and split the code into separate modules.

Createheader.php将To openMove all the code that comes before the tag into:

<!DOCTYPE html>
<html no numeric noise key 1004>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
</head>
<body no numeric noise key 1001>
<header>
    <h1><a href="/en/</?php echo esc_url( home_url( '/' ) ); ?>">My custom theme</a></h1>
</header>
<main>

Createfooter.phpIt will be closed.Move all the code that follows the tag into:

</main>
<footer>
    <p>©  我的网站</p>
</footer>

</body>
</html>

Then, streamline it.index.phpFile:

<?php
if ( have_posts() ) :
    while ( have_posts() ) : the_post();
        the_title( &#039;<h2>', '</h2>' );
        the_content();
    endwhile;
else :
    _e( '抱歉，没有找到您要的内容。', 'my-first-theme' );
endif;
?&gt;

Now, the structure of your topic has become clear and easy to manage. You can…WordPressYou can find it in the “Appearance” -> “Themes” section in the backend, and then enable it.

Integrate core functions with custom options.

Once a basic theme skeleton is completed, it needs to be brought to life, that is, by adding content and functionality to it.functions.phpFile addition features and capabilities.

Support for registering themes using functions.php

functions.phpThe file is related to your topic “backend” and is used to define functions, register features, add filters, and more. It is not a template file, but it is automatically included every time the page is loaded.

Within that, we can use… add_theme_support() The function is used to declare the features supported by a particular theme. For example, it can enable the use of featured images for articles, custom logos, and support for custom article formats.

<?php
function my_first_theme_setup() {
    // 让WordPress管理文档标题
    add_theme_support( 'title-tag' );
    // 启用文章和评论的RSS feed链接
    add_theme_support( 'automatic-feed-links' );
    // 启用文章特色图像
    add_theme_support( 'post-thumbnails' );
    // 启用自定义Logo
    add_theme_support( 'custom-logo', array(
        'height'      => 100,
        'width'       => 400,
        'flex-height' => true,
        'flex-width'  => true,
    ) );
    // 启用HTML5标记支持
    add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );

The correct way to introduce style sheets and scripts is…

Never use hardcoded values in template files. Or Use tags to introduce static resources. The correct way to do this is by… wp_enqueue_style() and wp_enqueue_script() Functions. This ensures dependency management, version control, and prevents duplicate loading.

Infunctions.phpAdd the following to:

function my_first_theme_scripts() {
    // 引入主题的主样式表
    wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri(), array(), wp_get_theme()->get( 'Version' ) );
    // 引入一个自定义的JavaScript文件
    wp_enqueue_script( 'my-first-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), wp_get_theme()->get( 'Version' ), true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

Add a navigation menu

The navigation menu is the backbone of a website. First of all, use it… register_nav_menus() Function registration section location:

function my_first_theme_menus() {
    register_nav_menus(
        array(
            'primary' => __( '主导航菜单', 'my-first-theme' ),
            'footer'  => __( '页脚菜单', 'my-first-theme' ),
        )
    );
}
add_action( 'init', 'my_first_theme_menus' );

Then, inheader.phpTheWithin the region, you can access this menu by:

<?php
wp_nav_menu(
    array(
        'theme_location' => 'primary',
        'menu_id'        => 'primary-menu',
        'container'      => 'nav',
        'container_class'=> 'primary-navigation',
    )
);
?>

By following the steps above, you have created a theme with a basic structure, functional support, and modular code. Although it may seem simple, it already includes all the necessary components.WordPressAll the core concepts of theme development.

summarize

From setting up a local environment to writing the first template file, and then proceeding further…functions.phpIn integrating the core functions, we have gone through a series of steps…WordPressThe entire process of creating a topic from scratch. The key lies in understanding the template hierarchy system, which maps different content requests to their corresponding targets.PHPTemplate files. Additionally, modular thinking (the concept of dividing systems into separate, reusable components) is also important.header.php， footer.phpWaiting for the necessary approvals, as well as following standardized development practices (correctly registering scripts and using hook functions), are the foundations for building maintainable and robust themes. Starting from this, you can further explore customizing article queries, creating widget areas, and integrating additional features.Customizer APIAs well as advanced topics such as developing custom templates, you can build a more powerful and professional website.

FAQ Frequently Asked Questions

How to add a sidebar to a theme?

InWordPressIn this context, the sidebar is referred to as the “Widget Area.” First of all,functions.phpUse it in Chinese register_sidebar() The function registers one or more widget areas.

function my_first_theme_widgets_init() {
    register_sidebar( array(
        'name'          => __( '主侧边栏', 'my-first-theme' ),
        'id'            => 'sidebar-1',
        'description'   => __( '在此添加小部件以显示在主侧边栏。', 'my-first-theme' ),
        'before_widget' =&gt; '<section id="%1$s" class="widget %2$s">',
        'after_widget'  =&gt; '</section>',
        'before_title'  =&gt; '<h3 class="widget-title">',
        'after_title'   =&gt; '</h3>',
    ) );
}
add_action( 'widgets_init', 'my_first_theme_widgets_init' );

Then, in the template file where you wish to display the sidebar (for example,...single.phpOrpage.phpIn the code, a call is made to... dynamic_sidebar() Use a function to output it.

What is a subtopic, and why should it be used?

A sub-topic is a topic that inherits all the features and styles of another topic (referred to as the parent topic). Its core file is…style.cssAmong these, it must be passed through…Template:The header fields declare their parent topic.

The greatest benefits of using sub-templates are security and sustainability. When the parent template is updated, any custom modifications you have made to the sub-template (such as style overrides, feature enhancements, or template adjustments) will not be overwritten. This is the standard and recommended approach for personalizing existing templates.

What can happen if there is an error in the functions.php file?

functions.phpSyntax errors or fatal errors in the file can cause the entire website to display a “blank screen” (i.e., a blank page with no content). This is because the file in question is not functioning correctly, preventing the website from loading properly.WordPressDuring the core loading process, if any errors occur, the initialization process may be interrupted.

In this situation, you need to proceed by…FTPOr the host file manager will encounter an error.functions.phpFile renaming (for example, changing its name to...)functions.php.bakIn this way, the website will temporarily ignore the file and restore access, allowing you to fix the issue.

How to create a custom page template?

Custom page templates allow you to give specific pages a unique layout. To start, create a new file in your theme directory.PHPAdd a comment in a specific format at the top of the file to declare that this is a page template.

For example, create one namedpage-fullwidth.phpThe file:

<?php
/**
 * Template Name: 全宽页面
 * Description: 一个没有侧边栏的全宽度页面模板。
 */
get_header(); ?>
<!-- 你的全宽页面内容结构 -->
<?php get_footer(); ?>

After saving the settings, when you create or edit a page, you can select the “Full Width Page” template from the “Page Properties” -> “Template” dropdown menu.