Add a submenu page under WordPress Settings menu

In WordPress plugin development, it is often required to add a submenu page. You may find many plugins that have a submenu page under the WordPress settings menu just like you can see below:

WordPress Settings Submenu

The main purpose of creating a submenu page is to keep all the plugin options and settings. From this option or settings page, WordPress user can use it as a requirement.

So, now in this tutorial, I am going to show you how you can also create your own submenu page under the dashboard Settings menu.

 

WordPress add_submenu_page() function

Before we go forward, let me introduce you to the add_submenu_page() function. This function is inside the WordPress core to let us create custom submenu pages. Using, this function, you can create submenu under any main dashboard menu.

The syntax for add_submenu_page is given below:

add_submenu_page( string $parent_slug, string $page_title, string $menu_title, string $capability, string $menu_slug, callable $function = '' )

Learn more about this function from official WordPress add_submenu_page documentation.

 

Create WordPress submenu for the Settings main menu

Now let’s create your first submenu for the main menu settings in the WordPress dashboard.

Without wasting any more time, let’s write our code:

add_action("admin_menu", "cspd_imdb_options_submenu");
function cspd_imdb_options_submenu() {
  add_submenu_page(
        'options-general.php',
        'IMDB Movie Option - TMDB API',
        'Movie Option',
        'administrator',
        'cspd-imdb-options',
        'cspd_imdb_settings_page' );
}

Finally, our code will add a submenu under Settings menu of WordPress just like you can see in the picture below:

WordPress settings submenu

As a result of our code, we can see the “Movie Option” submenu under the WordPress “Settings” menu. You can give any name of your submenu just by passing the name to the add_submenu_page() function.

In our code, we use admin_menu and pass the function. Inside the function, we have used the add_submenu_page function and pass some arguments.

Probably you would like to click the submenu after you see this. But, seems like it is going to show the error after you click the submenu:

Warning: call_user_func_array() expects parameter 1 to be a valid callback, function ‘cspd_imdb_settings_page’ not found or invalid function name in D:\xampp\htdocs\frk\wp\latestwp\wp-includes\class-wp-hook.php on line 286

This is because we have not created our function cspd_imdb_settings_page which is going to contain all our page contents.

Now let’s create the function with some dummy content inside it:

function cspd_imdb_settings_page() { ?>

  <h1>This is the page content</h1>

<?php } ?>

Now if we click our submenu, we will see a page that contains the content that we have just passed through our function.

Finally, we are able to create our submenu page that contains some content. We can do furthermore with our submenu page. But this post is just to show you the basics of creating a submenu page under the settings menu.

I hope, this post becomes helpful to understand how to create WordPress submenu for settings.

Leave a Reply

Your email address will not be published. Required fields are marked *