#3 Module 3: Admin Menus & Settings Page

Now we’ll move to Module 3: Admin Menus & Settings Page — the point where your plugin starts interacting with the WordPress Dashboard.

We’ll extend your single HTML tutorial to include a new section with:
✅ Explanation of how to create an admin menu
✅ Code example to add a menu item under “Dashboard”
✅ Code for a simple custom admin page
✅ Consistent Prism.js style + copy button

🧩 Module 3: Admin Menus & Settings Page
🧠 What You’ll Learn

Every plugin can create custom admin menus or pages in WordPress using:

add_menu_page()   // Adds a new main menu
add_submenu_page() // Adds submenus under it


You’ll use these functions to add your own “Plugin Settings” page that appears in the sidebar.

Here’s your updated full HTML file

🎓 WordPress Plugin Development Tutorial

Learn WordPress plugin development step-by-step — each module includes clear explanations and copyable examples using Prism.js.

---

🧩 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');
    

Activate it under Plugins → My First Plugin. Visit your site to see it in action!

---

🧩 Module 2: Hooks & Filters

Hooks are how your plugin connects to WordPress. There are two types: Actions and 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');
    

✅ Actions do something at a point in time. ✅ Filters modify data before it’s shown.

---

🧩 Module 3: Admin Menu & Settings Page

Now we’ll create an admin menu inside your WordPress Dashboard. You’ll learn how to add a new page under “Dashboard” where you can display settings or custom info.

⚙️ Example: Add an Admin Menu

function mfp_add_admin_menu() {
    add_menu_page(
        'My Plugin Settings',   // Page title
        'My Plugin',            // Menu title
        'manage_options',       // Capability
        'my-plugin-settings',   // Menu slug
        'mfp_admin_page_html',  // Function to display page content
        'dashicons-admin-generic', // Icon
        20                      // Position in menu
    );
}
add_action('admin_menu', 'mfp_add_admin_menu');

// Function that displays content on the page
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>';
}
    

🔹 After activating your plugin, you’ll see a new menu called “My Plugin” on the left sidebar. 🔹 Clicking it opens a simple admin page that you can later expand with forms or data.

💡 Bonus Tip:

You can use add_submenu_page() to add more pages under your main menu. Example: add_submenu_page('my-plugin-settings', 'Sub Page', 'Sub Page', 'manage_options', 'subpage-slug', 'callback_function');

---

© 2025 WordPress Plugin Learning Demo | Modules 1–3 | Built with Prism.js

  	✅ What You Learned
	   How to register new menus in the WordPress Admin Dashboard
       How to display a custom page with HTML content
       How to manage access using current_user_can('manage_options')
       How to organize plugin structure for real-world use