DIY WordPress: Really Simple Plugin Admin Menus

(Reading time: 3 – 4 minutes)

Following our Technical Tuesday theme, here’s another stupendously popular WordPress Plugin mini-tutorial.

This tutorial shows how to create menu and submenu items in your left sidebar in the WordPress administration interface.

Here’s what it looks like:

The blue arrow points to a spiffy menu icon, the orange highlighting to the menu title, and the green highlighting to the submenus. The name of the plugin is “Demo Admin Menu.”

First, let’s examine the structure of the the plugin.

WordPress Plugin Structure

This following listing is a pseudo-code. It looks like PHP but it’s not. It’s like PHP with all the confusing syntactical parts stripped out, and simplified functions. As you can see, all that’s left is the structure of the code, which is exactly what we want:

class demo_plugin_adminmenu {

    function demo_plugin_adminmenu() {
        add_action(admin_menu, add_demo_menu)
    }

    function add_demo_menu() {
        add_menu_page( call demo_menu_page)
        add_submenu_page( call demo_submenu_page')
    }

    function demo_menu_page() { write a web page }
    function demo_submenu_page() { write a web page }
}

Each function listed in the pseudo-code above may have one number or more arguments. The Codex documents the WordPress functions add_action, add_menu_page and add_submenu_page.

Part of the reason for this article is that the Codex doesn’t document the exact syntax for these calls, which depends on the context in which these calls are made. If the calls are made outside of a class, use the Codex version directly. If made within a class, as shown here, the callbacks will need to be wrapped as shown in the code listing next.

WordPress Admin Menu Plugin

Here’s the final code listing:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

<?php
 
 
if (!class_exists("demo_plugin_adminmenu")) {
 
    class demo_plugin_adminmenu {
 
        function demo_plugin_adminmenu() {
            add_action('admin_menu', array(&$this, 'add_demo_menu'));
        }
 
 
        function add_demo_menu() {
            if (function_exists('add_menu_page')) {
 
                add_menu_page('Menu Page Title', 'Menu Title', 
				              'administrator', __FILE__, 
							  array(&$this, 'demo_menu_page'), 
							  WP_PLUGIN_URL.'/demo-plugin-adminmenu/award_star_gold_1.ico');
 
                add_submenu_page(__FILE__, 'Page Title', 'Submenu Title', 
				              'administrator', 'submenu_handle', 
							  array(&$this, 'demo_submenu_page'));
            }
        }
 
        function demo_menu_page() {    
			?>
			<div class="wrap">
			    <h2>Demo Menu Page</h2>
			    Does nothing but demonstrate menu.
			</div>
			<?php 
        }
 
        function demo_submenu_page() {
			?>
			<div class="wrap">
			    <h2>Demo Submenu Page</h2>
			    Does nothing but demonstrate submenu. 
			</div>
			<?php 
        }
    }
}
 
$wpdpd = new demo_plugin_adminmenu();
 
?>

You could copy and paste this code listing. But you would learn it better if you typed in by hand, which is what often do. Don’t forget to add the plugin header information.

WordPress Plugin Tutorials

These mini-tutorials are designed to provide a single lesson resulting in runnable code, with no extras.

Each provides a simple, standalone plugin. You can use these plugins like bricks, combining to create your own plugins.

Often, these tutorials go beyond the WordPress Codex to demonstrate new techniques which aren’t documented in the Codex.