Creating WordPress Admin Pages : Custom Admin Menus

Learning to create an Admin page can be very useful for developers while creating new themes and plugins. In this article we will show you the first step in creating admin page that is making custom admin menus.

What is Admin Page?

Admin page is the essential part of Content Management System. WordPress admin page is the administrative area from where the site admin can easily make changes in their website. Usually the admin page can be accessed by going to wp-admin directory from your browser. To go to admin page of www.example.com, you have to go http://www.example.com/wp-admin/

The process of creating Admin page can be separated into three basic steps:

Step 1: Creating custom admin menus in admin area
Step 2: Writing page content
Step 3: Within the page contents, creating forms for saving the settings.

Creating WordPress Admin Pages : Custom Admin Menus

Menu entries can be of two types top-level and sub-level. If your users need to interact with your plugin daily then you can use a top-level entry. But if you are using admin page just for settings then a simple sub-level entry is more effective. Since too many top-level entries by all the plugins can complicate the users admin page so it is recommended to use top-level entry only when absolutely necessary.

Creating a top-level Admin Page

If you have decided that you need top-level-menu then you can use this process. We will be using a function called add_menu_page(). The function add_menu_page takes seven arguments.

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

Here is a explanation of each arguments.

  • $page_title: This is the text that is displayed in the title of the admin page.
  • $menu_title: This is the title of the menu which appears in the sidebar.
  • $capability: This is the capability required to access the admin page. This is used to restrict the page to certain authors, admin and editors only.
  • $menu_slug: This is the unique slug name for the page that is generally used as URL of the page. Make sure the a valid and unique slug name.
  • $function: This is a callback function that stores the content of the page. This can be optional too.
  • $icon_url: The URL of the icon displayed in the menu name is given here. You can use dashicons or your own custom icons. If you leave it blank you get the default icon. Check our article “Add dashicons in WordPress themes and Plugins
  •  $position: It is the integer that determines position of this menu in the menu order. If it is omitted, menu appears at the bottom.

Here is a complete example code to create top-level menu. You can use the code in your functions.php file.

function my_admin_menu () {
   $page_title = 'My Awesome Admin Page';
   $menu_title = 'My Admin Page';
   $capability = 'edit_posts';
   $menu_slug = 'awesome_page';
   $function = 'my_admin_page_content';
   $icon_url = '';
   $position = 110;

   add_menu_page( $page_title, $menu_title, $capability, $menu_slug, $function, $icon_url, $position );
}
 
add_action('admin_menu', 'my_admin_menu');

function my_admin_page_content(){
   echo '<h1>My Admin page</h1>';
}

In above example for simplicity we have used variables to store the value of the parameters. In the end we have used the hook add_action to hook the function my_admin_menu with the admin menu. If you use the given code correctly you should get an output similar to this.

adminn-page Custom Admin Menus

Adding submenu page

To create the sub level menu, we will be using the function called add_submenu_page.

add_submenu_page( $parent_slug, $page_title, $menu_title, $capability, $menu_slug, $function );

Here is the explanation of each arguments of the function.

  • $parent_page: This argument takes the slug of the parent page or main page.
  • $page_title: This is the title of the page of the sub menu.
  • $menu_title: This is the title or name of the sub menu.
  • $capability: Capability should be same as that of the top level menu.
  • $menu_slug: This is the slug of the menu which is displayed in the URL of the page.
  • $function: It is a callback function that includes the content of the page.
Also Read:   Create Contact Page with Ninja Forms Plugin in WordPress

Here is the example using the function add_submenu_page.

function my_admin_menu () {
   $page_title = 'My Awesome Admin Page';
   $menu_title = 'My Admin Page';
   $capability = 'edit_posts';
   $menu_slug = 'awesome_page';
   $function = 'my_admin_page_content';
   $icon_url = '';
   $position = 110;

   add_menu_page( $page_title, $menu_title, $capability, $menu_slug, $function, $icon_url, $position );
   add_submenu_page( 'awesome_page', 'My Sub Level Menu', 'Sub Level Menu', 'manage_options', 'awesome_sub_page', 'my_admin_sub_page_content' );
}

add_action('admin_menu', 'my_admin_menu');

function my_admin_page_content(){
   echo '<h1>My Admin page</h1>';
}

function my_admin_sub_page_content(){
   echo '<h1>My Admin Sub page</h1>';
}
?>

admin-sub-page Custom Admin Menus

Adding Sub Menu within any other menus

You have few more flexible ways to display the sub-level menu. Let‘s assume that you want to add sub level menu inside settings menu then you can use the add_options_page function with the following syntax.

add_options_page( $page_title, $menu_title, $capability, $menu_slug, $function);

We can add the following line in our previous example.

add_options_page( 'My Admin Page', 'Sub Level Menu', 'manage_options', 'awesome_sub_page', 'my_admin_sub_page_content' );

This will give a sub level menu inside the settings options as shown in the image.

sub-level-menu-in-setting

Similarly there are other functions that you can use to display sub-level menu in different locations.

  • add_posts_page is used for adding a sub-level menu under posts
  • add_pages_page is used for adding a sub-level menu under pages
  • add_media_page adds a sub-level menu under media
  • add_links_page is used for adding a sub-level menu under links
  • add_comments_page adds a sub-level menu under comments
  • add_theme_page adds a sub-level menu under appearance
  • add_plugin_page is used for adding a sub-level menu under plugins
  • add_users_page is used for adding a sub-level menu under users
  • add_management_page is used for adding a sub-level menu under tools
  • add_options_page is used for adding a sub-level menu under settings

 Conclusion

This article shows a simple example about adding custom admin menus entries and displaying their contents. You can use the things shown by article as the base knowledge to advance further.  We hope the article helped you to understand the first steps in creating custom admin menus and pages. Don’t forget to read our next part of this article on “Building WordPress Theme Settings Page Using the Settings API

The following two tabs change content below.
Kantiman Bajracharya

Kantiman Bajracharya

Kantiman Bajracharya is a freelance web developer. He is a computer geek who has a Bachelor’s degree in Computer Engineering. He has earned lots of satisfied customers while working for numerous successful projects. He is also a WordPress theme creator and web article writer. On free time he likes reading philosophy books, traveling and playing chess.

Share This Post