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.

For information on managing navigation menus, see the Navigation Menus chapter of the Theme Developer's Manual.

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.

It is recommended that plugin developers add the Settings Options page added by the plugin as a sub-menu of "Settings" or "Tools".

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.

It is recommended to use a DIV to include our HTML content.
<?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
);
Removing menus will not prevent users from accessing them directly; never employ this action to limit user functionality.

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.

It is recommended to use a DIV to include our HTML content.
<?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.

Delete submenu

Deleting a sub-menu is the same as deleting a top-level menu.

We offer WordPress Themes and Plugins Custom Development Services

This site has long undertaken WordPress themes, plugins, WooCommerce-based store mall development business. We have 10 years of experience in WordPress development, if you want to Developing Websites with WordPress, please contact WeChat: iwillhappy1314 or email: amos@wpcio.com for inquiries.

发表回复

Your email address will not be published. 必填项已用 * 标注

*