UX – the WordPress admin menu

Some stuff in the admin UI happens automatically and lets your custom extension look exactly like if it would have been delivered with WordPress itself. But that’s not always the case. Let’s take a more insight look at how the admin menu items come together.

An example Imagine, that you wrote a plugin to manage some block parties and therefore added three custom post types:
  • Event
  • Promoter
  • Location
/**
 * Register 'Event', 'Promoter', 'Location' CPTs
 * @return void
 */
function oxo_add_event_cpts()
{
    $post_types = array( 'Event', 'Promoter', 'Location' );
    foreach ( $post_types as $index => $post_type )
    {
        $labels = array(
             'name'         => '%post_type%'
            ,'singular_name'        => '%post_type%'
            ,'add_new'          => 'Add New'
            ,'add_new_item'     => 'Add New %post_type%'
            ,'edit_item'        => 'Edit %post_type%'
            ,'new_item'         => 'New %post_type%'
            ,'all_items'        => 'All %post_type%'
            ,'view_item'        => 'View %post_type%'
            ,'search_items'     => 'Search %post_type%'
            ,'not_found'        => 'No %post_type% found'
            ,'not_found_in_trash'   => 'No %post_type% found in Trash'
            ,'parent_item_colon'    => ''
            ,'menu_name'        => '%post_type%'
        );
        array_walk( &$labels, 'oxo_cpt_label_filter', $post_type );

        register_post_type( strtolower( $post_type ), array(
             'show_ui'  => true
            ,'show_in_menu' => true
            ,'menu_position'=> 12 + $index
            ,'labels'   => $labels
        ) );
    }
}
add_action( 'init', 'oxo_add_event_cpts' );

/**
 * Filter callback fn for easier labels with larger groups of CPTs
 *
 * @param (string) $label | by reference via array_walk()
 * @param (string) $key | Type of label
 * @param (string) $post_type | Post Type Name
 */
function oxo_cpt_label_filter( &$label, $key, $post_type )
{
    $label = strtr( $label, array(
        '%post_type%'   => $post_type
    ) );
    return $label;
}

Items grouping problems The first thing to note is that the custom post type items order in the order you added them in your plugin or themes functions.php file. But you could also make use of the

'menu_position' argument during registering the cpt. In our example, we registered them at the positions 12, 13 and 14.

Note: If you use the same 'menu_position' number for two post types, then the one you registered first, will be added first. Pretty nice at a first glance. But then you installed some more plugins. And one of them also uses custom post types and registered their cpts at the same position (for e.g.: 13). It won’t happen, that everything will get messed up. The plugin that has the folder name that comes first in the alphabet should trigger first and adds it’s cpt to the admin menu. Not a big problem. The real problem is, that the other plugins cpt will now sit in between Event and Promoter and break up your nice little group. In such a case your plugins and the other plugins functionality are mixed in the UI 1) and this will result in confusing the user and lead to a bad UX 2).

2 thoughts on “UX – the WordPress admin menu

  1. Anety

Comments are closed.