Add a Submenu to the WordPress Admin Bar

By  on  

A while back I wrote Add Menu Items to the WordPress Admin Menu, a post detailing how you can add items to the left side, existing "posts" menu bar.  Adding menu items has served me well but it's not as customized as I would like -- I'm still adapting to WordPress instead of WordPress adapting to me.  By creating a custom top bar menu, I can mix and match links all I want!

Like adding functionality to your theme and other admin area, the directives will go in your theme's functions.php file.  The code itself should be self explanatory:

function create_dwb_menu() {
	global $wp_admin_bar;

	$menu_id = 'dwb';
	$wp_admin_bar->add_menu(array('id' => $menu_id, 'title' => __('DWB'), 'href' => '/'));
	$wp_admin_bar->add_menu(array('parent' => $menu_id, 'title' => __('Homepage'), 'id' => 'dwb-home', 'href' => '/', 'meta' => array('target' => '_blank')));
	$wp_admin_bar->add_menu(array('parent' => $menu_id, 'title' => __('Drafts'), 'id' => 'dwb-drafts', 'href' => 'edit.php?post_status=draft&post_type=post'));
	$wp_admin_bar->add_menu(array('parent' => $menu_id, 'title' => __('Pending Comments'), 'id' => 'dwb-pending', 'href' => 'edit-comments.php?comment_status=moderated'));
}
add_action('admin_bar_menu', 'create_dwb_menu', 2000);

Setting an id on the parent menu item allows you to use the parent key for submenu items; the rest of the keys are easy to figure out.  With the menu created, you simply need to add the WordPress hook and specificity to add it!

Recent Features

  • By
    5 More HTML5 APIs You Didn’t Know Existed

    The HTML5 revolution has provided us some awesome JavaScript and HTML APIs.  Some are APIs we knew we've needed for years, others are cutting edge mobile and desktop helpers.  Regardless of API strength or purpose, anything to help us better do our job is a...

  • By
    CSS @supports

    Feature detection via JavaScript is a client side best practice and for all the right reasons, but unfortunately that same functionality hasn't been available within CSS.  What we end up doing is repeating the same properties multiple times with each browser prefix.  Yuck.  Another thing we...

Incredible Demos

  • By
    Vibration API

    Many of the new APIs provided to us by browser vendors are more targeted toward the mobile user than the desktop user.  One of those simple APIs the Vibration API.  The Vibration API allows developers to direct the device, using JavaScript, to vibrate in...

  • By
    Web Notifications API

    Every UI framework has the same set of widgets which have become almost essential to modern sites: modals, tooltips, button varieties, and notifications.  One problem I find is each site having their own widget colors, styles, and more -- users don't get a consistent experience.  Apparently the...

Discussion

  1. I you want to remove a menu item , here the code.

    add_action('admin_bar_menu','ank_remove_admin_bar_menu', 99);
    
    function ank_remove_admin_bar_menu($wp_admin_bar){
        $wp_admin_bar->remove_menu('wp-logo');
    }
    
  2. Isuru

    Thank you Mr. Walsh! I needed this. Awesome!

  3. This is super easy!though I wish they had some kind of visual interface to do this, as it is there is Joomla and Drupal.

  4. Gavin

    What would be great would be a WP plugin that uses the built-in WordPress “Links” (http://codex.wordpress.org/Template_Tags/wp_list_bookmarks) and creates WP Admin Bar menus for each link category, and then adds the links from each category to the menu.

    Seems like a nice way to leverage the built-in WP Links feature for something that would actually be useful.

    Shouldn’t be too hard to do …. I might have a go when I get time.

    Thanks for the article.

  5. Hasse Andre

    Hi.

    Thanks for this.

    Is there a way to open the URL in a new window?
    Here is my code:

    function create_dwb_menu() {
    	global $wp_admin_bar;
    
    	$menu_id = 'dwb';
    	$wp_admin_bar->add_menu(array('id' => $menu_id, 'title' => __('NEW MENU ITEM'), 'href' => 'http://website.com/'));
    }
    add_action('admin_bar_menu', 'create_dwb_menu', 2000);
    
  6. To have this open in a new window, add in the meta option, like this: 'meta' => array( 'target' => '_blank' )

  7. iLen

    Thank you. I much use this code for my next plugin :)

  8. Ovidiu

    Thank you, this works great, even after all those years.

    However, what I would need is a way to add this on the right, to the “top-secondary” adminbar menu, next to the user actions. I’ve managed to add it using this function:

    function get_support_link($wp_admin_bar) {
       $args = array(
          'id' => 'get-support',
          'title' => 'Need Help?', 
          'href' => '/wp-admin/get-support.php', 
          'parent' => 'top-secondary', 
          'meta' => array(
             'class' => 'get-suport', 
             'title' => 'Use the contact form to contact Support',
             'target' => '_blank',
          )
       );
       $wp_admin_bar->add_node($args);
    }
    add_action('admin_bar_menu', 'get_support_link', 99);
    

    the ‘parent’ => ‘top-secondary’ being the key here. Yes, I could use the same function to add submenu items to this one, but I need to add about 5 items (maybe more) and adding same function again and again looks awful. I feel that this can be done cleaner, like your function here, but I can’t figure out how to add this function to the ‘top-secondary’ adminbar location. Any ideas?

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!