Add items ANYWHERE to the WP 3.3 Admin Bar

30 Dec

The title is pretty loud and clear, we are going to see how to add new items or links to the Admin Bar. Now it does say WP 3.3, but according to the core file, this method should work well backwards up to WP 3.1.0. I believe as you reached here, you meet the following prerequisites:

  • WP Action Hooks: Just what, where and how about WP Action Hooks is enough

(Do I need to add ‘You should know WordPress and PHP’ as a prerequisite?)

Okay, time to add stuff to your WP Admin Bar. Like they say ‘An image speaks a thousand words’, I’ve put images which will help you better than my blabber! ;)

The action hook that does this job is:

admin_bar_menu

The description for this action hook in the core file ‘admin-bar.php’ is as follows:

The action “admin_bar_menu” which should be used to hook in and add new menus to the admin bar. That way you can be sure that you are adding at most optimal point, right before the admin bar is rendered. This also gives you access to the $post global, among others.

The code is very simple. If you’ve used any action hook before, you’ll find this code very similar.

//Play around with the priority of add_action to see how the item's position can be changed within the location groups

add_action('admin_bar_menu', 'add_items',  100);
function add_items($admin_bar)
{

/* This print_r will show you the current contents of the admin menu bar, use it if you want to examine the $admin_bar array
* echo "<pre>";
* print_r($admin_bar);
* echo "</pre>";
*/

//The properties of the new item. Read More about the missing 'parent' parameter below
	$args = array(
			'id'    => 'my-item',
			'title' => 'My Item',
			'href'  => '#'
			'meta'  => array(
					'title' => __('Click Me'),
					),
			);

	//This is where the magic works.
	$admin_bar->add_menu( $args);
}

Simple, isn’t it? We’re hooking into the action hook ‘admin_bar_menu’ using our function ‘add_items’. The WP method which allows you to add the item is ‘add_menu’. I suggest you to play around with the action’s priority to see how it suits your need. Here’s what you can try:

The $args array is as follows:

  1. id: The html ‘id’ attribute for the new item.
  2. title: The label for this item.
  3. href: If it’s a link, then where should it go?
  4. meta: This array contains the html ‘title’ attribute for the new item. It can contain other html attributes such as ‘class’, ‘tabindex’ etc.

The location group of the new item is set using a parameter called ‘parent’ in the $args array. You can adjust the item’s position further within these location groups by changing the action’s priorities as above. I’ve not used ‘parent’ as I want my item to be a brand new tab in the admin bar.

‘parent’ can have the following values:

  • wp-logo: Adds the item in menu popped out from WordPress logo on the extreme left.(above the separator, after About WordPress)
  • wp-logo-external: Adds the item in the menu popped out from the WordPress logo on the extreme left. (in the group below the separator – WordPress.org, Documentation etc.)
  • new-content: Will add the item in the drop down menu popping out from ‘+New’. (after Post, Media, Link etc.)

  • top-secondary: Will add the item to the right hand side of the Admin Bar, on the immediate left of ‘Howdy Admin’.
  • my-account: Item goes in the list that pops out from ‘Howdy Admin’, in a new separate group.
  • user-actions: New item is added in the same list that pops out from ‘Howdy Admin’, exactly after ‘Log Out’ and ‘Edit My Profile’.

  • site-name: In the menu that pops out from your site’s name, on the left hand. (after ‘Visit Site’)

The real trick behind the ‘parent’ parameter is, if you want the new item to be a brand new tab in the admin bar, do not use ‘parent’. But if you want it to be a child of an existing item, use this existing item’s html ‘id’ attribute as a ‘parent’ for your new item. (Please note that WP adds a ‘wp-admin-bar’ prefix to the id of the outer ‘li’ tags of it’s own admin bar items, hence use the inner ‘anchor or a’ tag’s id). Using this principle, you can create a hierarchy by adding more children to your newly added item, by using it’s ‘id’ as the parent of the child items.

So if you’re using the ‘parent’ parameter with one of the above values, the $args array should look as follows:

$args = array(
    'id' => 'my-item',
    'title' => 'My Item',
    'href' => '#',
    'parent' => 'new-content',
    'meta' => array(
        'title' => __('Click Me'),
    ),
);

I guess this gives you a better way to customize your WP Admin Bar! Feel free to bash me with doubts and suggestions! Peace and adieu 2011!

