Admin menu pages in Wordpress - Mini Project: Build & Apply

Create a Custom Admin Menu Page in WordPress

📖 Scenario: You are building a WordPress plugin that adds a new menu page to the WordPress admin dashboard. This menu page will help site administrators access custom settings easily.

🎯 Goal: Build a simple WordPress plugin that adds a custom admin menu page with a title and a callback function that displays a welcome message.

📋 What You'll Learn

Create a function to register the admin menu page

Use the add_menu_page function with specific parameters

Hook the menu registration function to admin_menu action

Create a callback function that outputs a welcome message inside the admin page

💡 Why This Matters

🌍 Real World

Custom admin menu pages help WordPress plugin developers provide easy access to plugin settings and features for site administrators.

💼 Career

Knowing how to add admin menu pages is essential for WordPress plugin development roles and customizing WordPress admin interfaces.

1

Setup the Plugin File and Register the Admin Menu Function

Create a function called myplugin_register_menu that will be used to add the admin menu page. This function should be empty for now.

Wordpress

<?php
// Create a function called myplugin_register_menu

function myplugin_register_menu() {
    // Your code here
}

Need a hint?

Start by defining a PHP function named myplugin_register_menu with empty curly braces.

2

Add the Admin Menu Page Using add_menu_page

Inside the myplugin_register_menu function, add a call to add_menu_page with these exact parameters: page title 'My Plugin Settings', menu title 'My Plugin', capability 'manage_options', menu slug 'myplugin-settings', and callback function myplugin_settings_page.

Wordpress

<?php
function myplugin_register_menu() {
    // Use add_menu_page with the correct parameters here
    // Your code here
}

Need a hint?

Use add_menu_page inside your function with the exact parameters given.

3

Hook the Menu Registration Function to admin_menu Action

Add a line of code that hooks the myplugin_register_menu function to the admin_menu action using add_action.

Wordpress

<?php
function myplugin_register_menu() {
    add_menu_page(
        'My Plugin Settings',
        'My Plugin',
        'manage_options',
        'myplugin-settings',
        'myplugin_settings_page'
    );
}

// Hook the function to admin_menu action
// Your code here

Need a hint?

Use add_action with the hook name 'admin_menu' and your function name.

4

Create the Callback Function to Display the Admin Page Content

Create a function called myplugin_settings_page that outputs an <h1> heading with the text 'Welcome to My Plugin Settings'.

Wordpress

<?php
function myplugin_register_menu() {
    add_menu_page(
        'My Plugin Settings',
        'My Plugin',
        'manage_options',
        'myplugin-settings',
        'myplugin_settings_page'
    );
}

add_action('admin_menu', 'myplugin_register_menu');

// Create the callback function to display content
// Your code here

Need a hint?

Define the callback function that prints the heading inside the admin page.