WordPress Plugin Development Tutorial Manual - Admin Menu
The Admin Menu is a menu of backend administrative features displayed on the left side of the WordPress backend that allows us to add a custom settings options page for a plugin or theme.
Top level menus and sub-menus
The top level menu is displayed on the left side of the WordPress backend and can contain a set of submenus. Whether the plugin needs to add a top-level menu or a sub-menu can be determined based on the end-user's needs.
Top Menu
Add a top level menu
If we need to add a top-level menu to the WordPress backend, we can use the add_menu_page() function.
<?php
add_menu_page(
string $page_title,
string $menu_title, string $capability, string $capability, string $capability
string $capability, string $menu_slug, string $menu_slug
string $menu_slug, callable $function
callable $function = '',
string $icon_url = '',
int $position = null
);
typical example
For example, we need to add a top level menu called "WPOrg".
initial stepWe need to create a function that outputs HTML, in which we perform the necessary security checks and use the Setting up the API Show us the registration options.
<?php
function wporg_options_page_html() {
// check user capabilities
if (!current_user_can('manage_options')) {
return;
}
?>
<div class="wrap">
<h1><?= esc_html(get_admin_page_title()); ?></h1>
<form action="/en/options.php/" method="post" data-trp-original-action="options.php">
<?php
// output security fields for the registered setting wporg_options
settings_fields('wporg_options');
// output setting sections and their fields
// (sections are registered for wporg, each field is registered to a specific section)
do_settings_sections('wporg');
// output save settings button
submit_button('Save Settings');
?>
<input type="hidden" name="trp-form-language" value="en"/></form>
</div>
<?php
}
second stepIn order to do this, we need to mount the above HTML generation function on top of the admin_menu Action hook.
<?php
function wporg_options_page() {
add_menu_page(
'WPOrg'.
'WPOrg Options',
'manage_options'.
'wporg'.
'wporg_options_page_html',
plugin_dir_url(__FILE__) . 'images/icon_wporg.png',
20
);
}
add_action('admin_menu', 'wporg_options_page');
Creating HTML with PHP
The best practice for portable code is to create a callback function that needs to contain a file. For the sake of completeness and to help understand legacy code, we'll use an alternative method of registering menus: passing a file path as the $menu_slug parameter to the $function parameter.
<?php
function wporg_options_page()
{
add_menu_page(
'WPOrg'.
'WPOrg Options',
plugin_dir_path(__FILE__) . 'admin/view.php',
null,
plugin_dir_url(__FILE__) . 'images/icon_wporg.png',
20
);
}
add_action('admin_menu', 'wporg_options_page');
Delete Top Menu
If we need to remove a top-level menu that has been registered in the backend, we can use the remove_menu_page() function.
remove_menu_page(
string $menu_slug
);
typical example
For example, we need to remove the "Tools" top-level menu from the WordPress backend.
<?php
function wporg_remove_options_page(){
remove_menu_page('tools.php');
}
add_action('admin_menu', 'wporg_remove_options_page', 99);
Before deleting, we need to make sure that we have registered this menu, so deleting Actions should have a lower priority than registering them.
submenu
If we need to add a submenu to the WordPress backend, use the add_submenu_page() function.
<?php
add_submenu_page(
string $parent_slug,
string $parent_slug, string $page_title, string $menu_title, string $parent_slug
string $menu_title, string $parent_slug, string $page_title, string $menu_slug
string $capability, string $menu_title
string $menu_slug, callable $function
callable $function = ''
);
typical example
Let's say we need to add a submenu to the "Tools" top-level menu: "WPOrg Settings"
initial stepWe will create a function that outputs HTML, in which we perform the necessary security checks using the Setting up the API Shows the options we have registered.
<?php
function wporg_options_page_html() {
// check user capabilities
if (!current_user_can('manage_options')) {
return;
}
?>
<div class="wrap">
<h1><?= esc_html(get_admin_page_title()); ?></h1>
<form action="/en/options.php/" method="post" data-trp-original-action="options.php">
<?php
// output security fields for the registered setting wporg_options
settings_fields('wporg_options');
// output setting sections and their fields
// (sections are registered for wporg, each field is registered to a specific section)
do_settings_sections('wporg');
// output save settings button
submit_button('Save Settings');
?>
<input type="hidden" name="trp-form-language" value="en"/></form>
</div>
<?php
}
second stepIf you want to generate HTML, you need to mount the above HTML generation function to the admin_menu Action hook.
<?php
function wporg_options_page() {
add_submenu_page(
'tools.php',
'WPOrg Options'.
'WPOrg Options',
'manage_options'.
'wporg'.
'wporg_options_page_html'
);
}
add_action('admin_menu', 'wporg_options_page' );
For the parameters of add_submenu_page, see the reference to the add_submenu_page()The
Predefined submenus
WordPress built-in some auxiliary functions, in advance to help us set up a good $parent_slug parameter, we just need to use the appropriate function to add the page as we need to add a sub-menu of the top menu. Here are the auxiliary functions that WordPress has defined for us.
- add_dashboard_page() –
index.php
- add_posts_page() –
edit.php
- add_media_page() –
upload.php
- add_pages_page() –
edit.php?post_type=page
- add_comments_page() –
edit-comments.php
- add_theme_page() –
themes.php
- add_plugins_page() –
plugins.php
- add_users_page() –
users.php
- add_management_page() –
tools.php
- add_options_page() –
options-general.php
- add_options_page() –
settings.php
- add_links_page() –
link-manager.php
- WP 3.5 onwards requires a plugin to work. - Custom Article Types -
edit.php?post_type=wporg_post_type
- Network Administrator -
settings.php
Delete submenu
Deleting a sub-menu is the same as deleting a top-level menu.