How to add multi-level menu functionality to WordPress plugin

How to add multi-level menu functionality to WordPress plug-ins

In WordPress, plug-ins are an important part of extending website functionality. By default, WordPress provides some menu features such as top navigation menu and sidebar menu. However, sometimes we need to add custom multi-level menu functions to our plug-ins to facilitate users to access various functions of the plug-in.

This article will teach you how to add multi-level menu functionality to a WordPress plugin and provide some code examples. I hope it will be helpful to your plug-in development work.

Step 1: Create a plug-in menu page

First, we need to create a page to be used as a plug-in menu. In WordPress, this can be achieved by calling the add_menu_page() function.

function my_plugin_menu_page() {
    add_menu_page(
        'My Plugin',     // 页面标题
        'My Plugin',     // 菜单标题
        'manage_options', // 用户权限
        'my-plugin',     // 菜单 slug
        'my_plugin_menu_callback', // 页面回调函数
        'dashicons-admin-plugins', // 菜单图标
        99 // 菜单位置
    );
}
add_action( 'admin_menu', 'my_plugin_menu_page' );

In the above code, we use the add_menu_page() function to create a menu page named "My Plugin". my_plugin_menu_callback in the parameters is our custom page callback function, which is used to render the content of the menu page.

Step 2: Add submenu items

If we want to add a multi-level menu function, we can use the add_submenu_page() function to achieve it. Here is a sample code:

function my_plugin_submenu_page() {
    add_submenu_page(
        'my-plugin', // 父菜单 slug
        'Submenu Page', // 子菜单标题
        'Submenu Page', // 页面标题
        'manage_options', // 用户权限
        'my-plugin-submenu', // 子菜单 slug
        'my_plugin_submenu_callback' // 页面回调函数
    );
}
add_action( 'admin_menu', 'my_plugin_submenu_page' );

In the above sample code, we use the add_submenu_page() function to create a submenu item named "Submenu Page". my_plugin_submenu_callback in the parameters is our customized submenu page callback function.

Step 3: Customize the content of the menu page

Now, we need to add customized content to the menu page. Here is a sample code:

function my_plugin_menu_callback() {
    echo '<h1 id="My-Plugin-Menu">My Plugin Menu</h1>';
    echo '<p>Welcome to My Plugin Menu. You can add your content here.</p>';
}

function my_plugin_submenu_callback() {
    echo '<h1 id="Submenu-Page">Submenu Page</h1>';
    echo '<p>Welcome to Submenu Page. You can add your content here.</p>';
}

In the above sample code, we have added some simple HTML content in the page callback function. You can customize the content of the menu page according to your needs.

Step 4: Add more submenu items

If we need to add multiple submenu items, we can call the add_submenu_page() function repeatedly. The following is a sample code:

function my_plugin_submenu_page() {
    add_submenu_page(
        'my-plugin', // 父菜单 slug
        'Submenu Page 1', // 子菜单标题
        'Submenu Page 1', // 页面标题
        'manage_options', // 用户权限
        'my-plugin-submenu1', // 子菜单 slug
        'my_plugin_submenu_callback1' // 页面回调函数
    );

    add_submenu_page(
        'my-plugin', // 父菜单 slug
        'Submenu Page 2', // 子菜单标题
        'Submenu Page 2', // 页面标题
        'manage_options', // 用户权限
        'my-plugin-submenu2', // 子菜单 slug
        'my_plugin_submenu_callback2' // 页面回调函数
    );
}

// 页面回调函数
function my_plugin_submenu_callback1() {
    echo '<h1 id="Submenu-Page">Submenu Page 1</h1>';
    echo '<p>Welcome to Submenu Page 1. You can add your content here.</p>';
}

function my_plugin_submenu_callback2() {
    echo '<h1 id="Submenu-Page">Submenu Page 2</h1>';
    echo '<p>Welcome to Submenu Page 2. You can add your content here.</p>';
}

In the above code, we use the add_submenu_page() function to create two submenu items respectively, and specify different submenu slugs and pages respectively. Callback.

Summary

Through the above steps, we can add multi-level menu functionality to the WordPress plugin. First, create the plug-in menu page through the add_menu_page() function; then, add submenu items through the add_submenu_page() function; finally, add content to the menu page through the custom page callback function .

I hope this article can help you implement multi-level menu functionality in WordPress plug-in development. Remember to follow best practices and security principles when developing plugins.

The above is the detailed content of How to add multi-level menu functionality to WordPress plugin. For more information, please follow other related articles on the PHP Chinese website!