From Zero to One: A Comprehensive Guide to Developing Your First WordPress Plugin Step by Step

Preparing the WordPress Plugin Development Environment

Before you start writing code, it is crucial to set up a stable development environment that is isolated from your local system. This not only protects your main website but also allows you to freely experiment and debug your code.

An efficient environment typically consists of three core components. The first is a web server software, such as Apache or Nginx. The second is a PHP runtime environment, with a version that is compatible with the WordPress version you plan to deploy. The third is a MySQL or MariaDB database. Although it is possible to install these software components manually one by one, we strongly recommend using a local server integration environment.

There are many excellent integrated development environment (IDE) tools available on the market, such as Local by Flywheel, XAMPP, MAMP, or DevKinsta. These tools package all the necessary components together and offer one-click installation and startup capabilities. They typically also include developer-friendly features like email capture, site cloning, and one-click SSL configuration, which can significantly improve your development efficiency.

Recommended Reading The Ultimate Guide to WordPress Plugin Development: Creating Your First Custom Plugin from Scratch。

In addition to the server environment, you will also need a code editor. You can choose a feature-rich integrated development environment (such as PhpStorm) or a lightweight but extensible editor (such as Visual Studio Code). For plugin development, it is recommended that the editor has at least PHP code completion, syntax highlighting, and file management capabilities. Installing some specific plugins in the text editor (such as those related to WordPress or PHP Intelephense) will make the coding process much smoother.

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

Understanding the structure of the plugin’s core files

WordPress plugins are essentially collections of one or more PHP files that follow a specific structure and conventions, allowing the WordPress core system to recognize and load them.

Every plugin starts with a main file. This main file serves as the “entry point” for the plugin and must contain a specific header comment. The header is a multi-line comment block that contains metadata about the plugin, such as the plugin’s name, description, version, author, and more. WordPress uses this information to display the plugin in its administration interface. The name of the main file can be customized, but it is usually… plugin-name.php In this format.

The following is a basic example of the header section in the main plugin file:

<?php
/**
 * Plugin Name: 我的第一个自定义插件
 * Plugin URI:  https://example.com/my-first-plugin
 * Description: 这是我从零开始开发的第一个WordPress插件，用于演示和学习。
 * Version:     1.0.0
 * Author:      你的名字
 * Author URI:  https://example.com
 * License:     GPL v2 or later
 * Text Domain: my-first-plugin
 */

Once the main file is ready, you need to place it in the correct location. The core file of the plugin must be located in… /wp-content/plugins/ Inside a separate folder within the directory. The folder should have a short, unique name that consists of only lowercase letters and hyphens. For example, our plugin can be placed in a folder named `my-plugin`. /wp-content/plugins/my-first-plugin/ Within the path, the main file… my-first-plugin.php Just place it in the root directory of this folder.

Recommended Reading Analyzing WordPress Plugin Development: A Complete Guide to Building Custom Functional Modules from Scratch。

Write your first function.

Now, let’s add the first interactive feature to our plugin. WordPress allows plugins to modify or add functionality at specific points in the process by using a mechanism called “Hooks.” There are mainly two types of Hooks: Action Hooks and Filter Hooks.

Action hooks allow you to execute your own code at specific points in WordPress’s workflow, such as when an article is published or a page is loaded. A common example is adding custom information to the bottom of a webpage. We can use action hooks to achieve this. wp_footer This action hook is used to implement the functionality.

We need to create a custom function and tell WordPress to use it… wp_footer Execute it when triggered. This process is called “mounting” a function or method to a hook. Here is an example of implementation:

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

// 在主文件中添加以下代码
function my_first_plugin_display_footer_text() {
    echo ‘<p style="text-align: center; color: #666;">Presented to you by my first plugin.</p>’;
}
add_action( ‘wp_footer’， ‘my_first_plugin_display_footer_text’ );

add_action() This is the core function for the mounting process. After completing the above steps, clear your site’s cache and refresh the front-end page. You should then be able to see the footer text added by the plugin.

Next, let’s explore filter hooks. Filter hooks allow you to modify the data that is passed to them. For example, if we want to change the content of an article’s title, we can use them for that purpose. the_title Filters. The following code demonstrates how to add a prefix to the titles of all articles:

function my_first_plugin_prefix_title( $title ) {
    // 检查是否在主循环中且不是管理后台，避免影响后台标题显示
    if ( ! is_admin() && in_the_loop() ) {
        $title = ‘[插件前缀] ’ . $title;
    }
    return $title;
}
add_filter( ‘the_title’， ‘my_first_plugin_prefix_title’ );

