Add Useful Links to WordPress Admin Bar
65WordPress 3.1 introduced the admin bar, which adds admin options to the top of your pages as you browse your site (Assuming you’re logged in of course).
It’s easy to extend the bar to add new links of your own, or to remove links you don’t want (e.g. if the “Appearance” menu isn’t something you often need instant access to). You can see the end result in the image above.
In this tutorial, we’ll be building a simple plugin that will let us add some handy links (e.g. a Twitter search for the current post, analytics, and ad sales), as well as remove the links we don’t want.
If you’d rather just skip to the finished file though, you can download the plugin here, and follow the instructions in the file to set your options (NB – It’s a simple script, not a full fledged plugin with options panels).
1 – Create the Plugin File
The first stage is setting up our plugin for WordPress. To do this, create a new folder in your wp-content > plugins folder, and give it a unique name, e.g.
pbd-admin-bar-links
Now, create a PHP file inside with the same name, e.g.
pbd-admin-bar-links.php
Lastly, enter some details about the plugin at the top of the file, e.g.
1 2 3 4 5 6 7 8 9 10 | <?php /* Plugin Name: PBD Admin Bar Links Plugin URI: http://www.problogdesign.com/ Description: Add/Remove links in the WordPress admin bar. Version: 0.1 Author: Michael Martin Author URI: http://www.problogdesign.com/ License: GPL2 */ |
And now we can start writing some real code.
2 – Hook into the Menu
The first thing we’re going to do is write a simple function that checks to see if we need to do anything at all. If the current user isn’t an admin, or if they’re an admin who has disabled the admin bar (You can turn it off in your profile options), then we won’t be doing anything else.
Insert this code into your plugin:
1 2 3 4 5 6 7 8 9 10 11 12 | /** * Checks if we should add links to the bar. */ function pbd_admin_bar_init() { // Is the user sufficiently leveled, or has the bar been disabled? if (!is_super_admin() || !is_admin_bar_showing() ) return; // Good to go, lets do this! add_action('admin_bar_menu', 'pbd_admin_bar_links', 500); add_action('admin_bar_menu', 'pbd_remove_default_links', 500); } |
Line 6 will take care of our permissions checks. If they pass, then the two add_action() lines will call the functions we’re going to write next to adjust the menu.
But of course, we need to actually call this function as well. Add this line below it to have our function called when the admin bar is created:
1 2 | // Get things running! add_action('admin_bar_init', 'pbd_admin_bar_init'); |
3 – Add Our Links
Now, for the meat of the tutorial, we’re going to write the function that adds our links. And it’s very simple to do.
We’ll start off by creating the function (With the same name we used in the first add_action() line in the previous block!), and then entering the links. Here goes:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | /** * Adds links to the bar. */ function pbd_admin_bar_links() { global $wp_admin_bar; // Build Twitter Reactions link. $url = 'http://'. $_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"]; $twitter = 'http://search.twitter.com/search?q='. urlencode($url); // Links to add, in the form: 'Label' => 'URL' $links = array( 'BuySellAds' => 'http://buysellads.com/', 'Twitter Reactions' => $twitter, 'Google Analytics' => 'http://www.google.com/analytics/', 'Klout' => 'http://klout.com/problogdesign', 'Webmaster Tools' => 'https://www.google.com/webmasters/tools/dashboard?hl=en&siteUrl=http://problogdesign.com/' ); |
The global $wp_admin_bar; line gives us access to the menu object, which we’ll use in the next line.
The Twitter URL needs to be made dynamically. We use the $url = … line (Line 8) to get the address of the current page (You’ll need to adapt it if you’re using https://), and then in the $twitter = … line, we build the link.
The $link = … part is where you start tweaking. Here, we make an array of our links, in the format: ‘Label’ => ‘URL’. You can see I’ve put in a few of mine, but you can add anything you like here (And the order they are entered here is the order they will show up in).
Update (15/3/2011) – Blake Imeson had a nice idea in the comments. If you’ve set up a redirect to a client’s email (e.g. mail.site.com to take them to Google Apps), you could add that as well, similarly to how we added Twitter, using a line like this: $mailurl = ‘http://mail.’ . SERVER[“SERVER_NAME”].$_SERVER[“REQUEST_URI”];
Now, we use the add_menu method of the $wp_admin_bar object we called in to add our links. It works in the format:
$wp_admin_bar->add_menu($args);
Where $args is an array which can have the following settings:
- title – The text for the link.
- href – The URL for the link.
- parent – (Optional) To add the link to a submenu, enter the ID of the parent link (Defaults to FALSE, i.e. a top-level link).
- id – (Optional) ID to refer to this link. Defaults to a sanitized version of the title.
- meta – (Optional) Array to specify extra info about the link, from array( ‘html’ => ”, ‘class’ => ”, ‘onclick’ => ”, target => ”, title => ” );
Armed with this info, let’s go back to our unfinished links function and paste the following:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | // Add the Parent link. $wp_admin_bar->add_menu( array( 'title' => 'Stats', 'href' => false, 'id' => 'pbd_links', 'href' => false )); /** * Add the submenu links. */ foreach ($links as $label => $url) { $wp_admin_bar->add_menu( array( 'title' => $label, 'href' => $url, 'parent' => 'pbd_links', 'meta' => array('target' => '_blank') )); } } |
The first line follows the format we discussed. All we do is add a new top-level link to the menu bar. I’ve chosen to call it “Stats”, though you could call it whatever you chose.
You’ll notice the ‘href’ attribute has been set to false, meaning that this “link” doesn’t link anywhere.
To add the submenu links, we use a loop to cycle through our array and call the add_menu() method on each of our links.
We specify the parent as “pbd_links” because that was the ID we gave the parent link, and as these links are all off-site, I’ve used the ‘meta’ section to make them open in a new window.
And that’s all we need to put the links in place. If you were to close up your PHP file now and activate the plugin, you’d see your new additions in the admin bar.
But before we do that, let’s look at how we can delete some of the default links as well.
4 – Remove Default Links
To remove a menu, we call the remove_menu() method, and pass in the ID of the menu we want to remove.
Paste the following into your plugin:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | /** * Remove default admin links. */ function pbd_remove_default_links() { global $wp_admin_bar; /* Array of links to remove. Choose from: 'my-account-with-avatar', 'my-account', 'my-blogs', 'edit', 'new-content', 'comments', 'appearance', 'updates', 'get-shortlink' */ $remove = array('appearance'); if(empty($remove) ) return; foreach($remove as $item) { $wp_admin_bar->remove_menu($item); } } |
This is very similar to our add-links function. We pull in the admin bar object again, and then create another array of options. This time, the array will just hold the IDs of menus to remove (I’ve entered all of the possible options in a comment on line 8).
Provided the array isn’t empty, we’ll loop through each item and remove each of the corresponding menus.
And that’s that done. Now all that remains is to close your PHP file and activate the plugin!
1 | ?> |
Let me know if you find this tutorial useful, or if you’ve seen any other cool tricks for the new admin bar!
Enjoy this post? You should follow me on Twitter!
Excellent! I haven’t played with the admin bar much yet (other than to hide it).
Haha, not a fan of it? I’m quite liking it tbh, more than I thought I would. Mostly just for the “Edit Post” link (I’ve never bothered coding that into templates, but nice to have it by default now, particularly for client sites :) )
Ha, it’s okay, but I’ve had it cause a few layout issues on some sites. It is nice for quick nav though.
Ah, well I can see why you’d turn it off then. I’ve only tried it on 3 or 4 different themes so far, but I guess I’ve been lucky with them. *fingers crossed it stays that way* xD
i had a few problems with it interfering with site layout, but moving it to the bottom usually solved it for me… feel free to use this if you’d like.
// Move Admin Bar to bottom
add_action(‘wp_head’, ‘stick_admin_bar_to_bottom_css’);
function stick_admin_bar_to_bottom_css() {
echo ”
html { padding-bottom: 28px !important; }
body { margin-top: -28px; }
#wpadminbar { top: auto !important; bottom: 0; }
#wpadminbar .quicklinks .menupop ul { bottom: 28px; }
“;
}
looks like it deleted some of the code.. try this link: http://pastebin.com/jTvwe90C
Michael, I just modified the admin bar for the first time. Thanks for the tut ;)
Very cool. Have just installed the plugin. That is really some useful stuff. Now a can add the links I want in my own admin bar. Thank you for sharing.
No problem Thomas! Cool to hear that you’re using the plugin, thanks! :)
Very well designed blog you have here.
Thanks for the plugin, WordPress continues to be the best blogging tool and add-ons like this help make it so.
Gary
No problem. Welcome! :)
Personally, I really don’t like the admin bar. I’ve got one built into my framework which is far nicer (see: shiny) and has the options I want built in. I would’ve preferred it if it was something I could turn on or off without having to add extra code to my framework.
Ah, you restyled the look of it? That’s pretty cool :D . Can imagine that becoming a fairly popular trick in premium themes definitely!
@Alex, do you have a screen shot or demo?
(see: shiny)….. where?
Hey, I was just going to research this and write up a post about it…
I guess I’ll just send people here instead. Curses, Martin. :P
Haha, sorry mate! :D
Thanks for posting this! I am going to start modding our admin menus!
Cool, hope it goes well for you! :)
Cool! I’ve been undecided as to whether I like the Admin Bar or not, but i like it more now that I know how to make it my own menu!
Awesome. It definitely makes it far handier I think :)
This is a very cool plugin. I will definately check this out :)
I may turn this into a post but I have an addon tip for the mail link. I always use mail.sitename.com on all client sites (usually redirects to Google Apps for Domains)
$mailurl = ‘http://mail.’. SERVER[“SERVER_NAME”].$_SERVER[“REQUEST_URI”];
and then for mail you have:
‘Mail’ => $mailurl,
Any changes?
Ah, that’s a pretty cool one. I do similar things for clients, definitely like the idea of making that redirect easier for them to find, nice one!
(Will add this idea to the post :) )
I know this could also be improved but how about for the Webmaster Tools link:
$wmturl = ‘https://www.google.com/webmasters/tools/dashboard?hl=en&siteUrl=http://’. $_SERVER[“SERVER_NAME”].$_SERVER[“REQUEST_URI”];
and
‘Webmaster Tools’ => $wmturl
Any tips on how to add a url to cPanel? just needs to be siteurl.com/cpanel
Thanks!
Yep, sure thing! Should be just:
$cpanel = $_SERVER[“SERVER_NAME”] . ‘/cpanel’;
(Doublecheck you don’t end up with 2 forward slashes though. Can’t remember if you’ll need to it add it in like I did!)
Michael
That worked perfectly! (It jacked the single quotes when I copied over though)
Here is what I am using now:
// Build Links.
$url = ‘http://’. $_SERVER[“SERVER_NAME”].$_SERVER[“REQUEST_URI”];
$twitter = ‘http://search.twitter.com/search?q=’. urlencode($url);
$mailurl = ‘http://mail.’. $_SERVER[“SERVER_NAME”].$_SERVER[“REQUEST_URI”];
$wmturl = ‘https://www.google.com/webmasters/tools/dashboard?hl=en&siteUrl=http://’. $_SERVER[“SERVER_NAME”].$_SERVER[“REQUEST_URI”];
$cpanel = $_SERVER[“SERVER_NAME”] . ‘/cpanel’;
// Links to add, in the form: ‘Label’ => ‘URL’
$links = array(
‘LimeCuda’ => ‘http://limecuda.com’,
‘Twitter Reactions’ => $twitter,
‘Google Analytics’ => ‘http://www.google.com/analytics/’,
‘Mail’ => $mailurl,
‘Webmaster Tools’ => $wmturl,
‘cPanel’ => $cpanel
);
Here is a screen shot of what it looks like now: http://screencast.com/t/G0FbxKJZ4L
Here is a paste of the code if someone wants to copy it.
http://paste2.org/p/1304133
Glad it’s all working, that’s cool :D
Would be interesting if you display some of the stats within the bar for the admin, eg: facebook likes, retweets, pagerank, etc.
I wondered about that too. Never tried to get that info out of the APIs directly though so I’m not sure if it’s possible, but FB and Twitter in particular have fairly awesome APIs, so worth taking a look into :D
The WordPress SEO Plugin by Yoast has a pretty cool dropdown it adds. Here is a screen shot http://screencast.com/t/4ymwLbt5s
http://wordpress.org/extend/plugins/wordpress-seo/
I think ill mess around with this when i have some time, ill email you the details Michael.
Sounds cool, will be curious to see the results! :)
Some useful code hints, thanks. I’m currently trying to bend WordPress to my will, with limited sucess!
Well done! I too enjoy the bar for the ease of editing posts–this will be more icing to the admin bar!
I was curious if it was possible to add menu items after the search to the far right.
2 Questions:
1) Can I control the order at all? That is, can I make my dropdown menu appear between Comments and Appearance, for example?
2) Can I remove just the avatar part of the way left menu, but keep all the links?
Great post – thanks!
to answer your first question:
in the line that says
add_action(‘admin_bar_menu’, ‘pbd_admin_bar_links’, 500);
change the number from 500 to 10, 20, 30, etc for positioning in menu.
Great article, thanxs for sharing :)
I only like wp-stat feature on admin bar from Jetpack on admin bar other are use less to me
Thanks for posting! I got this working, but I can’t seem to get it to show for other roles.
I tried messing around with the following:
// Is the user sufficiently levelled, or has the bar been disabled?
if (!is_super_admin() || !is_admin_bar_showing())
return;
But wasn’t having much luck. What would I change to show for editors, too?
Thanks!
Brilliant tute – even doable for a relative beginner to php like me. Thanks for taking it slow for the newbies!
Okay, I have it showing for everyone that is logged in, super easy, I just commented out the code below but kept the function. The only problem is I don’t want subscribers to see these. They It’s for editors and super admin only. I’m just not sure what I should add. Everything I’ve tried broke the plug in. :) Thanks for any pointers.
* Checks if we should add links to the bar.
*/
function pbd_admin_bar_init() {
// Is the user sufficiently leveled, or has the bar been disabled?
// if (!is_super_admin() || !is_admin_bar_showing() )
// return;
Really useful tip, thanks a lot :)
i found something wrong in these lines, please resolve this error..
// Build Twitter Reactions link.
$url = ‘http://’. $_SERVER[“SERVER_NAME”].$_SERVER[“REQUEST_URI”];
$twitter = ‘http://search.twitter.com/search?q=’. urlencode($url);
What error message were you getting?
Thanks for sharing it. ProBlogDesign is really great…I have solved all my issues with wordpress.
Nice one! Definitely gonna use this for my future projects.
Thanks for sharing!
I didnt add the link and i couldnt log in. How would i will add log in and log in to my website
Here is another tweak that may be helpful for this bar.
Add a Move to Trash button
http://wpengineer.com/2185/add-trash-button-to-wordpress-admin-bar/
Give me a hit someday.
How would i will add log in and log in to my website
Soccer is my favorite,so is David Beckham
Thanx Michael, Was Looking An Easy and Explained Way to Add Links To My Admin Bar :D
And This is The Easiest Method I Found Yet xD
I am trying to make this and I follow the tutorial but I am encountering problems in making it. I hooked up in adding your links, I found it very important and I badly need a link like this. I bet, you better put options there not just assume that it flows correctly.
hmmm…nice work done buddy…please keep on updating as i have bookmarked your blog because i need this stuff for my project work..!!!
Thanks for this very useful code…
Hi! Thank you so much for the plugin and all the info! I looked at your options in the comment with the IDs of menus to remove and used some. But I am unable to remove “Edit My Profile” (inside user profile) and “Page” (inside “Add New”). Any help or tip? Thanks!
I will definetly use this plugin, Its fun trying new things in wordpress
Awesome. It definitely makes it far handier I think :)
not work at users levels …. Administrator only = ADMIN … Any idea how to work ¨on¨ ¨all¨ ¨levels¨?! :-)
I find that I am using my admin bar more and more when developing my word press websites so this is something that I think would benefit me a lot more and would definitely use in my websites in the future. When also training clients setting this up for them would make it a lot easier once they are logged in
This goes straight into my bookmarks!
Nice tip, I want to create a direct navigation to the plugins I use & this top helps in doing that