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.

This article is recommended for

  • WordPress site developers who want to configure the entire site from the WordPress admin screen
  • WordPress theme and plugin developer
目次

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.

Information

Here is a screenshot of the WordPress Dashboard (in Japanese). However, for multilingual purposes, the following Japanese text has been translated as follows:

  • 管理メニュータイトル → admin menu title
  • テスト用トップメニュー → Test Top Menu
  • テスト用オプション設定 → Test Option Settings

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()の引数をみてみましょう。

add_menu_page()の引数

  • $page_title (required)
    The text that appears in the page's title tag when the menu is selected.
  • $menu_title (required)
    Text used for the menu title.
    In the sample in this article, "Test Top Menu" is displayed on the left side of the WordPress management console.
  • $capability (required)
    Permissions required to display this menu to users.
    The sample in this article grants the managed_options permission, which allows access to the management menu.
  • $menu_slug (required)
    Slug name to refer to this menu.
    Must be unique for this menu page. Additionally, only lowercase alphanumeric characters, dashes, and underscore characters are allowed.
  • $function (optional)
    Function called to output the content of this page.
  • $icon_url (optional)
    URL to the icon used for this menu.
    Pass the URL to the icon included in the plugin using the plugins_url function.
    You can also use Dashicons font icons. The sample in this article uses the calendar icon dashicons-calendar.
  • $position (optional)
    The position in the menu order in which this item appears.
    By default it is at the bottom of the admin menu structure. In the sample of this article, it is specified and displayed at the top. Please refer to the following to determine where to place it in the menu structure.
    • 2 – Dashboard
    • 4 – Separator
    • 5 – Post
    • 10 – Media
    • 15 – Link
    • 20 – Page
    • 25 – Comments
    • 59 – Separator
    • 60 – Appearance
    • 65 – Plugins
    • 70 – User
    • 75 – Tools
    • 80 – Settings
    • 99 – Separator
  • $hook_suffix (optional)
    Prefix of the function that receives the processing results of the page displayed in this management menu.

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!

Categories
Blog Management and WordPress
Tags
Previous article
Observability and OpenTelemetry in Microservices Architecture
2022年8月5日
Next article
Adding your own submenu to WordPress
2023年10月20日