If you want to add a submenu item to a custom post type menu, you should easily get this done using a simple code snippet. Ideally, custom post type menu has its default add a new post, taxonomy and all posts menu but it is possible to add another submenu item to a WordPress settings admin page.
Before you learn how to add submenu to custom post type menu it is important, you understand how to register custom post type in WordPress without using a plugin.
You need the slug of the custom post type as one of the parameters of the add_submenu_page() function for you to display the submenu under the custom post type menu. So let us begin by a quick review on how to register a custom post type in WordPress theme.
Registering a Custom Post Type
Although, I explained all the details on how to add a custom post type to WordPress in that post; I will quickly share the code that you need to add a custom post type in WordPress. The code that registers a custom post type is as follows:
/**
* Custom Post Type - register_post_type()
* @description- Njengah Tutorial Custom Post Type Example
* @link -https://gist.github.com/Njengah/839466b773085ac2430772e081357cee
*
*/
add_action('init', "njengah_tutorial_cpt");
function njengah_tutorial_cpt(){
$labels = array(
'name' => _x('Tutorials', 'post type general name'),
'singular_name'=> _x('Tutorial', 'post type singular name'),
'menu_name' => _x('Tutorials', 'admin menu'),
'name_admin_bar' => _x('Tutorial', 'add new on admin bar'),
'add_new' => _x('Add New', ''),
'add_new_item' => __('Add New tutorial'),
'edit_item' => __('Edit Tutorial'),
'new_item' => __('New Tutorial'),
'all_items' => __('All Tutorial'),
'view_item' => __('View Tutorial'),
'search_items' => __('Search Tutorials'),
'not_found' => __('No Tutorials found'),
'not_found_in_trash' => __('No Tutorials found in Trash'),
'parent_item_colon' => __('Parent tutorials:'),
);
$args = array(
'hierarchical' => true,
'labels' => $labels,
'public' => true,
'publicly_queryable' => true,
'description' => __('Description.'),
'show_ui' => true,
'show_in_menu' => true,
'show_in_nav_menus' => true,
'query_var' => true,
'rewrite' => true,
'query_var' => true,
'rewrite' => array('slug' => 'tutorial'),
'capability_type' => 'page',
'has_archive' => true,
'menu_position' => 22,
"show_in_rest" => true,
'supports' => array( 'title', 'editor', 'author', 'thumbnail', 'revisions', 'page-attributes', 'custom-fields' )
);
register_post_type('tutorial', $args);
}
You should add this code to the functions.php file of your child theme and the custom post type should be seen in your dashboard as shown in the image below:
This code can also be added to a custom WordPress plugin to register the custom post type. You should also replace the ‘tutorial’ keyword in the code with your respective custom post type name, example ‘book’, ‘movie’ etc.
Add Submenu to Custom Post Type Menu
Now we want to focus on how to add the submenu page under the custom post type menu.
For a quick overview, the following are the steps that you should undertake to add a submenu item to the custom post type menu:
- Create an action hook to register the submenu with the respective callback functions. In this case, there are two functions to be created.
- Replace the first parameter of the add_submenu_page( ) with the specific edit post type slug example php?post_type=’name-of-your-post-type-slug’
- Add the code in the php and you will have successfully added the submenu to custom post type.
Add Submenu Page Function
This function add_submenu_page is used to add submenu in all the admin menu pages and you can use the remove_submenu_page function to remove submenu from WordPress admin.
The add_submenu_page () function by default takes 7 parameters and the general code can be express as follows:
add_submenu_page(
string $parent_slug,
string $page_title,
string $menu_title,
string $capability,
string $menu_slug,
callable $function = '',
int $position = null
)
The add submenu page function parameters can be described as follows:
| Parameter | Description |
| $parent_slug | This is the slug name for the parent menu example, in this case, it will be edit.php?post_type =’tutorials’ |
| $page_title | The text to be displayed in the title tags example ‘tutorials subpage example’ |
| $menu_title | The text to be displayed in the submenu that we are creating example ‘ Tutorials’ |
| $capability | The WordPress role capability of users who can access this menu example ‘administrators’ |
| $menu_slug | This is the slug of the page we will be creating example ‘ tutorials_subpage_example’ |
| $function | The callback function that will display the information we want on the subpage we are creating. Example a title ‘ Tutorials Subpage Example’ |
| $position | This is the position of the menu item relative to the other submenus; you can use this number to push the menu up and down to suit your preference. |
For illustration in this tutorial we will be added submenu page to the tutorials custom post we create above and as shown in the image below:
Add Custom Post Type Slug to the Parent Slug Parameter
To register our submenu we should add the following code to the functions.php file below where we added the code to register tutorials custom post type:
/**
* Custom Post Type add Subpage to Custom Post Menu
* @description- Njengah Tutorial Custom Post Type Submenu Example
* @link - https://gist.github.com/Njengah/0764f2c88742c19b67a212c914c9f25f
*
*/
// Hook
add_action('admin_menu', 'add_tutorial_cpt_submenu_example');
//admin_menu callback function
function add_tutorial_cpt_submenu_example(){
add_submenu_page(
'edit.php?post_type=tutorial', //$parent_slug
'Tutorial Subpage Example', //$page_title
'Tutorial Settings', //$menu_title
'manage_options', //$capability
'tutorial_subpage_example',//$menu_slug
'tutorial_subpage_example_render_page'//$function
);
}
//add_submenu_page callback function
function tutorial_subpage_example_render_page() {
echo '<h2> Tutorial Subpage Example </h2>';
}
When you add the code to the functions.php or your plugin base file, you should see the Tutorials settings is added as shown below and with all the respective parameters discussed above and as illustrated on the image below:
Joe is an experienced full-stack web developer with a decade of industry experience in the LAMP & MERN stacks, WordPress, WooCommerce, and JavaScript – (diverse portfolio). He has a passion for creating elegant and user-friendly solutions and thrives in collaborative environments. In his spare time, he enjoys exploring new tech trends, tinkering with new tools, and contributing to open-source projects. You can hire me here for your next project.
Conclusion
You can easily add this code to the functions.php of your theme and adjust accordingly to successfully add submenu to the custom post type menu. The take away from this tutorial is adding the custom post type slug as the parent slug of add_submenu_page function will result in adding the submenu page under the custom post type menu. I hope you can use this solution in your WordPress theme development especially where you need some settings page for specific custom post types; this is certainly the ideal solution.