Adding your own management menu to WordPress ① Adding a top menu

Hello, I'm Wakatchi ( @wakatchi_tech )

Is there a way to save settings for a blog created with WordPress?

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.

For site-specific settings, we recommend developing your own WordPress admin menu. Site setting values (parameters) can be changed by modifying the source code such as function.php using a plugin editor. However, if the source code is under version control or if the site operator is not good at coding, constant changes to the source code may not be healthy.

You can easily create an admin menu by simply calling functions provided by WordPress. Also, unlike the front-end screen that is open to site users, the management menu does not require much design, as a simple screen for site operators is sufficient.

In this article, we will show you how to add your own admin menu to WordPress.

Code the WordPress admin menu with PHP

WordPress admin menus are coded in PHP using functions provided by WordPress. After a quick look, there aren't any plugins that allow you to flexibly configure the WordPress admin menu without any coding.

Using the admin menu is useful not only when developing WordPress themes and plugins, but also when developing a single site. As mentioned above, settings related to site operation can be written in source code, such as function.php, but it is not healthy to constantly change settings related to site behavior in source code. Source code and configuration values should be separated.

The key to deciding whether to develop a management menu is who (developer? operator?) will be changing the site settings.

Add the admin menu to WordPress using add_menu_page(). Let's take a closer look here.

Add an admin menu to WordPress

The WordPress admin menu is the user interface displayed on the WordPress admin screen. You can add themes, plugins, and optional pages for your site.

The management menu has a top menu and submenus. Whether to use the top menu or a submenu is decided based on the characteristics of the plug-in and the needs of the user. Adding a top menu will give you your own top menu on the left side of the WordPress admin console. If you only add a submenu, the existing top menu will have its own submenu.

In this article, we will introduce a sample that adds a management menu called "Test Top Menu" to the WordPress management console and displays a screen called "Test Option Settings" as shown below.

The above screen can be incorporated into WordPress using the source code below.

<?php
add_action('admin_menu', function(){
	add_menu_page(
		'admin menu title'
		, 'Test Top Menu'
		, 'manage_options' 
		, 'test_top_menu' 
		, 'test_menu_contents'
		, 'dashicons-calendar'
		,0
	);
});

function test_menu_contents() {
 	// your HTML output code
}

Add top menu

Add the function that adds the admin menu to the WordPress top menu to the action hook name admin_menu using add_action().

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

Furthermore, implement the function to add an admin menu using add_menu_page().

$hook = add_menu_page(
    string $page_title,
    string $menu_title,
    string $capability,
    string $menu_slug,
    callable $function = '',
    string $icon_url = '',
    int $position = null
);

それではadd_menu_page()の引数をみてみましょう。

Implement a function to generate the page displayed in the top menu. In the sample in this article, only the title and a simple string are displayed.

<?php
add_menu_page(
	'admin menu title'
	, 'Test Top Menu'
	, 'manage_options' 
	, 'test_top_menu' 
	, 'test_menu_contents'
	, plugins_url(　'myplugin/assets/icon.png') 
	,0
	);

function test_menu_contents() {
		?>
	<div class="wrap">
		<h1>Test Option Settings</h1>
		<p>Hello admin menu !!</p>
	</div>
	<?php
}

summary

This time, we introduced how to add an admin menu to the WordPress admin console. It requires implementation using PHP, but I think you'll find it easier than you expected.

Since the management menu is a simple screen for site operators, it is better to focus on functionality rather than design.

In Parts 2 to 4, we will introduce how to create submenus and management screens, how to update settings, etc., so please take a look.

WordPressに独自のサブメニューの追加する

2023年10月20日

WordPressに値を設定する独自の管理メニューを追加する

2023年10月25日

WordPressにデータを取得する独自の管理メニューを追加する

2023年10月27日

The official website for WordPress developers introduces how to develop a management menu for the plugin handbook. Please refer to this article as well.

Administration Menus – Plugin Handbook | Developer.WordPress.org

Administration Menus are the interfaces displayed in WordPress Administration. They allow you to add option pages for your plugin. Top-Level…

WordPress Developer Resources

I hope this article is of some help.

Thank you for reading to the end!