Adding your own submenu to WordPress

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.

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 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.

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!