Hello, I'm Wakatchi ( @wakatchi_tech )

When running a site developed with WordPress, you may want to save the site's unique settings or change the settings while operating the site.

In the previous article, we introduced how to add a top menu to WordPress.

WordPressに独自の管理メニューを追加する① トップメニューの追加

サイト独自の設定は、WordPressの管理メニューを独自に開発することをお勧めします。サイトの設定値（パラメーター）は、プラグインエディタなどを使いfunction.phpなどの…

わかっちウォッチ

In this article, we will show you how to add a submenu in WordPress, following on from the top menu we introduced previously.

この記事は次のような方にお勧めです

  • WordPress site developers who want to configure site-wide settings from the WordPress administration menu
  • WordPress theme and plugin developer
Table of Contents

Adding a new submenu to WordPress

Add a submenu called "Submenu Sample" to the administration menu called "Top Menu Sample" that you added to the WordPress administration console. A submenu is a page included in the top menu.

You can embed a submenu in WordPress using the source code below.
Try copying and pasting it directly into function.php or using the Code Snippets plugin.

<?php
add_action(
	'admin_menu',
	function(){
        add_menu_page(
            '管理メニュータイトル' ,
            'トップメニューサンプル' ,
            'manage_options' ,
            'top_menu_sample' ,
            'render_topmenu_contents' ,
            'dashicons-calendar' ,
            0
        );
        
        add_submenu_page(
            'top_menu_sample' ,
            'サブメニュータイトル' ,
            'サブメニューサンプル' , 
            'manage_options' , 
            'sub_menu_sample' , 
            'render_submenu_contents'
        );
    }
);

function render_topmenu_contents() {
    ?>
        <div class="wrap">
            <h1>トップメニュー設定</h1>
            <p>Hello admin TOP menu !!</p>
        </div>
    <?php
}

function render_submenu_contents() {
    ?>
        <div class="wrap">
            <h1>サブメニュー設定</h1>
            <p>Hello admin SUB menu !!</p>
        </div>
    <?php
}

Add a submenu to the top menu

You can incorporate submenus into the top menu created with add_menu_page() by using add_submenu_page().

Add top menu

Add a function to add an admin menu to the hook named admin_menu using add_action().

<?php
add_action(
    'admin_menu',
    function(){
        // your code
    }
);

In the function to add the admin menu, implement adding the admin menu using add_menu_page().

<?php
add_menu_page(
    '管理メニュータイトル' , 
    'トップメニューサンプル' , 
    'manage_options' , 
    'top_menu_sample' , 
    'render_topmenu_contents' , 
    'dashicons-calendar' ,
    0
);

function render_topmenu_contents() {
    ?>
        <div class="wrap">
            <h1>トップメニュー設定</h1>
            <p>Hello admin TOP menu !!</p>
        </div>
    <?php
}

For information on the arguments and return values ​​of add_menu_page(), please refer to the previous article.

WordPressに独自の管理メニューを追加する① トップメニューの追加

サイト独自の設定は、WordPressの管理メニューを独自に開発することをお勧めします。サイトの設定値（パラメーター）は、プラグインエディタなどを使いfunction.phpなどの…

わかっちウォッチ

Add submenu

Add a submenu to the admin menu you added using add_submenu_page().

<?php
add_submenu_page(
    'top_menu_sample' ,
    'サブメニュータイトル' ,
    'サブメニューサンプル' ,
    'manage_options' ,
    'sub_menu_sample' ,
    'render_submenu_contents'
);

function render_submenu_contents() {
    ?>
        <div class="wrap">
            <h1>サブメニュー設定</h1>
            <p>Hello admin SUB menu !!</p>
        </div>
    <?php
}

Now let's look at the specifications of add_submenu_page().

add_submenu_page()の引数

  • $parent_slug (required)
    The parent slug name to embed the submenu in.
  • $page_title (required)
    Page title of the submenu.
    In this article, it will be displayed as "Test Top Menu" on the left side of the admin console.
  • $menu_title (required)
    The text to use for the menu title.
    In this article, "Test Top Menu" will be displayed on the left side of the admin console.
  • $capability (required)
    The capability required to display this menu to the user.
    In this article, we are granting the managed_options capability, which allows access to the administration menu.
  • $menu_slug (required)
    The slug name to refer to this menu.
    It must be unique for this menu page and can only contain lowercase alphanumeric characters, dashes, and underscores. If you specify the character specified in $parent_slug, the submenu screen will default to the top menu.
  • $function (optional)
    Function called to output the content of this page.
  • $hook_suffix
    The prefix for the function that receives the results of processing the pages displayed in this administration menu.

Add a submenu to an existing top menu

You can add submenus to the existing top menu built into WordPress by specifying the parent slug name in add_submenu_page().

You can incorporate a submenu into an existing top menu using the source code below.

<?php
add_action(
    'admin_menu',
    function(){
        add_submenu_page(
             'options-general.php', // 組み込みのトップメニュー
              'サブメニュータイトル' ,
              'サブメニューサンプル' , 
              'manage_options' , 
              'sub_menu_sample' ,
              'render_submenu_contents'
            ); 
    }
);
    
function render_submenu_contents() {
    ?>
        <div class="wrap">
            <h1>サブメニュー設定</h1>
            <p>Hello admin SUB menu !!</p>
        </div>
    <?php
}

You can change the screen that appears when you click the administration menu to a submenu.

Parent slug name type

The above mentioned source code was incorporated into the built-in settings menu.

You can also add submenus to other built-in menus by changing the parent slug, so please give it a try.

dashboardindex.php
Postedit.php
mediaupload.php
Fixed pageedit.php?post_type=page
commentedit-comments.php
themethemes.php
pluginplugins.php
userusers.php
tooltools.php
optionoptions-general.php
A list of parent slug names

summary

This time, I introduced how to add a submenu to the WordPress admin console. Like the top menu, it requires implementation using PHP, but I think it was easier than you might think.

From next time, we will be describing more practical methods, such as updating settings on the menu page and downloading data.

わかっち

The purpose of creating an administration menu is to store operational settings and allow site operators to collect data.

I hope this article is of some help.

Thank you for reading to the end!

Previous article
Adding your own management menu to WordPress ① Adding a top menu
2023年1月26日
Next article
I looked into Ultimate Member, which allows you to build a matching site for free with WordPress.
2023年10月28日