Kitchen Table Web Design

Affordable Website Design Auckland specialising in taking local small business websites to the next level and basic SEO Services.

  • Home
  • Services
  • Pricing
  • Process
  • Projects
  • About
  • Contact
You are here: Home / WordPress Tutorials / Stand-alone admin page for a WooCommerce Installation

Stand-alone admin page for a WooCommerce Installation

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

SupplierInvoiceList

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:

  1. 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'));
  2. 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

  3. 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

  • Learn how to optimise your Woocommerce Product Pages for SEO
  • How to speed up a slow WordPress WP_Query containing a complex OR condition
  • How to create a CPT in Genesis
  • Stand-alone admin page for a WooCommerce Installation
  • Website Care Plans
  • Website Packages for Small Business
  • Web Design for Non Profits
  • Website Pricing
  • Website Building Process
  • Website Design Case Studies
  • Articles
  • Blog
  • Technical Tutorials
  • Privacy Policy
  • Facebook
  • LinkedIn
  • Pinterest
3/355 Manukau Road
Epsom 1023
Phone: 0276082001
Email: tarnya@buildyourwebsite.co.nz

Copyright © 2021 Build Your Website with Kitchen Table Web Design