post-thumb-admin-menu

UX – the WordPress admin menu

Moving items around Still not done. Now we have a complete menu, including sub menu items. There’s only one thing: We got a pretty strange and counter intuitive order. And this is, where things can be getting tough. We now have two choices:
  1. Remove all submenu items using remove_submenu_page(); and then adding them in the order we want or
  2. Writing a function, that makes use of the globals $menu, $submenu;, builds a new structure for us and then adds them back in to the admin menu. See example below.
/**
 * Move menu items around
 * Use the globals for menus just before the admin menu output to move item
 * @uses add_filter()
 * 
 * @return array $submenu
 */
function oxo_move_submenu_items_cb()
{
    global $menu, $submenu, $parent_file;
    // Start modifying the $submenu to your needs
    return $submenu;
}
// Add filter to the '_admin_menu' hook
function oxo_move_submenu_items()
{
    add_filter( 'parent_file', 'oxo_move_submenu_items_cb' );
}
add_action( '_admin_menu', 'oxo_move_submenu_items' );

After removing and re-adding the single sub menu items, we can get a nice custom menu item.
Settings pages Some (most?) plugins build separate settings pages and add them as sub menu item to the Settings page/section. Splitting up your plugins controls is another bad thing from UX point of view. You can then add another sub menu page, using

add_submenu_page(); as described above.

/**
 * Add a settings page as last sub menu item to the CPT menu item
 * @return void
 */
function oxo_add_event_settings()
{
    add_submenu_page(
         'edit.php?post_type=event'
        ,'Event Settings'
        ,'Settings'
        ,"publish_{$GLOBALS['wp_post_types']['event']->capability_type}s"
        ,'edit.php?page=settings'
        ,'oxo_event_settings_content'
    );
}
add_action( 'admin_menu', 'oxo_add_event_settings', 20 );

Just set a function as callback argument and make use of the Settings API.

Chip Bennet got a nice tutorial about exactly that.

The final menu after adding a settings page as last item - tightening the user experience.
Using meta boxes in there – Rilwis got a nice class – will give your users a even more tightened experience, as they already know the boxes from your custom post type screens. Getting around this, when you got a solid OOP coded and open source licensed base, isn’t that hard. Yes, you still will have to know a little more than just php basics, but you don’t have to be a genius and know every little trick that will ever exits. No need for special solutions. Just register some CPTs and custom taxonomies, build a nice settings page relying on the wp internals and you’re ready to go for your first wordpress plugin with a nice admin menu.

Follow ups wanted? If there’s enough interest, I’ll explain in another post how you can bring even more style to the admin menu with adding custom separators to let your menu stand even more out. This would be the next step to avoid UI/UX collisions with other plugin menu items. Just leave a comment about what you want to read, discuss the contents in here and

enjoy life.

Footnotes

1) UI – short for User Interface 2) UX – short for User Experience

2 comments:

  1. Pingback: Anety

Comments are closed.