{"id":12378256,"date":"2026-03-19T19:16:40","date_gmt":"2026-03-19T11:16:40","guid":{"rendered":"https:\/\/www.likacloud.com\/knowledge\/%e4%bb%8e%e9%9b%b6%e5%bc%80%e5%a7%8b%ef%bc%9a%e5%be%aa%e5%ba%8f%e6%b8%90%e8%bf%9b%e5%ad%a6%e4%b9%a0-wordpress-%e4%b8%bb%e9%a2%98%e5%bc%80%e5%8f%91%e7%9a%84%e5%ae%8c%e6%95%b4%e6%95%99%e7%a8%8b\/"},"modified":"2026-06-03T20:45:19","modified_gmt":"2026-06-03T12:45:19","slug":"wordpress-theme-development-tutorial-from-scratch-12378256","status":"publish","type":"knowledge_post","link":"https:\/\/www.likacloud.com\/en\/knowledge\/wordpress\/wordpress-theme-development-tutorial-from-scratch-12378256\/","title":{"rendered":"Starting from scratch: A comprehensive tutorial on learning WordPress theme development step by step"},"content":{"rendered":"

WordPress themes are the core of a website\u2019s appearance and functionality. They consist of a series of template files, style sheets, scripts, and images that work together to present the content from the database (such as articles and pages) to visitors in a specific layout and design. While plugins are designed to add additional features, themes primarily control the visual appearance of a website; however, modern themes often incorporate some basic functionalities as well. Learning theme development allows you to have complete control over the website\u2019s design logic, performance optimization, and code structure, which is essential for creating unique, efficient, and secure websites.<\/p>\n\n\n\n

Build the development environment<\/h2>\n\n\n\n

Before writing the first line of code, a professional local development environment is essential. It allows you to test and debug freely without affecting the online website.<\/p>\n\n\n\n

Local server configuration<\/h3>\n\n\n\n

We recommend using integrated local server software packages such as Local by Flywheel, XAMPP, or MAMP. These tools enable one-click installation of Apache\/Nginx, PHP, and MySQL. Taking Local as an example, after installation, you can quickly set up a new WordPress site with the database and PHP settings automatically configured. Make sure that your PHP version (version 7.4 or higher is recommended) and MySQL version meet the latest requirements of WordPress.<\/p>\n

Recommended Reading WordPress Theme Development and Customization Guide: From Beginner to Expert \u2013 Creating Your Own Website<\/a>\u3002<\/p>\n\n\n\n\n

Code editors and tools<\/h3>\n\n\n\n

Choosing a powerful code editor is key to improving efficiency. Visual Studio Code is a very popular option nowadays, as it offers a wealth of extensions, such as WordPress code snippets, PHP Intelephense (for intelligent code suggestions), and real-time preview features. In addition, you will also need a browser developer tool (like Chrome DevTools) for real-time debugging of HTML, CSS, and JavaScript. Version control software like Git should be used from the very beginning, and you can manage your code versions using platforms like GitHub, GitLab, or Bitbucket.<\/p>\n\n\r\n

\r\n \r\n
\r\n \r\n UltaHost WordPress Hosting <\/strong>\r\n
30-day refund guarantee, unlimited bandwidth and database usage, free DDoS protection; purchase for 3 years and get a discount of 50%.<\/div>\r\n <\/div>\r\n\r\n
\r\n \r\n \"UltaHost\r\n \r\n <\/a>\r\n \r\n \r\n access page <\/a>\r\n <\/div>\r\n<\/div>\n\n\n\n\n\n\n

WordPress Theme Basic Structure and Files<\/h2>\n\n\n\n

The most basic WordPress theme requires only two files, but a fully functional theme consists of a series of standardized files, each with its own specific role.<\/p>\n\n\n\n

Core Style Sheets and Function Files<\/h3>\n\n\n\n

The \u201cID card\u201d of a topic is\u2026 style.css<\/code> The file\u2019s header comment section not only provides styling details but also contains metadata about the theme, such as the theme name, author, description, and version number. WordPress uses this information to identify and manage themes in the background.<\/p>\n\n\n\n

\/*\nTheme Name: My First Theme\nTheme URI: https:\/\/example.com\/my-first-theme\nAuthor: Your Name\nAuthor URI: https:\/\/example.com\nDescription: A simple, clean WordPress theme for learning.\nVersion: 1.0.0\nLicense: GPL v2 or later\nText Domain: my-first-theme\n*\/<\/code><\/pre>\n\n\n\n
Another core file is functions.php<\/code>It is not a plugin, but rather a file that extends the functionality of a theme. Here, you can add features that the theme supports, register menus and sidebars, load style sheets and scripts, define custom functions, and more. It is the \u201cbrain\u201d of the theme, acting as a bridge between the template files and the core functionality of WordPress.<\/p>\n\n\n\n
Core template file<\/h3>\n\n\n\n
Template files control the display of different parts of a website. The most basic template files include:
\n*   index.php<\/code>These are the default and fallback templates for a particular topic. WordPress will use them when no more specific templates are available.
\n*   header.php<\/code>:Contains the document <head><\/code> The HTML structure at the beginning of some sections and pages (such as the logo and navigation menu) should be used within the templates. get_header()<\/code> Function call.
\n*   footer.php<\/code>This includes the HTML structure at the bottom of the page (such as copyright information). Please use it. get_footer()<\/code> Function call.
\n*   sidebar.php<\/code>: Define the tool area for the sidebar. Use it. get_sidebar()<\/code> Function call.
\n*   page.php<\/code>: Used to display a single page.
\n*   single.php<\/code>: Used to display a single article.
\n*   archive.php<\/code>It is used to display archived pages of article categories, tags, authors, etc.<\/p>\n
Recommended Reading Why choose a custom WordPress theme?<\/a>\u3002<\/p>\n\n\n\n\n
By combining these files, WordPress\u2019s template hierarchy system automatically selects the most appropriate template for rendering different content types.<\/p>\n\n\n\n
Core feature development for the theme<\/h2>\n\n\n\n
After mastering the basic files, the next step is to bring the theme to life by adding dynamic content and functionality.<\/p>\n\n\n\n
Add menu functionality and the ability to dynamically load content.<\/h3>\n\n\n\n
In functions.php<\/code> In Chinese, we use register_nav_menus()<\/code> Functions are used to register menu locations, such as \u201cMain Navigation\u201d and \u201cFooter Navigation\u201d.<\/p>\n\n\r\n
\r\n     \r\n  
\r\n    \r\n      hosting.com Shared Hosting    <\/strong>\r\n    
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%<\/div>\r\n  <\/div>\r\n\r\n  
\r\n          \r\n                  \"hosting.com\r\n          \r\n              <\/a>\r\n    \r\n    \r\n       access page    <\/a>\r\n  <\/div>\r\n<\/div>\n\n\n\n\n\n\n
function my_first_theme_setup() {\n    register_nav_menus( array(\n        'primary' => __( 'Primary Menu', 'my-first-theme' ),\n        'footer'  => __( 'Footer Menu', 'my-first-theme' ),\n    ) );\n}\nadd_action( 'after_setup_theme', 'my_first_theme_setup' );<\/code><\/pre>\n\n\n\n
After registration, you can assign menus in the backend by navigating to \u201cAppearance\u201d -> \u201cMenus\u201d. This can be done in the template files (such as\u2026). header.php<\/code>In this document, we use wp_nav_menu()<\/code> The function is used to display the menu.<\/p>\n\n\n\n
Calling dynamic content is at the core of theme development. WordPress uses template tags, which are PHP functions that are used to retrieve and display content from the database. For example, this can be done within the \u201cThe Loop\u201d (the loop that processes content on a page). the_title()<\/code> Display the article title.the_content()<\/code> Display the article content.the_permalink()<\/code> Get the article link.the_post_thumbnail()<\/code> Display featured images.<\/p>\n\n\n\n
Tool bar area and featured image support<\/h3>\n\n\n\n
The sidebar (Widget Area) allows users to add content modules to specific areas, such as the sidebar or footer, by simply dragging them there. functions.php<\/code> Use it in Chinese register_sidebar()<\/code> The function is registered.<\/p>\n
Recommended Reading WordPress Theme Development Complete Guide: Building High-Performance Custom Themes from Scratch<\/a>\u3002<\/p>\n\n\n\n\n
function my_first_theme_widgets_init() {\n    register_sidebar( array(\n        'name'          =&gt; __( 'Main Sidebar', 'my-first-theme' ),\n        'id'            =&gt; 'sidebar-1',\n        'description'   =&gt; __( 'Add widgets here.', 'my-first-theme' ),\n        'before_widget' =&gt; '<section id="%1$s" class="widget %2$s">',\n        'after_widget'  =&gt; '<\/section>',\n        'before_title'  =&gt; '<h2 class="widget-title">',\n        'after_title'   =&gt; '<\/h2>',\n    ) );\n}\nadd_action( 'widgets_init', 'my_first_theme_widgets_init' );<\/code><\/pre>\n\n\n\n
In sidebar.php<\/code> In Chinese, we use dynamic_sidebar( \u2018sidebar-1\u2019 )<\/code> To call it.<\/p>\n\n\n\n
In order to allow users to set cover images for articles, it is necessary to declare support for \u201cArticle Thumbnails\u201d within the theme settings. functions.php<\/code> The after_setup_theme<\/code> Add it to the hook function. add_theme_support( \u2018post-thumbnails\u2019 );<\/code>After that, you can use it in the template. the_post_thumbnail()<\/code> Output it.<\/p>\n\n\r\n
\r\n     \r\n  
\r\n    \r\n      InterServer Shared Hosting    <\/strong>\r\n    
Shared hosting $2.50 USD per month , first month $0.1 USD promo code tryinterserver, 461 cloud apps scripts, one click install.<\/div>\r\n  <\/div>\r\n\r\n  
\r\n          \r\n                  \"InterServer\r\n          \r\n              <\/a>\r\n    \r\n    \r\n       access page    <\/a>\r\n  <\/div>\r\n<\/div>\n\n\n\n\n\n\n
Advanced Theme Development Techniques<\/h2>\n\n\n\n
Once the basic functionality is perfected, the following techniques can significantly enhance the professionalism, maintainability, and user experience of the theme.<\/p>\n\n\n\n
Using subtopics for customization and updates<\/h3>\n\n\n\n
Never modify the files of third-party themes or parent themes directly, as updates will overwrite your changes. The correct approach is to create a sub-theme. A sub-theme should contain only one\u2026 style.css<\/code> and an optional one functions.php<\/code>In the sub-topic of style.css<\/code> For the header section, use the following approach: Template:<\/code> The field specifies the directory name of the parent theme. The styles and functions of the sub-theme will automatically inherit from and override those of the parent theme, allowing you to customize the sub-theme safely while still benefiting from any updates to the parent theme.<\/p>\n\n\n\n
Theme Customizer API and Script Style Management<\/h3>\n\n\n\n
The WordPress Customizer allows users to preview and modify theme settings in real time, such as colors and logos. Using the Customizer API, you can add these setting options to your theme. This involves utilizing the functionality provided by the Customizer framework. $wp_customize->add_setting()<\/code> and $wp_customize->add_control()<\/code> Using various methods, the settings are associated with the controls, and the values are securely transmitted to the front-end.<\/p>\n\n\n\n
It is essential to load CSS and JavaScript files correctly. Never write the code for these files directly within the template files. <link><\/code> Or <script><\/code> Tags should be placed in the appropriate locations. functions.php<\/code> Use it in Chinese wp_enqueue_style()<\/code> and wp_enqueue_script()<\/code> Function, and mount it to wp_enqueue_scripts<\/code> It\u2019s on this hook. This ensures proper dependency management, prevents duplicate loading, and complies with WordPress\u2019s best practices.<\/p>\n\n\n\n
function my_first_theme_scripts() {\n    \/\/ \u52a0\u8f7d\u4e3b\u9898\u4e3b\u6837\u5f0f\u8868\n    wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri() );\n    \/\/ \u52a0\u8f7d\u4e00\u4e2a\u81ea\u5b9a\u4e49 JavaScript \u6587\u4ef6\n    wp_enqueue_script( 'my-first-theme-navigation', get_template_directory_uri() . '\/js\/navigation.js', array(), '1.0.0', true );\n}\nadd_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );<\/code><\/pre>\n\n\n\n
summarize<\/h2>\n\n\n\n
WordPress theme development is a systematic process that begins with understanding the basic file structure and gradually progresses to mastering the handling of dynamic content, function registration, and the use of advanced APIs. The key lies in grasping the concept of template hierarchies.functions.php<\/code> The use of relevant techniques, as well as adherence to WordPress coding standards, is essential. By setting up a local development environment, creating basic templates, integrating core functionality, and eventually extending the theme using sub-templates and customizers, developers can create professional themes that are both visually appealing and highly functional, while also being easy to maintain. Always remember to manage styles and scripts in a structured manner, and prioritize the use of sub-templates to ensure the long-term sustainability of your project.<\/p>\n\n\n\n
FAQ Frequently Asked Questions<\/h2>\n\n\n\n
What prerequisite knowledge is needed to learn WordPress theme development?<\/h3>\n\n\n\n
You need to have a basic understanding of HTML and CSS to build the structure and styling of web pages. PHP is the core programming language of WordPress, so you must understand its basic syntax, functions, loops, and conditional statements. A preliminary knowledge of JavaScript would be helpful for adding interactive features, but it is not absolutely necessary.<\/p>\n\n\n\n
Why don\u2019t the changes I made to my theme appear in the WordPress backend?<\/h3>\n\n\n\n
First, make sure your theme has been correctly activated (Settings -> Themes). Next, please check\u2026 style.css<\/code> Whether the header comment information is complete and in the correct format is crucial for WordPress to recognize the theme. Finally, clear the browser cache as well as the cache from any WordPress cache plugins that may be in use.<\/p>\n\n\n\n
How to add a custom page template to my theme?<\/h3>\n\n\n\n
Create a new PHP file in your theme directory, for example\u2026 template-fullwidth.php<\/code>At the top of the file, add a specific template comment to define its name. After that, you can proceed with writing the file just as you would with any other regular file. page.php<\/code> Write the code for this template in the same way. When creating or editing a page, you can select this new template in the \u201cPage Properties\u201d module.<\/p>\n\n\n\n
<?php\n\/*\nTemplate Name: \u5168\u5bbd\u9875\u9762\n*\/\n?><\/code><\/pre>\n\n\n\n
What legal issues should be considered when developing commercial themes?<\/h3>\n\n\n\n
The most important thing is to ensure that your theme complies with the GNU GPL license issued by WordPress. This means that the PHP code portion of your theme must also be released under the same license. You are allowed to sell your theme under the GPL, but users have the right to freely modify and redistribute the PHP code. Additionally, any third-party resources used in your theme (such as images, fonts, or JS libraries that are not compatible with the GPL) must have appropriate commercial use licenses. It is recommended that you carefully read the theme review guidelines on WordPress.org and the relevant license terms before releasing your theme.<\/p>","protected":false},"excerpt":{"rendered":"
This article is a comprehensive tutorial for getting started with WordPress theme development. It begins with setting up a local development environment, provides an in-depth explanation of the core file structure of a theme (such as style.css, functions.php, and various template files), and covers how to add menus, retrieve dynamic content, and other essential features. The aim is to help readers systematically master the entire process of creating a custom WordPress theme from scratch.<\/p>","protected":false},"author":7,"featured_media":0,"template":"","meta":{"_acf_changed":false,"footnotes":""},"tags":[118,804,3267,2155,364],"knowledge_category":[280],"class_list":["post-12378256","knowledge_post","type-knowledge_post","status-publish","hentry","tag-wordpress","tag-theme-development","tag-study-guide","tag-tutorial","tag-website-building","knowledge_category-wordpress"],"acf":{"site_seo_keywords":"WordPress\u4e3b\u9898\u5f00\u53d1,\u4e3b\u9898\u5f00\u53d1\u6559\u7a0b,WordPress\u6559\u7a0b,\u672c\u5730\u5f00\u53d1\u73af\u5883,\u6a21\u677f\u6587\u4ef6,functions.php,\u4e3b\u9898\u7ed3\u6784,\u52a8\u6001\u5185\u5bb9\u8c03\u7528"},"_links":{"self":[{"href":"https:\/\/www.likacloud.com\/en\/wp-json\/wp\/v2\/knowledge_posts\/12378256","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.likacloud.com\/en\/wp-json\/wp\/v2\/knowledge_posts"}],"about":[{"href":"https:\/\/www.likacloud.com\/en\/wp-json\/wp\/v2\/types\/knowledge_post"}],"author":[{"embeddable":true,"href":"https:\/\/www.likacloud.com\/en\/wp-json\/wp\/v2\/users\/7"}],"version-history":[{"count":1,"href":"https:\/\/www.likacloud.com\/en\/wp-json\/wp\/v2\/knowledge_posts\/12378256\/revisions"}],"predecessor-version":[{"id":12404158,"href":"https:\/\/www.likacloud.com\/en\/wp-json\/wp\/v2\/knowledge_posts\/12378256\/revisions\/12404158"}],"wp:attachment":[{"href":"https:\/\/www.likacloud.com\/en\/wp-json\/wp\/v2\/media?parent=12378256"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.likacloud.com\/en\/wp-json\/wp\/v2\/tags?post=12378256"},{"taxonomy":"knowledge_category","embeddable":true,"href":"https:\/\/www.likacloud.com\/en\/wp-json\/wp\/v2\/knowledge_category?post=12378256"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}