I’m busy with a WooCommerce installation on a WordPress Website. As part of the job, I needed to show a page in the WordPress admin section that does not have a menu option. Most of the time when I add something to the admin section it’s a list with an edit page, but this time I needed a separate page on which the user could perform some action. My list is a summary of WooCommerce Commission records grouped by vendor, so the list is already not 1-to-1 to the database records and when you click on a grouped record, I want to take the user to a new page where I could show a Customer Generated Invoice which can be sent to the vendor.

In other words, I wanted an action to hang off a WordPress admin list which is not the usual post.php used for editing a post, page or Custom Post Type. It’s really a very common requirement, but somehow I struggled to make the connection between the action on my list page and a method within my plugin class that would render the new page. The part that I was missing was to have an add_submenu_page without a parent slug.

I have an admin list which shows a single row per supplier (WooCommerce vendor) together with the Commission owed to that supplier, even though the commission might be made up of multiple records. When you hover your mouse over a supplier, it shows a “View Invoice” action below that supplier

My objective was that when you click on that View Invoice action, I want to display a page which is rendered by a function in my plugin. But how do you link up that action to your own function? Pretty simple really and as I’ve already mentioned, the missing piece of the puzzle was to use add_submenu_page() without a parent slug.

So you have the usual stuff:

Hook into the WordPress admin_menu hook and call a function in your plugin class
```
add_action('admin_menu', array($this, 'commission_add_menu_items'));
```

Within your menu function, call add_submenu_page() without a parent slug

    function commission_add_menu_items(){
        ...
        add_submenu_page( NULL, 'Supplier Invoice', 'Supplier Invoice', 'manage_woocommerce', 'commission_render_invoice', array( $this, 'commission_render_invoice') );
        ...
    }

Notice the NULL as the first parameter, which is the parent slug. And the last argument is a reference to the function I want to use to render this page

Within your render function, output the HTML that you want on your new page

    function commission_render_invoice(){
        echo "Your page content here";
    }

And the last part of the puzzle is how to tell the action link on the list page to call this specific page. When you click on the View Invoice on the list page, the URL is as follows

https://localhost:86/mobileart/wp-admin/edit.php?post_type=ma_masterorder&page=commission_render_invoice&action=view&artist=9

The page=commission_render_invoice needs to be the same as the menu_slug of the add_submenu_page function call, which is the 5th parameter.

add_submenu_page( NULL, 'Supplier Invoice', 'Supplier Invoice', 'manage_woocommerce', 'commission_render_invoice', array( $this, 'commission_render_invoice') );

Read More