Learn WordPress plugin development from scratch: Build custom features and extensions

WordPress Plugin Development Basics

WordPress plugins are collections of independent PHP scripts that extend the core functionality of WordPress. They enable developers to add new features to a website or modify existing behavior without having to modify the core files of WordPress itself. A plugin can be as simple as a single file, or it can be a complex directory that contains multiple files, scripts, and style sheets.

Understand the basic structure of the plug-in

The most crucial file in a plugin is the main plugin file. This file must contain a specific plugin header comment, which WordPress uses to identify your plugin. The plugin header is usually located at the top of the file and includes information such as the plugin name, description, version, and author. For example, the main file for a plugin named “My Greeting Plugin” might look like this: my-greeting-plugin.php The beginning of… might look like this:

<?php
/**
 * Plugin Name: 我的问候插件
 * Plugin URI:  https://example.com/my-greeting-plugin
 * Description: 一个简单的插件，用于在网站前台显示问候语。
 * Version:     1.0.0
 * Author:      开发者名称
 * License:     GPL v2 or later
 * Text Domain: my-greeting-plugin
 */

After the plugin header, you can start writing the functional code for the plugin. All plugin code should be wrapped in conditional statements to prevent direct access, which could lead to security issues, and to ensure that the code is only executed within the WordPress environment.

Recommended Reading Starting from scratch: Building your first WordPress plugin。

Plugin Directory and File Organization

