0
0
WordpressHow-ToBeginner · 4 min read

How to Create a Settings Page in WordPress Easily

To create a settings page in WordPress, use the add_menu_page function to add the page to the admin menu and the register_setting function to register your settings. Then, build a form inside the page callback to save and display options.
📐

Syntax

add_menu_page adds a new top-level menu page in the WordPress admin. It requires a page title, menu title, capability, menu slug, callback function, icon URL, and position.

register_setting registers a setting group and option name to save user input securely.

The callback function outputs the HTML form for the settings page.

php
<?php
add_action('admin_menu', 'myplugin_add_settings_page');
add_action('admin_init', 'myplugin_register_settings');

function myplugin_add_settings_page() {
    add_menu_page(
        'My Plugin Settings', // Page title
        'My Plugin',          // Menu title
        'manage_options',     // Capability
        'myplugin-settings',  // Menu slug
        'myplugin_settings_page_html', // Callback
        'dashicons-admin-generic', // Icon
        80                    // Position
    );
}

function myplugin_register_settings() {
    register_setting('myplugin_options_group', 'myplugin_option_name');
}

function myplugin_settings_page_html() {
    ?>
    <div class="wrap">
        <h1>My Plugin Settings</h1>
        <form method="post" action="options.php">
            <?php
            settings_fields('myplugin_options_group');
            do_settings_sections('myplugin-settings');
            $value = get_option('myplugin_option_name');
            ?>
            <input type="text" name="myplugin_option_name" value="<?php echo esc_attr($value); ?>" />
            <?php submit_button(); ?>
        </form>
    </div>
    <?php
}
?>
💻

Example

This example creates a simple settings page under the WordPress admin menu called "My Plugin". It registers one option and displays a text input field to save and update the option value.

php
<?php
/* Plugin Name: My Plugin Settings Example */

add_action('admin_menu', 'myplugin_add_settings_page');
add_action('admin_init', 'myplugin_register_settings');

function myplugin_add_settings_page() {
    add_menu_page(
        'My Plugin Settings',
        'My Plugin',
        'manage_options',
        'myplugin-settings',
        'myplugin_settings_page_html',
        'dashicons-admin-generic',
        80
    );
}

function myplugin_register_settings() {
    register_setting('myplugin_options_group', 'myplugin_option_name');
}

function myplugin_settings_page_html() {
    ?>
    <div class="wrap">
        <h1>My Plugin Settings</h1>
        <form method="post" action="options.php">
            <?php
            settings_fields('myplugin_options_group');
            do_settings_sections('myplugin-settings');
            $value = get_option('myplugin_option_name');
            ?>
            <label for="myplugin_option_name">Enter a value:</label>
            <input type="text" id="myplugin_option_name" name="myplugin_option_name" value="<?php echo esc_attr($value); ?>" />
            <?php submit_button(); ?>
        </form>
    </div>
    <?php
}
?>
Output
In WordPress admin, a new menu item "My Plugin" appears. Clicking it shows a settings page with a text input and a save button. Entered text is saved and loaded on page refresh.
⚠️

Common Pitfalls

  • Not hooking add_menu_page and register_setting to the correct WordPress actions (admin_menu and admin_init respectively).
  • Forgetting to call settings_fields inside the form, which is needed for security nonce fields.
  • Using incorrect capability strings, which can hide the menu from users.
  • Not escaping output with esc_attr when displaying saved options, risking security issues.
php
<?php
// Wrong: Not hooking functions
add_menu_page('Title', 'Menu', 'manage_options', 'slug', 'callback');
register_setting('group', 'option');

// Right: Hook properly
add_action('admin_menu', function() {
    add_menu_page('Title', 'Menu', 'manage_options', 'slug', 'callback');
});
add_action('admin_init', function() {
    register_setting('group', 'option');
});
📊

Quick Reference

  • add_menu_page: Adds a new admin menu page.
  • register_setting: Registers a setting for saving options.
  • settings_fields: Prints security fields inside the form.
  • get_option: Retrieves saved option value.
  • submit_button: Prints a save button.

Key Takeaways

Use add_menu_page hooked to admin_menu to create the settings page menu.
Register your settings with register_setting hooked to admin_init for secure saving.
Always include settings_fields inside your form for security nonces.
Escape output with esc_attr when displaying saved options to prevent security issues.
Test your settings page by saving and retrieving options to confirm it works.