Before you start writing code, you need a local development environment. This typically includes a local server (such as XAMPP, MAMP, or Local) and a code editor (such as VS Code or PhpStorm). Make sure that PHP (version 7.4 or higher is recommended) and MySQL are installed in your environment.
A standard WordPress theme is a folder that contains a specific set of files. First, you need to…wp-content/themesCreate a new folder under the directory, for example, name it "New Folder".my-first-theme。
Next, create two of the most basic and essential files:style.cssandindex.phpAmong them,style.cssIt’s not just a style sheet; it’s also the “identity card” of a theme. The comment block at the top of the file is used to inform WordPress about the theme you are using.
Recommended Reading WordPress Theme Development Beginner's Guide: Creating a Customized Website from Scratch。
Instyle.cssIn the file, you need to add the following header information in the specified format:
/*
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
*/This information will be displayed on the “Appearance” -> “Themes” page in the WordPress administration panel.index.phpThe file serves as the default template for the theme. Even if it is currently empty, it must exist for WordPress to recognize that this is a valid theme.
Build the basic template files.
Once you have the basic files in place, your theme still won’t be able to display any content. WordPress uses a templating hierarchy system to determine which template file to load for different types of pages. Next, we will create several core template files.
Create header and footer templates.
To achieve code reuse and consistency, we usually separate the header and footer of a web page into separate files. Let's start by creating…header.phpThe file contains the header of the HTML document.<body>Tags, as well as the public areas at the top of the website (such as the Logo and navigation menu).
The simplest oneheader.phpThe examples may include the following content:
Recommended Reading Creating Professional Websites: A Comprehensive Guide to WordPress Theme Development and Customization。
<!DOCTYPE html>
<html no numeric noise key 1006>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body no numeric noise key 1003>
<header>
<h1><a href="/en/</?php echo esc_url( home_url( '/' ) ); ?>"></a></h1>
<p></p>
</header>Please pay attention to the following…wp_head()Functions must be called in order to allow the WordPress core, plugins, and themes themselves to insert the necessary code (such as CSS and JS) at the top of the page.
Next, createfooter.phpThe file is used to close something.<body>and<html>The tag also includes footer content.
<footer>
<p>© . All rights reserved.</p>
</footer>
</body>
</html>Similarly,wp_footer()Functions are also necessary.
Now, we can update it.index.phpUseget_header()andget_footer()Use a function to introduce these two parts:
<?php get_header(); ?>
<main>
<?php
if ( have_posts() ) :
while ( have_posts() ) : the_post();
// 文章内容将在这里显示
endwhile;
else :
// 没有找到文章时的内容
endif;
?>
</main>
<?php get_footer(); ?>Create an article loop and content template.
As mentioned aboveindex.phpIn this section, we see the core of WordPress: The Loop. It is used to iterate through all the articles on the current page (or a single article). To make the content of the articles more structured, we usually extract the logic for displaying a single article into a separate file.
Createcontent.phpOrtemplate-parts/content.phpThe file is then processed within a loop.get_template_part()The function calls it.
Recommended Reading WordPress Theme Development Complete Guide: An Step-by-Step Tutorial from Beginner to Expert。
// 在 index.php 的循环中
while ( have_posts() ) : the_post();
get_template_part( 'template-parts/content', get_post_format() );
endwhile;Then create it.template-parts/content.php：
<article id="post-<?php the_ID(); ?>" no numeric noise key 1005>
<h2><a href="/en/</?php the_permalink(); ?>"></a></h2>
<div class="entry-meta">
by
</div>
<div class="entry-content">
</div>
</article>In this way, the article title, abstract, metadata, and other elements are output in a standardized format.
Introducing styles and scripts
A modern theme cannot be implemented without CSS and JavaScript. WordPress provides standard functions for securely enqueuing style sheets and script files, rather than using them directly within the templates.<link>Or<script>Tags.
Registration and Queueing Main Style Sheets
Although we already have...style.cssBut usually, we achieve this by…functions.phpThe file needs to be loaded for use. First, create it in the root directory of the theme.functions.phpThe document.
Then, usewp_enqueue_style()We need a function to load the style sheet.functions.phpCreate a function within it, and then hook it to…wp_enqueue_scriptsOn this action.
function my_first_theme_scripts() {
// 加载主样式表
wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri(), array(), '1.0' );
// 加载Google Fonts示例
wp_enqueue_style( 'my-first-theme-google-fonts', 'https://fonts.googleapis.com/css2?family=Roboto&display=swap', array(), null );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );get_stylesheet_uri()The function will automatically retrieve the theme information.style.cssFile path.
Add a responsive navigation menu script
In order to add interactive features, such as a responsive menu for mobile devices, we need to introduce JavaScript. Let's assume we have a simple script for toggling the display/hide of the menu.
First of all, create one…js/navigation.jsFile. Then,functions.phpWithin the same function, use it.wp_enqueue_script()Let’s load it.
function my_first_theme_scripts() {
// ... 之前的样式代码 ...
// 加载导航脚本
wp_enqueue_script( 'my-first-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '1.0', true );
}The last parametertrueThis indicates that the script should be placed at the bottom of the page.</body>(Placed before the tags), which usually helps improve the page loading performance.
Implement the core features of the theme.
functions.phpIt is the “brain” of the theme, responsible for adding various features and providing support. In addition to loading resources, we also need to declare the features that the theme supports here.
Add support for the topic feature.
WordPress offers a range of “theme features,” and you need to explicitly declare your support for them in order to use them. The most basic features include article thumbnails (featured images), custom menus, and support for HTML5 markup.
Infunctions.phpAdd the following code to:
function my_first_theme_setup() {
// 让主题支持文章和评论的RSS feed链接自动添加到head中
add_theme_support( 'automatic-feed-links' );
// 让文章和页面支持“特色图像”
add_theme_support( 'post-thumbnails' );
// 启用对HTML5标记的支持
add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );
// 启用标题标签支持，WordPress会自动管理文档标题
add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );after_setup_themeIt is an action hook that runs during theme initialization and represents the standard location for configuring theme functionality.
Register the navigation menu
Most websites require a navigation menu. WordPress’s menu system allows users to customize menu items in the “Appearance” -> “Menus” section in the backend. You first need to register menu locations for your theme.
Just now…my_first_theme_setupIn the function, continue to add the following:
function my_first_theme_setup() {
// ... 之前的 add_theme_support 代码 ...
// 注册一个主菜单位置
register_nav_menus( array(
'primary' => __( '主导航菜单', 'my-first-theme' ),
) );
}After you register, you will be able to work with template files (such as…)header.phpUsed in (…)wp_nav_menu()The function is now used to display this menu:
<nav>
<?php
wp_nav_menu( array(
'theme_location' => 'primary',
'menu_class' => 'primary-menu',
) );
?>
</nav>Create a sidebar and a gadget area.
Widgets are another powerful feature of WordPress. To use them, you first need to register a sidebar (the area where widgets can be displayed).
Infunctions.phpCreate a new function within it, and then hook it in (i.e., integrate it with the existing system or process).widgets_initAction-wise:
function my_first_theme_widgets_init() {
register_sidebar( array(
'name' => __( '主侧边栏', 'my-first-theme' ),
'id' => 'sidebar-1',
'description' => __( '在此添加小工具。', 'my-first-theme' ),
'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', 'my_first_theme_widgets_init' );After registration, you can access the “Main Sidebar” area in the “Appearance” -> “Widgets” section in the backend, and then drag widgets into it. To display it within your theme, you need to modify the template (for example,…)sidebar.php(3) Call the method in the middle of the code.dynamic_sidebar( 'sidebar-1' )Function.
summarize
Through this guide, we have completed a minimal yet fully functional WordPress theme development process. We started by setting up the environment and creating the basic files, gradually constructing the template hierarchy, separating the header and footer, and implementing the core article loop. Next, we learned how to add styles and scripts to the theme in a standard manner to ensure compatibility and performance. Finally,functions.phpIn this process, we activated the core features of the theme, such as the featured images, navigation menu, and gadget area, which greatly enhance the theme's customizability.
This is just a starting point. Based on this, you can go on to create more professional template files (such as…)single.php、page.php、archive.phpExplore more advanced WordPress APIs, such as those for custom post types, taxonomies, and the Customizer API, in order to create unique and feature-rich website themes.
FAQ Frequently Asked Questions
What technologies are essential for developing WordPress themes?
Developing a WordPress theme requires mastering several core technologies. The first of these is PHP, as WordPress itself is written in PHP, and all template files and functional logic rely on it. You need to understand basic PHP syntax, functions, loops, and conditional statements.
Next are HTML and CSS, which are used to build the structure and style of web pages. It is very important to understand the principles of responsive web design and modern CSS layout techniques such as Flexbox and Grid. Finally, having a basic understanding of JavaScript is essential for implementing interactive features on the front end. Familiarity with the PHP functions and hooks (Hooks) specific to WordPress is key to developing efficient themes.
Which file is more important, style.css or functions.php?
These two files play completely different yet equally crucial roles in the development of WordPress themes, and it’s not possible to simply determine which one is more important than the other.style.cssThe file serves as the “identity” of the theme, and the comment block at the beginning of the file is essential for WordPress to recognize the theme. Without it, the theme will not be visible in the “Themes” list in the backend.
However,functions.phpThe file serves as the “functional core” of the theme; nearly all the code that enhances the theme’s functionality is written within it. This includes implementing a registration menu, adding theme support, loading script styles, and defining custom functions, among other things. Without it, the theme would lose most of its dynamic features and scalability. The two elements complement each other and are indispensable.
Why is it necessary to use the wp_head() and wp_footer() functions?
wp_head()andwp_footer()It is a crucial hook for communication between the WordPress core, themes, and plugins.header.phpThe</head>Call before the tag.wp_head()It is the standard method that allows WordPress itself, the plugins you have installed, and other parts of your theme to insert necessary code into the page header (such as meta tags, style sheet links, script references, JSON-LD structured data, etc.).
Similarly,footer.phpThe</body>Call before the tag.wp_footer()These functions are used to insert scripts that need to be loaded at the bottom of the page (such as analytics code, delayed-loading JavaScript, or other HTML content). If these functions are omitted, it may result in the plugin not functioning properly, the management toolbar not being displayed, and various compatibility issues.
How can I make my theme comply with the official standards of WordPress?
To ensure that your theme meets WordPress’s official standards and maintains high quality, you need to follow the “WordPress Theme Development Manual” and the “Theme Review Guidelines.” This includes using safe coding practices and applying escape functions to all dynamically generated output data.esc_html(), esc_url()Use internationalization functions (such as…) for all translated strings.__(), _e()) and load the text field.
The theme should feature a responsive design to ensure it displays properly on all devices. The code should be clear, well-commented, and adhere to WordPress coding standards. Additionally, the theme should offer extensive customization options through the WordPress Customizer and correctly implement all core WordPress functions and hooks. It’s a good practice to use the Theme Check plugin for testing before releasing the theme.
What's next, what's next?
Extended reading and practical knowledge
The following are related to the topic of this article and are suitable for further in-depth reading. Prioritize starting with the article that is closest to your current problem, and gradually expanding to surrounding topics usually works better.
- WordPress Theme Development: From Beginner to Expert: A Comprehensive Guide to Building Personalized Websites
- The Ultimate Guide to Website Construction: A Comprehensive Process from Concept to Launch, along with an Analysis of Core Technologies
- WordPress Theme Development from Scratch: Creating a Unique Website Interface
- Why choose WordPress as the preferred platform for websites?
- WordPress Beginner's Guide: Build Your First Professional Website from Scratch
English