Improve the plugin: Add a management menu and settings page.

A fully functional plugin usually requires interaction with the administrator, which means adding custom menu items and settings pages. This allows users to configure the plugin without having to touch the code.

Recommended Reading Starting from scratch: A complete guide and practical tutorial for WordPress plugin development。

To add a new top-level menu item to the management menu on the left side of the WordPress backend, you need to use the WordPress administration panel. Specifically, you should navigate to the “Menus” section, where you can create, edit, and delete menu structures. add_menu_page() Function. This function requires several parameters to define the menu's title, permissions, unique identifier, and callback function, among other things. You need to use these parameters at the appropriate time (usually…). admin_menu (The action hook) calls it.

Below is an example of creating a simple top-level menu and its settings page:

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

function my_first_plugin_add_admin_menu() {
    add_menu_page(
        ‘我的第一个插件设置’， // 页面标题
        ‘我的插件’，           // 菜单标题
        ‘manage_options’，     // 所需权限（管理员）
        ‘my-first-plugin-settings’， // 菜单slug
        ‘my_first_plugin_render_settings_page’， // 渲染页面的回调函数
        ‘dashicons-admin-plugins’， // 图标（Dashicons）
        100                     // 菜单位置
    );
}
add_action( ‘admin_menu’， ‘my_first_plugin_add_admin_menu’ );

接下来，你需要定义回调函数 my_first_plugin_render_settings_page() Generate the HTML content for this settings page. In this function, you can display the form and handle its submission (in a non-Ajax manner).

To securely store and retrieve plugin settings, you should use WordPress’s Options API. You can use it to… add_option()、get_option()、update_option() and delete_option() Use functions such as… to operate on something named… my_first_plugin_options The option data for the “…” field. In the form, you should use the built-in functionality provided by WordPress. settings_fields() and do_settings_sections() There are functions available to securely output the set fields, but these are usually used in conjunction with a more formal “settings API.” For simple setup pages, it is also common practice to manually handle form submissions, as well as validate and clean the data.

summarize

Developing your first WordPress plugin is a systematic learning process. You started by setting up a secure local development environment, and you understood the most basic file structures and naming conventions for plugins. Next, you mastered the core aspect of plugin extensibility: the hook mechanism. You successfully used action hooks to display content and filter hooks to modify data. Finally, to make the plugin easier to manage, you learned how to create a backend administration menu and settings pages, as well as how to interact with WordPress’s Options API to achieve persistent data storage.

By following these steps, you have not only successfully created a functional plugin but, more importantly, built a scalable foundational framework. You can build upon this framework by exploring additional hooks, delving deeper into JavaScript (including Ajax), creating custom database tables, or developing concise code, to continuously add more complex and powerful features to your plugin.

FAQ Frequently Asked Questions

Can I develop a WordPress plugin without any programming experience?
Although having basic knowledge of PHP, HTML, and a bit of CSS will make things easier for you, it’s completely possible to start from scratch. The key is to proceed step by step: begin by modifying and imitating the code of simple existing plugins, gradually understanding the core functions and hooks provided by WordPress. At the same time, make use of the extensive official documentation and engage in practical exercises.

Why can't my plugin be activated in the background?

There are several common reasons why a plugin activation fails. The most frequent issue is that the format of the file header information in the main plugin file is incorrect, or essential fields (such as the Plugin Name) are missing. Another possible cause is a syntax error in the PHP code; you can identify this by checking the error logs of your web server. It’s also possible that the name of the plugin folder or the main plugin file conflicts with that of other installed plugins, or that the plugin requires a higher version of PHP than is currently available on your server.

How to split the advanced settings of a plugin into multiple tabs?

You can achieve this by making multiple calls. add_menu_page() Creating a separate top-level menu would be a good option, but this might make the backend code look more complicated and messy. A better approach would be to use… add_submenu_page() The function adds an additional settings page as a sub-menu item to your main menu. When creating the sub-menu, set the first parameter (the slug of the parent menu) to the slug of your top-level menu, and use the subsequent parameters to define the title and functionality of the sub-menu.

How to securely release a plugin after its development is complete?

Before releasing a WordPress plugin to the official repository, it is of utmost importance to ensure the security of the code. You must strictly validate and escape all user inputs. It is recommended to use the functions provided by WordPress for this purpose. sanitize_text_field()、wp_kses() and esc_html()At the same time, all database operations that are called directly should use… $wpdb The class provides methods to prevent SQL injection. Before release, the plug-in should also be internationalized, and translation files should be prepared for all strings visible to users.