Submenus
Much like top-level menus, WP Headless allows you to easily add submenus via the submenus.php
configuration file.
Submenu config entries accept the same parameters as the WordPress function add_submenu_page().
[
'parent_slug' => 'movie-settings',
'page_title' => 'Movie Submenu',
'menu_title' => 'Movie Submenu',
'capability' => 'manage_options',
'menu_slug' => 'movie-submenu',
'callback' => 'menu-page.php',
'args' => [],
],
WP Headless is packaged with a base menu-page.php
view template for displaying submenu pages which is set as the callback
in the example above. You may modify that file or add your own if you wish.
Callbacks
While setting the callback
parameter to the name of the view template should suffice in most cases here, we recommend you read the callback section for clarification on setting the callback
parameter for more complex cases.
Default Top-Level WordPress Menu Submenus
If you wish to add a submenu to a default top-level WordPress menu page, you can simply set the parent_slug
parameter to the name of the menu (case sensitive).
'parent_slug' => 'Dashboard',
'parent_slug' => 'Posts',
'parent_slug' => 'Media',
'parent_slug' => 'Pages',
'parent_slug' => 'Comments',
'parent_slug' => 'Appearance',
'parent_slug' => 'Plugins',
'parent_slug' => 'Users',
'parent_slug' => 'Tools',
'parent_slug' => 'Settings',
Custom Post Type Submenus
If you wish to add a submenu to a custom post type, you can set the parent_slug
to the relative URL of the post type's top-level menu page.
'parent_slug' => 'edit.php?post_type=your_post_type'
Vue.js Support
Default WP Headless menu pages include Vue support. If you wish to include a Vue component, you can pass an additional vue_id
parameter to the configuration's optional args
parameter.
'args' => [
'vue_id' => 'app'
],
Note you will also need to enqueue the applicable javascript files for the submenu page.