If you’re working on a theme or a plugin for WordPress and you want to highlight an active submenu item, then your implementation is going to vary based on where you want to highlight the actual item.

Active Submenu Items

An overexaggerated menu to help drive this point home.

This is one of those times where it’s helpful to have clear terminology for what you’re trying to modify:

  • Are you working on trying to highlight an active submenu in the admin menu,
  • Or are you working to highlight an active submenu on the front-end of the theme?

There’s no consistent way to do this. For what it’s worth, I don’t think they should be as they are two completely different entities (for lack of a better term). Perhaps having some semi-consistent filter names would be nice, but that’s about it.

Regardless, when you set out to highlight an active submenu item, it’s important to note which part of the project you’re working on and then go from there.

Highlight an Active Submenu in the Back-End

Menu items and submenu items can appear in two main places in WordPress:

  1. the admin menu in the back-end,
  2. the navigation for a theme on the front-end

And if you want to highlight an active submenu item for either of these, you’ll need to know how the menu system is set up and how WordPress organizes it.

If you want to highlight an active submenu item in the back-end, there is a filter that’s available, but it’s not well-documented. Still, I prefer using filters over any client-side solution because they are faster and it doesn’t matter if certain browser features are present.

Before jumping to that, it’s worth mentioning that I’m assuming:

  • you’re creating your submenu with add_submenu_page,
  • that your URL for the submenu page has query string variables

Though this may not be the case, it helps to provide a complete example (or something that may be even more of an edge case of a unique implementation).

Though your implementation may vary a bit, but the steps are still the same. Namely, you’re using add_submenu_page and you’re specifying a URL that you’ve built yourself.

At this point, you can use the parent_file filter, inspect the slug, and then return data based on the result.

See the following code:

Note that when doing this, we’re inspecting the URL based on how we specified it when we created the menu in the code above.

There’s little about this filter in the Developer Reference, but it may be worth bookmarking to refer to in the future.

Category:
Notes
Tags:

    Leave a Reply