Most of the plugins we use in WordPress probably have a Settings page that allows users to set up or update options according to their preferences. This can increase your plugin’s usability. In this article, we will show you how to create a custom Settings page and its submenu easily with Settings API.
Register the plugin menu to admin’s panel menu
First of all, we need to inform to WordPress that we want to add our plugin’s submenu by using the admin_menu hook
function define_admin_hooks() {
add_action( 'admin_menu', 'your_callback_handle_menu' );
}
In your_callback_handle_menu function, we need to use add_menu_page function to render the menu page.
add_menu_page('Your Page Title', 'Your Menu Title', 'administrator', 'your-menu-slug', 'function_to_render_setting_ui', 'dashicons-smiley')
Cool! We’ve just created our menu page with empty content. Next, we will add some content in “Your menu title” settings page.
Render UI to the custom Settings page
In order to create content for the newborn menu page, we will add some snippets in the above callback function function_to_render_setting_ui.
function_to_render_setting_ui() {
?>
<h3>Your Plugin Settings Page<h3>
<div>Add HTML and CSS here to make our life look more beautiful</div>
<?php
}
Now your settings page should look like the below image.
Let’s have a look at the entire source code:
Congratulations! We’ve just finished creating our own plugin settings page with few super easy steps. Thanks for reading and subscribe to our email list to receive more WordPress tips and tricks.
