Creating a custom plugin settings page in WordPress allows developers to provide users with a simple interface to configure plugin options. This enhances user control and improves the overall user experience. In this article, we will explore the steps to build a custom settings page for your plugin.

Step 1: Register the Settings

The first step is to register your plugin’s settings with WordPress. Use the register_setting() function within your plugin’s initialization hook. This function defines the setting group, the setting name, and optional sanitization callbacks.

Example:

add_action('admin_init', 'my_plugin_register_settings');

function my_plugin_register_settings() {
    register_setting('my_plugin_options_group', 'my_plugin_option_name', 'sanitize_callback');
}

Step 2: Create the Settings Page

Next, add a menu item to the WordPress admin menu that links to your settings page. Use the add_menu_page() function to create a new menu item.

Example:

add_action('admin_menu', 'my_plugin_add_menu');

function my_plugin_add_menu() {
    add_menu_page(
        'My Plugin Settings',
        'My Plugin',
        'manage_options',
        'my-plugin-settings',
        'my_plugin_render_settings_page'
    );
}

Step 3: Render the Settings Page

Define the callback function that outputs the HTML for your settings page. Use the settings_fields() and do_settings_sections() functions to include the registered settings.

Example:

function my_plugin_render_settings_page() {
    ?>
    

        
    
    

    
My Plugin Settings
        

            
        
    
    

add_action('admin_init', 'my_plugin_register_fields');

function my_plugin_register_fields() {
    add_settings_section(
        'my_plugin_main_section',
        'Main Settings',
        null,
        'my-plugin-settings'
    );

    add_settings_field(
        'my_plugin_option_name',
        'Enable Feature',
        'my_plugin_render_checkbox',
        'my-plugin-settings',
        'my_plugin_main_section'
    );
}

function my_plugin_render_checkbox() {
    $option = get_option('my_plugin_option_name');
    ?>
     />