When adding new features to a wordpress website you may have to create a configuration page for the feature you created.

For example, the twitter plugin (which adds your twitter feed to the sidebar) should be configurable to specify the username and the number of tweets to display. This is important in cases where the plugin will be distributed and be used by non-technical users.

This article will show you:

1. How to create an admin section like the one shown in the image on the right.

2. How to create sub pages for each of those sections

3. Show the content (usually a form) you want when the sub page link is clicked.

What We’ll Create:

This is a part of a module that I am working on right now. This module adds an autoresponder that has most of the features of Aweber.com.

Step 1: Add An Admin Menu Hook

Add an admin_menu callback function in your main PHP file. If you don’t know what a hook is, it is simply a special function that you ask wordpress to call at a particular stage of initializing the output. In this case the stage is building the administration menu.

add_action('admin_menu','wpr_admin_menu');

Step 2: Adding menu items

Adding Admin Section

First we add a separate section called “Newsletters” which can be expanded to show some more links to sub sections (Home, Subscribers in the above picture). To add a section we use this function:

add_menu_page(page_title, menu_title, access_level/capability, file, [function], [icon_url]);

So in our plugin we use:

add_menu_page('Newsletters','Newsletters',8,__FILE__);

If you leave out the [function] parameter, wordpress will display the first sub page under the section when the section is clicked (and not expanded using the small arrow on the right). Click here to read the detailed documentation of the function.

Access Capability

I need this section to be visible only to the admin user therefore I have used access_level as 8. Click here to see other access level values.

Adding Sub Sections

The sub sections – Home, Newsletter, Subscribers, Messages and Reports are added using the following function.

add_submenu_page(parent, page_title, menu_title, access_level/capability, file, [function]);

In our plugin we use:

add_submenu_page(__FILE__,'Newsletters','Newsletters', 8, "newsletter", "wpr_newsletter");

The first parameter is the parent file. This should be the same as the top level menu’s file parameter. Click here to read the detailed documentation of the function. In the parameters, add the parent, page title, menu title and access level capability and then add any unique value for the file attribute

Customizing the first sub section’s link text

When you add sub sections using the add_submenu_page function as shown above, the first section always takes the name of the top-level section itself. To change that to something you want, call the add_submenu_page function as shown below immediately after the add_menu_page function.

add_submenu_page(__FILE__,'Dashboard', 'Home', 8, __FILE__, "wpr_dashboard");

The only difference is the parent attribute and the file attribute in the function are et to the same file. Above function will set the link of the first section to ‘Home’. The wpr_dashboard function will be called when this page is to be displayed.

function wpr_dashbaord()
{
     echo "Dashboard Content Goes here!";
}

Below is the code for the menu in the picture :

add_action('admin_menu','wpr_admin_menu');

function wpr_admin_menu()
{
     add_menu_page('Newsletters', 'Newsletters',8,__FILE__);
     add_submenu_page(__FILE__, 'Dashboard', 'Home', 8, __FILE__,"wpr_dashboard");
     add_submenu_page(__FILE__, 'Newsletters', 'Newsletters', 8, "newsletter","wpr_newsletter");
     add_submenu_page(__FILE__, 'Subscribers', 'Subscribers', 8, "subscribers", "wpr_subscribers");
     add_submenu_page(__FILE__, 'Messages', 'Messages', 8, "messages", "wpr_messages");
     add_submenu_page(__FILE__, 'Reports', 'Reports', 8, "reports", "wpr_reports");
}