Like everything else in WordPress even the settings page is very customizable, custom settings and options can be added by a plugin. Settings menu allows us to provide a custom interface where users can input and save various configuration options from the WordPress admin dashboard.

Adding the Settings Menu

A top level menu can be added using the add_menu_page() and a sub menu can be added using the add_submenu_page()function.

function my_settings_menu() {
    // Add a top-level menu
    add_menu_page(
        'My Settings',           // Page title
        'My Settings',           // Menu title
        'manage_options',        // Capability
        'my-settings',           // Menu slug
        'my_settings_page',      // Function to call for the page content
        'dashicons-admin-generic' // Icon
    );
    
    // Add a submenu under the main menu
    add_submenu_page(
        'my-settings',           // Parent menu slug
        'Settings',              // Page title
        'Settings',              // Submenu title
        'manage_options',        // Capability
        'my-settings-options',   // Submenu slug
        'my_settings_options_page' // Function to call for the submenu content
    );
}

add_action('admin_menu', 'my_settings_menu');

These menus can be registered using the admin_menu hook.

Creating the Settings Page

Once the menu is added content for the menu can be added in simple HTML.

function my_settings_page() {
    ?>
    <div class="wrap">
        <h1>My Settings</h1>
        <p>Welcome to the settings page.</p>
    </div>
    <?php
}

function my_settings_options_page() {
    ?>
    <div class="wrap">
        <h1>Settings Page</h1>

        <form method="post" action="options.php">
            <?php
            settings_fields('my_settings_group');
            do_settings_sections('my-settings-options');
            submit_button();
            ?>
        </form>
    </div>
    <?php
}

In the form since we are using the Settings and Option API, use add the action to option.php, then we add the settings fields and sections, at last we add a submit button using the submit_button() function.

Registering the Settings

Now, we need to register our settings so WordPress knows how to handle them. To do this, we can use the register_setting() function.

function my_register_settings() {
    // Register our setting group
    register_setting('my_settings_group', 'my_setting_option');

    // Add a settings section
    add_settings_section(
        'my_settings_section',      // Section ID
        'General Settings',         // Section Title
        'my_settings_section_cb',   // Section Callback
        'my-settings-options'       // Page where to show this section
    );

    // Add a setting field
    add_settings_field(
        'my_setting_option',        // Field ID
        'Example Option',           // Field title
        'my_setting_option_cb',     // Field callback to display the input
        'my-settings-options',      // Page to display on
        'my_settings_section'       // Section to display in
    );
}

add_action('admin_init', 'my_register_settings');

• The register_setting() function registers a setting group called my_settings_group and the option my_setting_option.
• The add_settings_section() function adds a section to group our settings.
• The add_settings_field() function adds a form field for the user to interact with.

Displaying the Form Fields

Next, we need to display the actual input fields for our settings. For this we use a callback function to render the input field for the my_setting_option.

function my_settings_section_cb() {
    echo '<p>Enter your settings below:</p>';
}

function my_setting_option_cb() {
    $option_value = get_option('my_setting_option');
    ?>
    <input type="text" name="my_setting_option" value="<?php echo esc_attr($option_value); ?>" />
    <p class="description">This is an example setting.</p>
    <?php
}

Conclusion

We have successfully created a basic Settings page for our WordPress plugin. We can expand this plugin to include more settings, validation and styles all while using Settings API.