Build Your First WordPress Plugin Step by Step: From Getting Started to Practical Development

WordPress Plugin Development Basics and Environment Setup

WordPress plugins are essentially a set of PHP files that extend the core functionality of WordPress through the API provided by the platform. A plugin can be as simple as adding a single piece of code, or as complex as building a complete management system. It is crucial to understand the basic structure of a plugin before you start coding. Every plugin must have a main file, which is usually named after the plugin itself. my-first-plugin.phpThe comment header at the top of this file is crucial for WordPress to recognize the plugin.

A development environment is the cornerstone of efficient work. You need to set up a local testing environment that is as consistent as possible with the live production environment. It is recommended to use local server integration packages such as XAMPP, MAMP, or Local by Flywheel. Additionally, make sure that your code editor or Integrated Development Environment (IDE) supports PHP syntax highlighting and debugging features, such as VS Code, PhpStorm, or Sublime Text. Enable the necessary settings in WordPress to facilitate a smooth development process.WP_DEBUGPatterns are extremely important for troubleshooting errors during the development phase. You can find more information about this on the website.wp-config.phpThe file defines the content through specific specifications or rules.define('WP_DEBUG', true);To enable it.

Create your first plug-in file

Let’s start by creating the simplest plugin possible – one that will display a custom notification in the website’s administration panel.

Recommended Reading WordPress Plugin Development Guide: Building Your Own Custom Features from Scratch。

Write the main plugin file and the comment header.

First, in the WordPress installation directory, you need to create a new folder called "wp-content/uploads".wp-content/pluginsInside the folder, create a new folder and name it…my-first-pluginInside that folder, create a PHP file with the same name.my-first-plugin.php。

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

Open this file and enter the following standard plugin information comments at the beginning. This information will be displayed on the “Plugins” management page in the WordPress backend.

<?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
 * Domain Path:       /languages
 */

After saving the file, go to the “Plugins” page in the WordPress administration dashboard. You should see “My First Plugin” listed in the plugin directory. Activate it. Although the plugin has not yet performed any functionality, it has been successfully loaded by WordPress.

Implement a basic background notification feature.

Now, we will add the first feature to this plugin: a welcome message displayed at the top of the administration panel. We will use WordPress’s built-in functionality for this.admin_noticesHook. In the main plugin file just now, add the following code below the comment section:

// 在管理后台显示自定义通知
function mfp_show_admin_notice() {
    ?>
    <div class="notice notice-success is-dismissible">
        <p><?php _e( '欢迎使用“我的第一个插件”！', 'my-first-plugin' ); ?></p>
    </div>
    &lt;?php
}
add_action( &#039;admin_notices&#039;, &#039;mfp_show_admin_notice&#039; );

Code Explanation: We have created a component (or module) named…mfp_show_admin_noticeThis function generates an HTML notification code that conforms to the WordPress backend format and outputs it._e()The function is designed to support future internationalization (i18n) efforts. In conclusion, by…add_action()The function mounts our custom function to WordPress.admin_noticesOn this “hook.” After saving the file, refresh the WordPress administration page, and you will see the green success message.

Recommended Reading A Complete Guide to WordPress Plugin Development: From Beginner to Advanced Practical Tutorials。

Deep Dive into the Core Functionality Development of Plugins

After mastering the basic structure, we can develop more practical features. A common requirement is to automatically add a custom piece of text at the end of an article’s content.

Modify the content of the article using a filter

WordPress provides a large number of “filters” for modifying various types of data. In order to add text at the end of an article’s content, we will use one of these filters.the_contentFilters: Add the following new function to the main plugin file:

// 在文章内容末尾添加自定义文本
function mfp_append_to_content( $content ) {
    // 确保只在主循环的单篇文章页面执行
    if ( is_single() && in_the_loop() && is_main_query() ) {
        $custom_text = '<div class="my-plugin-footer"><p>Thank you for reading! This article is brought to you by “My First Plugin”.</p></div>';
        $content .= $custom_text;
    }
    return $content;
}
add_filter( 'the_content', 'mfp_append_to_content' );

This function takes the original input as its parameter.$contentWe use conditional logic to ensure that our custom HTML text is only added on individual article pages and only when the page is part of the main query. Once the modifications are made, the updated content is returned. This approach is non-invasive and does not alter the original data in the database.

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

Create a simple management settings page.

In order to allow users to customize the text that is added at the end of an article, we need to create a settings page for the plugin. This involves several steps: registering a menu item, creating a page callback function, and processing the form data.

First, useadmin_menuThe hook has been updated to include a sub-menu page:

// 添加插件设置菜单到后台
function mfp_add_admin_menu() {
    add_options_page(
        '我的第一个插件设置', // 页面标题
        '我的插件设置',       // 菜单标题
        'manage_options',    // 权限要求
        'my-first-plugin',   // 菜单slug
        'mfp_options_page_html' // 显示页面内容的回调函数
    );
}
add_action( 'admin_menu', 'mfp_add_admin_menu' );

Next, define the callback function.mfp_options_page_htmlThis HTML form is used to render the settings page. Additionally, we need to use the WordPress Settings API to securely register, save, and retrieve options. For the sake of simplicity, here is a simplified version of the implementation:

Recommended Reading Complete Guide to WordPress Plugin Development: From Getting Started to Building Professional-Level Extensions。

// 设置页面的HTML内容
function mfp_options_page_html() {
    // 检查用户权限
    if ( !current_user_can( 'manage_options' ) ) {
        return;
    }
    ?>
    <div class="wrap">
        <h1></h1>
        <form action="/en/options.php/" method="post" data-trp-original-action="options.php">
            <?php
            // 输出设置字段、非ce等安全字段
            settings_fields( 'mfp_options_group' );
            do_settings_sections( 'my-first-plugin' );
            submit_button( '保存设置' );
            ?>
        <input type="hidden" name="trp-form-language" value="en"/></form>
    </div>
    <?php
}

// 初始化插件设置
function mfp_settings_init() {
    // 注册一个设置
    register_setting( 'mfp_options_group', 'mfp_footer_text' );

// 添加一个设置区域
    add_settings_section(
        'mfp_section',
        '自定义文本设置',
        null,
        'my-first-plugin'
    );

// 向区域中添加字段
    add_settings_field(
        'mfp_field_footer',
        '文章页脚文本',
        'mfp_field_footer_html',
        'my-first-plugin',
        'mfp_section'
    );
}
add_action( 'admin_init', 'mfp_settings_init' );

// 渲染文本输入字段
function mfp_field_footer_html() {
    $option = get_option( 'mfp_footer_text', '感谢阅读！本文由“我的第一个插件”为您呈现。' );
    ?>
    <input type='text' name='mfp_footer_text' value='<?php echo esc_attr( $option ); ?>' class='regular-text'>
    <p class="description">The content entered here will be displayed at the end of each article.</p>
    &lt;?php
}

Finally, make the necessary modifications before proceeding.mfp_append_to_contentFunction, so that it can be used from the database options.mfp_footer_textThe text is read from a file or source, rather than using hardcoded text.

Plugin Security, Optimization, and Preparation for Release

In the final stages of development, it is essential to focus on security, code quality, and the deployment process to ensure that the plugin is robust and reliable.

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

Follow security best practices.

All user input must be escaped or validated before being displayed in the browser or stored in the database. When displaying the data, use…esc_html()、esc_attr()、esc_url()Functions such as these are used when processing form submissions or AJAX requests.wp_verify_nonce()andcheck_admin_referer()This is to verify the legitimacy of requests and prevent Cross-Site Request Forgery (CSRF) attacks. Never trust anything directly.$_GET、$_POSTOr$_REQUESTThe data contained within it.

Implement internationalization support

In order for the plugin to be used by users around the world, it is necessary to internationalize all user-facing strings in the code. We have already done this in the previous examples._e()The function is used to output the translated text. In addition, you need to declare this function in the plugin’s comment section at the beginning of the code.Text DomainandDomain Path。
During the plugin initialization process (for example, through...)plugins_loadedhook), useload_plugin_textdomain()Function to load language files:

function mfp_load_textdomain() {
    load_plugin_textdomain( 'my-first-plugin', false, dirname( plugin_basename( __FILE__ ) ) . '/languages/' );
}
add_action( 'plugins_loaded', 'mfp_load_textdomain' );

Then, you can use tools like Poedit to extract strings from the plugin’s source code.__()， _e()Generate strings wrapped in functions such as `wait()`..potTemplate files for translators to create.poand.moThe document.

Code Organization and Performance Considerations

As the functionality of plugins grows, it's not advisable to put all the code in the main file. A better approach is to organize the code into separate modules based on their functional roles..phpThe files are included in the main document, and they are selectively incorporated based on certain criteria. For example, it is possible to create…includes/admin/The directory contains the code related to the backend.includes/public/Stores front-end-related code.includes/class-*.phpStore class definitions.
For resource-intensive operations, consider using WordPress’s Transients API to store the results of time-consuming queries, or utilize the Cron API to handle non-urgent tasks in the background. Make sure that plugins can be properly uninstalled when disabled, by using the registered uninstallation hooks available in WordPress.register_uninstall_hook()Clean up the data and options that were created, to keep the site tidy and organized.

summarize

Through this tutorial, we completed the process of building a fully functional WordPress plugin from scratch. We started by understanding the basic structure of plugins and setting up the development environment, and then created the main file that included the standard comment headers. Next, we proceeded by…admin_noticesandthe_contentThese two core hooks enable background notifications and the display of text at the bottom of article pages. To enhance the practicality of the plugin, we further integrated the WordPress Settings API, creating a management page that allows users to customize the text displayed on these pages. Finally, we discussed important topics in plugin development, such as security practices, internationalization support, and code organization optimization. This process clearly illustrates the core paradigm of WordPress plugin development: using a variety of action hooks and filters to add functionality, adhering to API standards when creating user interfaces, and always prioritizing security and maintainability. With a solid understanding of these fundamentals, you will be equipped to explore the world of more complex plugins.

FAQ Frequently Asked Questions

What are the prerequisite knowledge requirements for developing WordPress plugins?

You need to have a solid foundation in PHP programming, as the plugin code is primarily written in PHP. In addition, you should have a basic understanding of HTML, CSS, and JavaScript to handle the front-end display and interactions. It is essential to be familiar with the basic concepts of WordPress, such as themes, post types, taxonomies, and especially its Hook system (including actions and filters).

###
What are the most basic files that a WordPress plugin must include?

In the most basic case, a plugin can consist of just one PHP file. However, this file must include the plugin information comments header that meets WordPress standards at the top, which is what we see in our example.Plugin Name、DescriptionFields such as these are the sole basis for WordPress to recognize the plugin and display it in the plugin management list.

###
How should I name the functions and variables in my plugin?

To avoid conflicts with the code of WordPress core, themes, or other plugins, all custom functions, classes, variables, and constants should use a unique prefix. It is generally recommended to use a prefix that is related to the abbreviation or short name of the plugin. For example, this is what we used in our example.mfp_(On behalf of “My First Plugin”): Class names should also follow this rule and should preferably use meaningful, complete names.

###
Will the database tables or options created within a plugin be deleted after the plugin is removed?

By default, no. If you proceed through the process…add_option()、update_option()The options created, or the custom data tables generated, will remain in the database even if the user deletes the plugin files through the WordPress administration panel. To provide a clean and seamless uninstallation experience, you should…register_uninstall_hook()A function is used to register a cleanup callback, which deletes all plugin-related options, database tables, and temporary caches.

###
How can I make my plugin compatible with more versions of WordPress?

Avoid using PHP versions that are too new, as well as functions that are specific to WordPress, in your code. Before using a particular function, class, or hook, make sure to consult the official documentation to determine the minimum WordPress version for which it is compatible. You can include this information in the comments at the top of the main file of your plugin.Requires at least:The field declaration specifies the minimum supported version of WordPress. In the code, this can be combined with conditional statements to ensure that the code only runs on WordPress versions that meet the required minimum requirement.function_exists()Orclass_exists()Check to provide a downgrade option or a friendly message to the user.