For plugins with simple functionality, a single PHP file may be sufficient. However, as the number of features increases, proper file organization becomes essential. A typical plugin directory may have the following structure:
- my-plugin/ (root directory)
- my-plugin.php (Primary plugin file)
- uninstall.php (Uninstallation script)
- includes/ (Directory for storing core functionality classes or functions)
- admin/ (Directory containing code related to backend management)
- public/ (Directory containing the code related to the website's front-end)
- assets/ (Directory for storing JavaScript, CSS, and image resources)
- languages/ (Directory for storing internationalized translation files)

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

This modular structure makes the code easier to maintain, test, and collaborate on.

Core Development Concepts: Hooks and Filters

The core of WordPress plugin development is the “Hook” system. Hooks allow you to insert your own code at specific points in the WordPress execution process, thereby modifying or enhancing the default behavior of the platform. There are two main types of hooks: Action Hooks and Filter Hooks.

Use action hooks to add functionality.

Action hooks are executed when specific events occur, such as posting an article, a user logging in, or a management page being loaded. They do not return any value to the caller; their purpose is simply to “perform an action.” You can use them to automate certain tasks or processes. add_action() The function “mounts” its own function to an action hook.

For example, if you want to add a custom piece of text to the footer of the website's front page, you can use… wp_footer This action hook: In the main file of the plugin, you can write it like this:

Recommended Reading The Ultimate Guide to WordPress Plugin Development: Building Custom Functionality from Scratch。

function myplugin_add_footer_text() {
    echo '<p style="text-align:center;">Thank you for using our website!</p>';
}
add_action( 'wp_footer', 'myplugin_add_footer_text' );

When WordPress executes… wp_footer When the location is determined, the function you registered will be automatically invoked. myplugin_add_footer_text Function.

Use the filter hook to modify the content.

Filter hooks are used to modify data. They provide you with the opportunity to alter the data before it is sent to the database or the browser. The filter function must return the modified value. add_filter() A function is used to register filters.

A common example is modifying article titles. Suppose you want to automatically add a trademark symbol (™) to the end of all article titles; you can use… the_title Filter:

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 myplugin_modify_post_title( $title, $post_id ) {
    // 确保只在主循环且不是管理后台中修改
    if ( ! is_admin() && in_the_loop() ) {
        $title = $title . ' ™';
    }
    return $title;
}
add_filter( 'the_title', 'myplugin_modify_post_title', 10, 2 );

The parameters here 10 It represents the priority (the smaller the number, the earlier the task is executed).2 This indicates that our callback function accepts two parameters.$title and $post_id）。

Create a plugin management page

Many plugins require a configuration page in the WordPress administration panel, allowing users to set various options. WordPress provides a rich API for creating top-level menus and sub-menus.

Add a top-level management menu.

You can use add_menu_page() The function creates a separate management menu for your plugin. This function requires multiple parameters, including the page title, menu title, user permissions, menu alias, callback function, and other settings.

Recommended Reading WordPress Plugin Development Complete Guide: An Practical Tutorial from Beginner to Expert。

The following code demonstrates how to create a simple top-level menu page:

function myplugin_add_admin_menu() {
    add_menu_page(
        '我的插件设置',          // 页面标题
        '我的插件',              // 菜单标题
        'manage_options',       // 所需权限（管理员）
        'myplugin-settings',    // 菜单别名（URL中的slug）
        'myplugin_settings_page', // 用于输出页面内容的回调函数
        'dashicons-admin-generic', // 菜单图标（使用Dashicons）
        30                      // 菜单位置
    );
}
add_action( 'admin_menu', 'myplugin_add_admin_menu' );

// 定义输出页面内容的回调函数
function myplugin_settings_page() {
    ?>
    <div class="wrap">
        <h1></h1>
        <form action="/en/options.php/" method="post" data-trp-original-action="options.php">
            
        <input type="hidden" name="trp-form-language" value="en"/></form>
    </div>
    &lt;?php
}

Use the Settings API to create options.

Manually handling form submissions and validations is cumbersome and insecure. The WordPress Settings API provides a standardized way to register, validate, and save settings. This process involves three main functions:register_setting()、add_settings_section() and add_settings_field()。

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

The following example demonstrates how to register a setting group and a text field:

function myplugin_settings_init() {
    // 注册一个新的设置组 “myplugin_options” 到 “reading” 页面（这里我们用自己的页面）
    register_setting(
        'myplugin-settings', // 选项组，通常与页面别名一致
        'myplugin_options',  // 存储在 wp_options 表中的选项名
        'myplugin_sanitize_callback' // 可选的清理回调函数
    );

// 在页面中添加一个区域
    add_settings_section(
        'myplugin_section_main', // 区域的ID
        '主要设置',               // 区域标题
        'myplugin_section_callback', // 区域描述的回调函数
        'myplugin-settings'      // 页面别名
    );

// 向区域中添加一个字段
    add_settings_field(
        'myplugin_field_greeting', // 字段ID
        '问候语',                  // 字段标签
        'myplugin_field_greeting_callback', // 用于输出字段HTML的回调函数
        'myplugin-settings',      // 页面别名
        'myplugin_section_main',  // 区域ID
        [ 'label_for' => 'myplugin_field_greeting' ] // 额外参数
    );
}
add_action( 'admin_init', 'myplugin_settings_init' );

// 字段HTML的回调函数
function myplugin_field_greeting_callback() {
    $options = get_option( 'myplugin_options' );
    $value = isset( $options['greeting'] ) ? $options['greeting'] : '你好，世界！';
    echo '<input type="text" id="myplugin_field_greeting" name="myplugin_options[greeting]" value="' . esc_attr( $value ) . '" class="regular-text" />';
}

Plugin security and best practices

Developing a popular plugin, where security and code quality are of utmost importance, is crucial. An insecure plugin can become an entry point for attacks on a website.

Data Validation, Cleaning, and Escaping

Never trust data entered by users or data retrieved from databases. Before processing any data, it must be validated, sanitized, and escaped.

• Verification: Checking whether data conforms to the expected format or rules (for example, whether it is an email address, a number, etc.). Use functions such as… is_email()、ctype_digit() Or a regular expression.
• Cleaning: Before saving data to a database or using it for other purposes, remove any unsafe or unnecessary parts from it. For different types of data, use the appropriate cleaning functions accordingly. sanitize_text_field()(Used for text)sanitize_email()(Used for email addresses)intval()(Used for integers.)
• Escape: When outputting data to HTML, JavaScript, or URLs, make sure it is securely encoded to prevent cross-site scripting (XSS) attacks. Use functions such as… esc_html()、esc_attr()、esc_url() and wp_kses()。

For example, when saving and outputting the greeting options that we created earlier:

// 在保存设置时的清理回调函数中
function myplugin_sanitize_callback( $input ) {
    $sanitized = [];
    if ( isset( $input['greeting'] ) ) {
        // 清理文本输入
        $sanitized['greeting'] = sanitize_text_field( $input['greeting'] );
    }
    return $sanitized;
}

// 在前台输出问候语时
function myplugin_display_greeting() {
    $options = get_option( 'myplugin_options' );
    $greeting = isset( $options['greeting'] ) ? $options['greeting'] : '你好，世界！';
    // 在输出到HTML前进行转义
    echo '<div class="greeting">'`. esc_html($greeting).`'</div>';
}

Implement internationalization support

In order for your plugin to be used by users around the world, it must support internationalization (i18n). This means that all user-facing strings should be wrapped in translation functions, so that they can be easily translated into other languages.

WordPress uses the GNU gettext framework. The core translation functions are… __()(Used to obtain the translated string) and _e()(Used to output the translated string.) You need to set a unique text domain for your plugin; this text domain has already been defined in the plugin header.

In your code, you should use it in the following way:

// 获取翻译后的字符串并赋值给变量
$message = __( '感谢你使用我的插件！', 'my-greeting-plugin' );

// 直接输出翻译后的字符串
_e( '设置已成功保存。', 'my-greeting-plugin' );

// 带占位符的翻译
printf(
    __( '欢迎，%s！', 'my-greeting-plugin' ),
    esc_html( $username )
);

Then, you can use a tool like Poedit to extract these strings from the code and generate the necessary content. .pot Template files, which translators can use to create translations in different languages. .po and .mo The files should be placed in the plugin's folder. /languages/ Under the directory.

summarize

WordPress plugin development is a powerful and flexible field that allows developers to deeply customize and extend WordPress. Starting with a thorough understanding of the basic plugin structure and hook system, moving on to creating interactive management interfaces, and following strict security and internationalization best practices—every step is crucial for building high-quality, maintainable, and popular plugins. Remember, the key lies in making use of the rich APIs provided by WordPress, rather than trying to bypass them. By organizing your code in a modular manner, handling data carefully, and considering multi-language support from the very beginning, your plugin will not only be powerful but also secure, professional, and capable of reaching a global audience.

FAQ Frequently Asked Questions

How many files does a WordPress plugin need to have at a minimum?

A plugin typically requires at least one PHP file. As long as this file contains the correct plugin header comment, WordPress will be able to recognize and activate the plugin in its backend plugin list. This single file can contain all the code for the plugin.

How to prevent plugin names from conflicting with other plugins?

To prevent function names, class names, or constant names from conflicting with those of other plugins or themes, you should use a unique prefix. Typically, this prefix can be based on the name of your plugin or an abbreviation of it. For example, if your plugin is called “Awesome Slider,” you could use… as_ Or awesome_slider_ As a prefix for all functions and classes, a more unique namespace-style structure can be considered for class names.

How to clean the data in the database when uninstalling a plugin?

WordPress provides two methods for handling the cleanup process when a plugin is uninstalled. The first method involves registering an uninstall hook; you can do this in your main plugin file by… register_uninstall_hook() The function specifies a callback function to delete the data tables and options created by the plugin. The second method, which is also the more recommended one, is to create an independent… uninstall.php File: When a user deletes a plugin through the WordPress administration panel, WordPress automatically executes the code contained in this file. You need to check the constants within this file. WP_UNINSTALL_PLUGIN Whether it has been defined, and then all plugin data is securely deleted.

How should I add JavaScript and CSS files to my plugin?

You should use the queue functions provided by WordPress to correctly add scripts and style sheets, rather than outputting them directly in the HTML. <script> Or <link> Tags. For front-end resources, use them. wp_enqueue_script() and wp_enqueue_style() Define the functions and mount them to wp_enqueue_scripts On the action hook. For resources in the administration backend, they should be mounted there. admin_enqueue_scripts On the hook. This ensures that dependencies are properly handled and prevents the repeated loading of the same resources.

How to debug when developing plugins?

First of all, make sure that in your… wp-config.php file to enable WordPress debug mode. Place the WP_DEBUG The constant is set to trueYou can also enable them all at the same time. WP_DEBUG_LOG(Record errors in a file) and WP_DEBUG_DISPLAY(The error is displayed on the screen.) Use it. error_log() The function logs custom debugging information to the server’s error log. Additionally, you can use the console and network panels in the browser’s developer tools to debug JavaScript and AJAX requests. For more complex logic, consider using professional PHP debugging tools such as Xdebug.