18 Responses to “Add items ANYWHERE to the WP 3.3 Admin Bar”

  1. Matt Z April 7, 2012 at 9:50 pm #

    Ok, this is probably the only tutorial I found that shows me how to add links under different parts of the admin tool bar.

    The problem is, I don’t know how to create MULTIPLE links under the tool bar.. Please help w/ this.

    Matt Z

    • rutwick April 24, 2012 at 10:10 am #

      What sort of multiple links do you want to create? Can you create an image to show me?

      • TomSCH November 10, 2012 at 10:35 pm #

        What he wants to know is, how can you add multiple item’s within one function.

        And yes, sir, I would love to know that, too. ;p

        • rutwick January 3, 2013 at 1:50 am #

          Yes you can add multiple items.

  2. Gene April 27, 2012 at 4:05 pm #

    Works very nice thnx.

    Just a question here, I want to use it for a url link to our forum which is a phpBB(which works gr8 this way!) but want to open it with option _blank, so it opends in a new browser tab. Is that possible and if then how?

    Gene

    • rutwick April 28, 2012 at 6:04 am #

      You’re welcome Gene!

      Yes, what you’re trying is possible! Any attributes you want for the link, you can add it to the meta array like this:


      'meta' => array(
      'title' => __('Click Me'),
      'target' => __('_blank')
      ),
      );

      This will add an attribute “target = ‘_blank’” to the a tag, hence the link will open in a new window. Check this and let me know! :)

      • Hamza June 6, 2012 at 12:14 pm #

        helpful, but no. I eventually found enuogh information to allow me to add panels via functions.php, and add the hooks for custom saves Nov 21 ’10 at 15:27

  3. Gene April 30, 2012 at 8:17 am #

    That works great Rutwick, thank you.

    Maybe offtopic but still will ask :)
    I can put this in a (very small) home-made plugin but also in the functions.php which is better (performance wise) and why?
    (Using child theme here, so functions is option without “fear” for update of original theme)
    I ask this because to be honest, I have no clue if it is about the difference of a plugin and just a short code like above.

    Thanks in advance for your time and effort.

    • rutwick April 30, 2012 at 11:13 am #

      Welcome again, and no problem, I love doing this! :)
      I’d personally say, go for a plugin. The reason is, you can use it anywhere, just install it for that site and it will work even across updates! Whereas if you’re putting it in functions.php, you have to copy paste it every time for a new theme, which is of course bound to be overwritten in case of an update.
      Let me know if and how the plugin goes! ;)

      - Rutwick

  4. BR February 19, 2013 at 1:12 pm #

    Hi Rutwick,

    I would like to move the whole buddypress toolbar from the admin menu to the top nav as the picture shows below.

    Could somebody help me how to achive it?

    The picture describes what I would like to have.

    http://oi46.tinypic.com/11globb.jpg

    Thank you for your reply in advance!

    • rutwick March 2, 2013 at 8:58 pm #

      Hi BR,

      Apologies but I haven’t used BuddyPress before! I’ll see if I can get around it to help you!

      Rutwick

      • BR March 5, 2013 at 5:05 am #

        Thank you Rutwick!

        I will check this site on a daily basis now on. :)

        I do appreciate your help.

  5. frederic August 26, 2013 at 6:56 am #

    Hi Rutwick,

    I’m trying to add new menu items to my website admin bar. I tried with your post but somehow not able to achieve what I’m trying to.

    I want to place my new items on left hand side top admin bar. I need to add 5 new items on the top menu( no in submenu)

    Can u pls help me out.

    • rutwick September 28, 2013 at 1:36 pm #

      What have you tried and what is happening exactly?

  6. Rbruce August 27, 2013 at 8:33 pm #

    Hi,
    This is very helpful.
    Is there a way to move my new menu item, higher on the menu.

    Like your “my item 2″ is below Log out.
    Is there a way to move that menu item before Log out or even make it first?

    Thanks

    • rutwick September 28, 2013 at 1:35 pm #

      Need to check on this!

Trackbacks and Pingbacks

  1. Add new items ANYWHERE in the WP 3.3 Admin Bar. | Rutwick … | Dzker - December 31, 2011

    [...] the original post here: Add new items ANYWHERE in the WP 3.3 Admin Bar. | Rutwick … Uncategorizeditems-or-links, new-items ← Mischa Barton: Launching London Clothing Store [...]

  2. Adding and Removing Wordpress Admin Bar Items | Wordpresss designer & developer in Quezon City - August 18, 2013

    [...] =>__('_blank'))    );    $admin_bar->add_menu( $args); } resource : http://blog.rutwick.com/add-items-anywhere-to-the-wp-3-3-admin-bar Tagged with: wordpress admin bar, WordPress Tips Posted in [...]

Leave a Reply