How to Develop a WordPress Plugin from Scratch

Posted on by Panther

WordPress plugins are an integral part of extending the functionality of a WordPress website. If you have ever wanted to add custom features to your WordPress site, developing a plugin from scratch is the way to go. In this tutorial, we’ll walk you through the process of developing a WordPress plugin step by step.

Prerequisites

To follow along with this tutorial, you’ll need the following:

  • A local development environment with WordPress installed
  • Basic knowledge of PHP, HTML, and CSS
  • A code editor

Step 1: Set Up the Plugin Structure

The first step is to set up the plugin structure. Create a new folder with your desired plugin name inside the wp-content/plugins directory of your WordPress installation. For this tutorial, let’s call the plugin “MyCustomPlugin”.

Inside the “MyCustomPlugin” folder, create a new file called “my-custom-plugin.php”. This will be the main file of your plugin. Open the file in your code editor and add the following code:

<?php

/*
Plugin Name: My Custom Plugin
Plugin URI: https://www.example.com/my-custom-plugin
Description: A brief description of your plugin
Version: 1.0.0
Author: Your Name
Author URI: https://www.example.com
License: GPL2
*/

// Plugin code goes here

Replace the placeholder information with your actual plugin details. This header section is important as it provides WordPress with the necessary information about your plugin.

Step 2: Add Activation and Deactivation Hooks

Next, let’s add activation and deactivation hooks to our plugin. These hooks will be triggered when the plugin is activated or deactivated.

register_activation_hook( __FILE__, 'my_custom_plugin_activate' );
register_deactivation_hook( __FILE__, 'my_custom_plugin_deactivate' );

function my_custom_plugin_activate() {
    // Activation code goes here
}

function my_custom_plugin_deactivate() {
    // Deactivation code goes here
}

You can add any custom code inside the my_custom_plugin_activate and my_custom_plugin_deactivate functions that should be executed during the activation or deactivation process.

Step 3: Add a Custom Admin Menu

Let’s now add a custom admin menu to our plugin. This will allow us to configure plugin settings.

add_action( 'admin_menu', 'my_custom_plugin_add_admin_menu' );
add_action( 'admin_init', 'my_custom_plugin_settings_init' );

function my_custom_plugin_add_admin_menu() {
    add_menu_page(
        'My Custom Plugin',
        'Custom Plugin',
        'manage_options',
        'my_custom_plugin',
        'my_custom_plugin_options_page'
    );
}

function my_custom_plugin_settings_init() {
    // Register plugin settings here
}

function my_custom_plugin_options_page() {
    // Options page HTML goes here
}

The add_menu_page function adds a new top-level menu item to the WordPress admin menu. You can replace the placeholder text with your desired menu name and page title.

The admin_init action hook is used to register the plugin settings, which we will cover in the next step. Finally, the my_custom_plugin_options_page function is responsible for rendering the HTML content for our plugin settings page.

Step 4: Register Plugin Settings

To add settings to our plugin, we need to register them using the register_setting and add_settings_section functions.

function my_custom_plugin_settings_init() {
    register_setting( 'my_custom_plugin_options', 'my_custom_plugin_settings' );

    add_settings_section(
        'my_custom_plugin_options_section',
        'General Settings',
        'my_custom_plugin_options_section_callback',
        'my_custom_plugin'
    );
}

function my_custom_plugin_options_section_callback() {
    // Section description goes here
}

Here, we have registered the plugin settings with the my_custom_plugin_options option group and my_custom_plugin_settings as the option name.

The add_settings_section function adds a new section to our plugin settings page with a title and a callback function to render the section’s description.

Step 5: Add Fields to Plugin Settings

Now, let’s add fields to our plugin settings section using the add_settings_field function.

function my_custom_plugin_options_section_callback() {
    echo '<p>Section description goes here.</p>';
}

function my_custom_plugin_display_setting() {
    $options = get_option( 'my_custom_plugin_settings' );
    echo '<input type="text" name="my_custom_plugin_settings[my_custom_field]" value="' . esc_attr( $options['my_custom_field'] ) . '">';
}

function my_custom_plugin_settings_init() {
    register_setting( 'my_custom_plugin_options', 'my_custom_plugin_settings' );

    add_settings_section(
        'my_custom_plugin_options_section',
        'General Settings',
        'my_custom_plugin_options_section_callback',
        'my_custom_plugin'
    );

    add_settings_field(
        'my_custom_field',
        'Custom Field',
        'my_custom_plugin_display_setting',
        'my_custom_plugin',
        'my_custom_plugin_options_section'
    );
}

The my_custom_plugin_display_setting function displays the HTML content of our custom field. In this example, we have added a text input field.

The add_settings_field function adds a new field to our plugin settings section. Replace the placeholders with your desired field name, label, and display callback function.

Step 6: Save and Retrieve Plugin Settings

To save and retrieve the plugin settings, we need to update the my_custom_plugin_options_page function.

function my_custom_plugin_options_page() {
    echo '<form action="options.php" method="post">';
    settings_fields( 'my_custom_plugin_options' );
    do_settings_sections( 'my_custom_plugin' );
    submit_button();
    echo '</form>';
}

The settings_fields function outputs the hidden form fields for our plugin settings. The do_settings_sections function outputs the settings sections and fields.

To retrieve the plugin settings, you can use the get_option function.

$options = get_option( 'my_custom_plugin_settings' );
$customFieldValue = $options['my_custom_field'];

Replace my_custom_field with your actual field name.

Step 7: Test the Plugin

Congratulations! You have successfully developed a WordPress plugin from scratch. It’s time to test your plugin.

  1. Activate the plugin from the WordPress admin area.
  2. Navigate to the “Custom Plugin” menu item in the admin menu.
  3. Configure the plugin settings.
  4. Save the settings and verify that they are being saved correctly.
  5. Deactivate the plugin and confirm that the deactivation process works as expected.

Conclusion

In this tutorial, we walked through the process of developing a WordPress plugin from scratch. We covered setting up the plugin structure, adding activation and deactivation hooks, creating a custom admin menu, registering plugin settings, adding fields to plugin settings, and saving/retrieving plugin settings.

WordPress plugins offer endless possibilities for extending your WordPress website. Now that you have the knowledge to develop your own plugins, you can start building custom features and functionalities to take your WordPress site to the next level. Happy coding!

Related Post