Tech from Hel

How to Add Horizontal Submenus to Your Administration Plugin in Wordpress 2.7+

With the launch of version 2.7 in December 2008, Wordpress added several new features and changed its user interface (UI). I especially like the new automatic update feature and the new vertical sidebar is sleeker and more modern looking. However, I find navigating the menus on that new sidebar to be very inefficient when administration plugins add more selections to it.
Image #1: Plugin with sidebar menu

As an admin plugin author, I want my users to have easy access to my plugin menu and submenus. In Wordpress 2.2 to 2.6, the built-in menu functions accomplished this with horizontal menus at the top of the page. In 2.7, however, the same menu functions now place the plugin menu (and submenus) near the bottom of the page, in the sidebar. This makes navigation more cumbersome because plugin menus are positioned outside the initial viewing area of the screen in a typical 1280×800 browser window. The user has to scroll down to select the plugin and, after the plugin is selected, scroll down again to navigate the plugin’s submenus. Worse, it not always obvious that there are submenus available for a plugin. You can see an example of this in image #1 where the green line indicates the end of the window area of a 1280×800 resolution browser window.

To workaround this problem in my own admin plugin, I inserted a new horizontal menu containing the submenu links at the top of each submenu page.
image #2: Plugin with horizontal menu To keep the look consistent with WordPress' new style, I positioned the menu inline with the “contextual help” button and also adopted it’s “look and feel”. This was a relatively simple task to do, once I located and copied the appropriate styles from WordPress' admin stylesheets. You can see an example of this new horizontal menu in the second image to the right.

Read the rest of this entry »