#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 1: Your First Plugin

This simple plugin adds a “Hello, World!” message to your site footer.

<?php
/*
Plugin Name: My First Plugin
Description: A simple starter plugin.
Version: 1.0
Author: Your Name
*/

function mfp_hello_world() {
    echo "<p style='color:green; text-align:center;'>Hello, World! My first plugin works 🎉</p>";
}
add_action('wp_footer', 'mfp_hello_world');
  

---

🧩 Module 2: Hooks & Filters

✨ Example: Action Hook

function my_footer_message() {
    echo "<p style='text-align:center; color:#00d4ff;'>Thank you for visiting my site!</p>";
}
add_action('wp_footer', 'my_footer_message');
  

🧠 Example: Filter Hook

function add_custom_signature($content) {
    if (is_single()) {
        $content .= '<p><em>– Thanks for reading!</em></p>';
    }
    return $content;
}
add_filter('the_content', 'add_custom_signature');
  

---

🧩 Module 3: Admin Menu & Settings Page

Now we’ll create an admin menu inside your WordPress Dashboard.

function mfp_add_admin_menu() {
    add_menu_page(
        'My Plugin Settings',
        'My Plugin',
        'manage_options',
        'my-plugin-settings',
        'mfp_admin_page_html',
        'dashicons-admin-generic',
        20
    );
}
add_action('admin_menu', 'mfp_add_admin_menu');

function mfp_admin_page_html() {
    if (!current_user_can('manage_options')) return;
    echo '<div class="wrap">';
    echo '<h1>My Plugin Settings</h1>';
    echo '<p>Welcome to your custom settings page!</p>';
    echo '</div>';
}
  

---

🧩 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 | Modules 1–4 | Built with Prism.js + Animated Progress Bars