How to create admin menu in wordpress

Sidebar menu wordpress

Sidebar Admin Menu

In wordpress admin panel, we can see a menu in left sidebar, that is called admin menu. We can manage our wordpress by using those menus. Every pages of administration are linked with those menus. When we develop a plugin or theme, sometimes it needs to make out own sidebar menu with custom settings page.

Sidebar Admin Sub Menu

Sub menu means a child menu under a parent menu. When we need to separate a big task into small slot or object, we can assign them into a submenu with different page.

How to create admin menu

Step-1 :
Goto functions.php or another file that is already included functions.php. Add the following code –

add_action( 'admin_menu', 'my_custom_menu' );
  • admin_menu: built in wordpress hook
  • my_custom_menu: It is a user defined function name, you can assign any name

Step-2 :
Then we have to create a function by using that name “my_custom_menu” with some other codes like as bellow.

function my_custom_menu() 
{
       add_menu_page( "Custom Page Title", "Custom Menu Title", "manage_options", "custom_menu_slug_url", "my_custom_menu_page", "icon_url", 50 );
}
	
  • Custom Page Title : When we will click on a menu, it opens a page in admin. Basically this is the page title of that page.
  • Custom Menu Title : Menu name of the sidebar menu.
  • manage_options : It is a capability to save options. By default value is “manage_options”. You don’t need to change it.
  • custom_menu_slug_url : This is very important. It should be unique name.
  • my_custom_menu_page : This is a user defined function name. When we will click on the menu link, this function will execute.
  • icon_url : Icon url of the admin menu
  • 50 : It is the positioning order of the menus

Step-3 :
Now create a user defined functions named “my_custom_menu_page”.

function my_custom_menu_page() 
{
	echo '<div class="wrap">';
	echo '<p>This is a page for Custom Menu Title.</p>';
	echo '</div>';
}
How to create admin submenu

add_action( 'admin_menu', 'my_custom_submenu' );

function my_custom_submenu() 
{
       add_submenu_page( 'custom_menu_slug_url', 'Page title', 'Sub-menu title', 'manage_options', 'custom_submenu_slug_url', 'my_custom_submenu_page');
}

function my_custom_submenu_page() 
{
	echo '<div class="wrap">';
	echo '<p>This is sub menu page under Custom Menu Title page.</p>';
	echo '</div>';
}

Here is only two important difference, one is another function name(add_submenu_page) and second is top menu slug url at first of the function. Here custom_menu_slug_url is the top menu slug url that we created at first.

How to create submenu/options menu in settings menu

It is little different than other menus/submenus code. Its name is not submenu, it is called a option in settings menu. Basic code example –

add_action( 'admin_menu', 'my_custom_option_menu' );

function my_custom_option_menu() 
{
       add_options_page( 'Option Page Title', 'Option Menu Name', 'manage_options', 'custom_option_menu_slug_url', 'my_custom_option_menu_page' );
}

function my_custom_option_menu_page() 
{
	echo '<div class="wrap">';
	echo '<p>This is a option page under settings menu.</p>';
	echo '</div>';
}