#4 Module 1-4 Creating and Saving Plugin Settings (Options API)

🎓 WordPress Plugin Development Tutorial (Modules 1–4)

Learn WordPress plugin development from scratch to advanced concepts. Each module includes ready-to-copy examples with live progress bars and Prism.js highlighting.

🧩 Module 4: Creating and Saving Plugin Settings (Options API)

Now let’s make our settings page functional using WordPress’s built-in Options API.

Step 1: Register the Setting

add_action('admin_init', 'mfp_register_settings');
function mfp_register_settings() {
    register_setting('mfp_options_group', 'mfp_custom_message');
}
  

Step 2: Update the Settings Page with a Form

function mfp_admin_page_html() {
    if (!current_user_can('manage_options')) return;
    ?>
    <div class="wrap">
        <h1>My Plugin Settings</h1>
        <form method="post" action="options.php">
            <?php settings_fields('mfp_options_group'); ?>
            <label for="mfp_custom_message">Custom Footer Message:</label><br>
            <input type="text" name="mfp_custom_message" id="mfp_custom_message"
                value="<?php echo esc_attr(get_option('mfp_custom_message', '')); ?>" style="width:300px;" />
            <?php submit_button(); ?>
        </form>
    </div>
    <?php
}
  

Step 3: Use the Saved Setting

add_action('wp_footer', 'mfp_display_custom_message');
function mfp_display_custom_message() {
    $message = get_option('mfp_custom_message', '');
    if (!empty($message)) {
        echo '<p style="text-align:center; color:#00ffa3;">' . esc_html($message) . '</p>';
    }
}
  

✅ That’s it! Your plugin now has a working settings page and dynamically displays a user-defined message in the site footer.

---

© 2025 WordPress Plugin Learning Demo | Module 4 | Built with Prism.js + Animated Progress Bars