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
    Being a Dev Dad

    I get asked loads of questions every day but I'm always surprised that they're rarely questions about code or even tech -- many of the questions I get are more about non-dev stuff like what my office is like, what software I use, and oftentimes...

  • By
    Send Text Messages with PHP

    Kids these days, I tell ya.  All they care about is the technology.  The video games.  The bottled water.  Oh, and the texting, always the texting.  Back in my day, all we had was...OK, I had all of these things too.  But I still don't get...

Incredible Demos

  • By
    Optimize Your Links For Print Using CSS — Show The URL

    When moving around from page to page in your trusty browser, you get the benefit of hovering over links and viewing the link's target URL in the status bar. When it comes to page printouts, however, this obviously isn't an option. Most website printouts...

  • By
    Create a CSS Cube

    CSS cubes really showcase what CSS has become over the years, evolving from simple color and dimension directives to a language capable of creating deep, creative visuals.  Add animation and you've got something really neat.  Unfortunately each CSS cube tutorial I've read is a bit...

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!