Hello Foobar Version 2

Foobar has recently had a MAJOR overhaul. And by overhaul, I pretty much mean a rewrite! If you do not know what the foobar is, it is the notification bar that is showing at the top of this page.

Bottom Bars

Probably the most requested feature of them all. Bars can now be placed at the bottom of the page. This can be done by setting the following option:

"position": {
  "bar": "bottom"

Navigation Arrows

If your foobar has multiple messages, you can choose to display tiny navigation arrows when you hover over the message area. This allows the user to quickly navigate through all the messages.

Smarter Widths

One of the most requested features was the ability to have foobar messages that expanded to fit the browser window. The message area used to be set to 50% of the screen, and it was difficult to center the messages if you were using the left or right HTML areas. No longer! You can now set widths with “*” values, which means they will fill the space available. Check this out:

"width": {
  "left": "20px", "center": "*",
  "right": "20px", "button": "80px"


The foobar now has methods, so it is easy to integrate with. For example, if you want to force the current foobar to toggle, simply execute this code:



There are also callback events to let you customize the experience even further. This was added so that we could integrate nicely with other plugins in WordPress, like buddyPress. Here is an example:

"events": {
  expanding: function(o){
  collapsing: function(o){

Fewer Setup Issues

One of the biggest gripes we got from users was something like “the foobar is not showing up on my page” and the reason 9 out 10 times was the same : there were 2 versions of jQuery being added into the page. Normally, this does not break jQuery plugins, but foobar was written as a “static” plugin. This meant you did not need to bind the foobar to any element, as it didn’t really belong to any element, but rather belonged to the page as a whole. So we fixed this problem by providing everything through a new global variable:


Other Changes

Together with the above major changes, here are some other changes or improvements made:

  • Better Custom HTML Support (no hard coded line heights)
  • Better cookie support
  • True RTL compatibility
  • True random messages
  • Options to change social profile text and font
  • Using image sprites rather than separate images

Go Get It Now!

This version of the foobar is better than ever before. If you were unsure before, then there is absolutely no way you could resist to get it now :) Go and get yourself a copy.