Menu Tabs in Admin Pages

3) Setup the jQuery Functionality

Three things are necessary to install the jQuery functionality in this situation.

a) Add the jQuery library

First, the jQuery library must be included in the page. This is done by including the following statement in the PHP code for the admin page, if it is not already there.

The library is loaded through the script queue so as to not interfere with any other plugins or themes that may also load it. This is a standard and recommended practice for WordPress developers.

b) Create the jQuery handler functions

Secondly, a separate jQuery / Javascript file must be included that defines the two functions which will perform the actual work. This file contains two functions: the first function links the menu tabs to the function that will do the actual work of switching the menu tab appearances and showing or hiding the associated admin panels, and the second function contains the functionality to actually change the appearance of the web page to reflect the switch.

The first function is called when the page is loaded: it defines a function to handle the event that occurs when ever any of the selected link elements (collectively defined as having the ‘nav-tab’ class) is clicked (the ‘click( )’) function. The second function is then called when the menu link element is clicked: the function is called with the object parameter referring to the individual menu element that was clicked which will be used in the second part of the second function.

The second function first checks to see if the menu tab that was clicked was active, although the actual logic is checking to see if it is not active: if it is active, no other action is taken, which eliminates the unnecessary operation of activating an already active menu tab and its associated admin panel. If it is not active, the function then performs three actions:

• The first action does two things: it turns off the ‘nav-tab-active’ class in whichever menu element is active (has the relevant class attribute element defined) by removing that class from the element and it hides all elements with the ‘nav-tab-contents’ class through the ‘.hide( )’ function. This pushes the active menu tab of the menu tabs into the background and hides all of the admin panels by adding the “display: none” value to the style attribute of the panels.
• The middle action parses the element to return the value of the ‘rel’ attribute. This value is prepended with a ‘#’, which transforms the value into an ‘id’ attribute value.
• The last action also does two things: it adds the ‘nav-tab-active’ class to the clicked menu tab (pushing it ‘forward’) and shows the admin panel that was associated with the menu tab through the “rel” / “id” attribute value paired relationship by dynamically removing the “display: none” value of the style attribute for the panel.

c) Queue the handler function file to be loaded

Third, the function must be loaded into the page: this requires registering the script file and then queuing the script for loading using the WordPress functions.

By default, I put all of the Javascript files in a sub-directory of the plugin directory, mainly to reduce clutter but also to better rationally organize the plugin files. (The same is true for any CSS or image files I use in my plugins.)