I’ve already written dozens of WordPress plugins. In some of these plugins I use a Custom Post Types to allow users to setup and configure certain elements the way they want. When, for example, building a WooCommerce extension and I need a settings area, this could go under the WooCommerce -> Settings pages by creating a new page as in the following screenshot.
On that page I then display a custom table view where users can view/edit/add new posts. So far the WordPress admin menu is still looking fine and it appears as we’re still in the WooCommerce Settings area.
When creating a new shipping rate or editing a existing one you will be taken to a separate post page to configure the shipping rates. At this point the WooCommerce menu will no longer be highlighted as the posts page is not part of that menu item.
Highlighting a custom menu item
One solution would be to automatically highlight the menu is to move the links directly to the WooCommerce menu as a sub-menu item. As these are settings that should go under the WooCommerce -> Settings area, I did not find that the right solution.
What is the right solution is to modify the highlighted (sub-) menu items via the WordPress globals. By using the following code you can change the (sub-) menu’s that should be highlighted.
$parent_file is a global that determines which menu item should be highlighted. The value
woocommerce should match the 4th parameter (
$menu_slug) of the
$submenu_file is the second global that can be set to highlight a certain sub-menu item. The value here should match the 5th parameter (
$menu_slug) of the
The result of this will keep the WooCommerce -> Settings open when in the Custom Post Type pages:
Keeping the right menu opens gives a more integrated feeling, in my example with WooCommerce. Having that sub-menu highlighted feels like its a part of it and gives you an easier way of going back to the settings.
Please leave a comment below if this was helpful for you, or if you ran into any challenges 🙂