Create A Custom Admin Menu With Admin Page WordPress

Custom Admin Menu With Admin Page WordPress

Do you want to create a custom admin menu with admin page in WordPress? In this article, We will show you how to easily add a custom admin menu in WordPress and also creating an admin page for displaying content or dashboard.

As we know WordPress provides a lot of hooks for customizing WordPress. By using which we can easily add a custom admin menu or admin page. So, for doing this we’ll use ‘admin_menu’ hook for adding admin menu. And for admin page will use add_menu_page hook with add_action filter.

Here are the hooks with an explanation For Custom Admin Menu.

do_action( 'admin_menu', string $context )

add_menu_page( 
              string $page_title, 
              string $menu_title, 
              string $capability, 
              string $menu_slug, 
              callable $function = '', 
              string $icon_url = '', 
              int $position = null )

You may also refer https://developer.wordpress.org/reference/functions/add_menu_page/

First, we create a custom admin menu by using the admin_menu hook. So you just need to copy the code snippet and paste it to functions.php file.

function my_admin_menu() {
		add_menu_page(
			__( 'Notice', 'my-project' ), // Page Title 
			__( 'Notice', 'my-project' ), // Menu Title
			'manage_options', // Capability
			'notice', // Menu Slug
			'my_admin_page_contents', // Page Callback function
			'dashicons-schedule', // Dashicon
			3 // Menu Position
		);
	}
add_action( 'admin_menu', 'my_admin_menu' );

The above code will create an admin menu named “Notice”. Now let’s create an admin page for Notice menu. Doing that we just need to make a new function named “my_admin_page_contents”.

We have already called this function from the above code so here we just need to specify the function and that will generate a page. Just copy the below code to functions.php file.

function my_admin_page_contents() {
?>
  // Here you can use your own html or php content to make the page more organize
  <h1>
    <?php esc_html_e( 'Welcome to my custom admin page.', 'my-plugin-textdomain' ); ?>
  </h1>
<?php
}

How you can find the menu positioning for the menu. So don’t worry about that WordPress uses the positioning sequence which is shown below

    5 - below Posts
    10 - below Media
    15 - below Links
    20 - below Pages
    25 - below comments
    60 - below first separator
    65 - below Plugins
    70 - below Users
    75 - below Tools
    80 - below Settings
    100 - below second separator

If you want to add admin submenu so you just have to use the add_submenu_page() hook. but all built-in top-level pages have their own functions:

posts use add_posts_page
pages use add_pages_page
media use add_media_page
links use add_links_page
comments use add_comments_page
appearance use add_theme_page
plugins use add_plugin_page
users use add_users_page
tools use add_management_page
settings use add_options_page

Here is the example, how we can use the above functions.

add_action( 'admin_menu', 'my_admin_menu' );

function my_admin_menu() {
	add_menu_page( 
               'My Top Level Menu Example', 
               'Top Level Menu', 
               'manage_options', 
               'myplugin/myplugin-admin-page.php', 
               'myplguin_admin_page', 
               'dashicons-tickets', 6  );
	add_submenu_page( 
               'myplugin/myplugin-admin-page.php', 
               'My Sub Level Menu Example', 
               'Sub Level Menu', 
               'manage_options', 
               'myplugin/myplugin-admin-sub-page.php', 
               'myplguin_admin_sub_page' ); 
}

You may also want to see our list WordPress functions.php File Tips & Tricks.

We hope this article helped you to create an admin menu with an admin page in WordPress. If you have any questions about the admin menu and WordPress customization so please comment below.

Leave a Reply