Creating menus and submenus in wordpress


Adding a Menu Item to an Existing Menu

WordPress features many different functions to add submenus to the existing default menus in WordPress. One of these functions is the add_options_page()function. Now explore how the add_options_page() function works to add a submenu item to the Settings menu.

   <?php add_options_page( page_title, menu_title, capability, menu_slug, function);?>

The add_options_page() function accepts the following parameters:

➤ page_title — The title of the page as shown in the tags

➤ menu_title — The name of your submenu displayed on the dashboard

➤ capability — Minimum capability required to view the submenu

➤ menu_slug — Slug name to refer to the submenu; should be a unique name

➤ function — Function to be called to display the page content for the item

Now add a submenu item to the Settings menu:

<?php
add_action('admin_menu', 'hello_world_admin_menu');

function hello_world_admin_menu() {
       add_options_page('Hello World', 'Hello World', 'administrator',
		'hello-world', 'hello_world_html_page');
}
?>

Following is a list of all available submenu functions in WordPress.

➤ add_dashboard_page — Adds a submenu to the Dashboard menu

➤ add_posts_page — Adds a submenu to the Posts menu

➤ add_media_page — Adds a submenu to the Media menu

➤ add_links_page — Adds a submenu to the Links menu

➤ add_pages_page — Adds a submenu to the Pages menu

➤ add_comments_page — Adds a submenu to the Comments page

➤ add_theme_page — Adds a submenu to the Appearance menu

➤ add_plugins_page — Adds a submenu to the Plugins menu

➤ add_users_page — Adds a submenu to the Users menu

➤ add_management_page — Adds a submenu to the Tools menu

➤ add_options_page — Adds a submenu to the Settings menu

Creating a Top-Level Menu

The first menu method for your plugin to explore in WordPress is a new top -level menu, which is added to the admin dashboard menu list. For example, Settings is a top-evel menu. A top-level menu is common practice for any plugin that needs multiple option pages. To register a top-level menu, you use the add_menu_page() function.

    <?php add_menu_page( page_title, menu_title, capability, menu_slug, function,
             icon_url, position ); ?>

The add_menu_page() function accepts the following parameters:

➤ page_title — The title of the page as shown in the tags

➤ menu_title — The name of your menu displayed on the dashboard

➤ capability — Minimum capability required to view the menu

➤ menu_slug — Slug name to refer to the menu; should be a unique name

➤ function: Function to be called to display the page content for the item

➤ icon_url — URL to a custom image to use as the Menu icon

➤ position — Location in the menu order where it should appear

Now create a new menu for your plugin to see the menu process in action. Use the admin_menu action hook to trigger your menu code. This is the appropriate hook to use whenever you create menus and submenus in your plugins.

  
 <?php
    add_action( ‘admin_menu’, ‘menuexample_create_menu’ );
    function menuexample_create_menu() {
        //create custom top-level menu
        add_menu_page( ‘My Plugin Settings Page’, ‘Menu Example Settings’,
             ‘manage_options’, __FILE__, ‘menuexample_settings_page’,
             plugins_url( ‘/images/wp-icon.png’, __FILE__ ) );
    }
    ?>

Adding a Submenu

Now that you have a new top-level menu created, create some submenus for it, which are menu items listed below your top-level menu. For example, Settings is a top-level menu whereas General,listed below Settings, is a submenu of the Settings menu. To register a submenu, use the add_submenu_page() function.

   <?php add_submenu_page( parent_slug, page_title, menu_title, capability,
              menu_slug, function ); ?>

The add_submenu_page() function accepts the following parameters:

➤ parent_slug: Slug name for the parent menu (menu_slug previously defi ned)

➤ page_title: The title of the page as shown in the tags

➤ menu_title: The name of your submenu displayed on the dashboard

➤ capability: Minimum capability required to view the submenu

➤ menu_slug: Slug name to refer to the submenu; should be a unique name

➤ function: Function to be called to display the page content for the item

<?php
add_action( ‘admin_menu’, ‘menuexample_create_menu’ );
function menuexample_create_menu() {

    //create custom top-level menu
    add_menu_page( ‘My Plugin Settings Page’, ‘Menu Example Settings’,
        ‘manage_options’, __FILE__, ‘menuexample_settings_page’,
        plugins_url( ‘/images/wp-icon.png’, __FILE__ ) );

    //create submenu items
    add_submenu_page( __FILE__, ‘About My Plugin’, ‘About’, ‘manage_options’,
        __FILE__.’_about’, menuexample_about_page );
    add_submenu_page( __FILE__, ‘Help with My Plugin’, ‘Help’, ‘manage_options’,
        __FILE__.’_help’, menuexample_help_page );
    add_submenu_page( __FILE__, ‘Uninstall My Plugin’, ‘Uninstall’, ‘manage_options’,
        __FILE__.’_uninstall’, menuexample_uninstall_page );
}
?>


The preceding code creates three submenus for your custom top-level menu: About, Help, and Uninstall, as shown in Figure. Each of these submenu items link to a different custom function that can contain any code you want to use for that submenu page.

One Response to “Creating menus and submenus in wordpress”

  1. Farhan Fayyaz Says:

    Submenu Tree provides a method for structuring content hierarchically. For content, which has a menu link, Submenu Tree displays a list of content, which is at the same level or below the content in the menu.

    http://www.handycss.com/css-menus/creating-menu-with-sub-menu-below/


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: