Themergency

January 18, 2012
by Brad
0 comments

Foobar WordPress Plugin Version 2 Released

Just after the release of version 2 of the Foobar jQuery plugin, we have now released version 2 of the Foobar WordPress Notification Plugin. To say there are few new features would be an understatement! We listened to the community and added some awesome functionality, resulting in a notification bar plugin for WordPress that we feel has no equal!

New Features

Obviously the WordPress plugin inherits all the new features in the jQuery plugin, but there are also a ton more. Here is a list of the combined new features.

  • Bars can now be on the bottom
  • Added 2 more button themes
  • You can show navigation buttons to skip between messages
  • Conditional Logic. Show a bar only on the front page, or for a specific category, or on the 404 page etc.
  • Decide how the JS is included in the page (Dynamic / inline / generated to disc)
  • You can now completely close the bar, not just toggle it
  • Better support for client side cookies
  • Smart widths. You can now stretch the message area width to fill the page.
  • Allow encoding of HTML within messages, so they work with caching plugins
  • Custom CSS and JS which are applied to all foobars
  • Additional custom CSS and JS metaboxes for each foobar
  • Proper implementation for RTL text
  • Choose which post types see the “Choose Foobar” metabox
  • Choose to only allow administrators to manage your foobars
  • Performance improvements
  • Better customization
  • Online version checker

Bottom Bars

One of the most requested features was to get foobar working on the bottom of the page. With the WordPress plugin, it is super simple to do this. When creating a foobar, for positioning, just select “Bottom”:

Check out this bottom demo.

Message Navigation

We added navigation buttons when multiple messages are used. So now when you hover over the messages, some cute little arrows appear that you can use to navigate through all the messages, instead of waiting. Again, very easy to choose the navigation theme:

Check out this message navigation demo.

More Button Themes

We added 2 more button themes, giving you a total of 5 button themes to choose from now:

Conditional Logic

In previous versions, you have always been able to choose to display a specific foobar on a page or post, with the help of a “Foobar Options” metabox. Now, with conditional logic, you can place specific foobars on different types of pages using WordPress’ built-in Conditional Tags. Basically, this means you can put a foobar that only shows on your front page, or a foobar for a specific category or tag, or a foobar on your 404 page. There is no limit to what you can do with this! And when using a plugin like mobble (which adds mobile-specific conditional tags to WordPress) you can show a certain foobar when the visitor is browsing your site on a mobile device.

To setup conditional logic, enable it under the advanced tab in your foobar settings:

You will then see a new input box when editing a foobar. That is where you can enter your conditional tags:

Under the hood, this feature works the same way as the popular Widget Logic plugin, so if you have used that before then it should be a breeze. Please note that this not a beginners feature and only someone with some knowledge of WordPress and programming in PHP should use it.

Dynamic / Inline / Generated To Disk

We now give you the choice on how the JS and CSS is added to your page to get a foobar to show. By default, a php file is referenced and the jQuery code is built up on the fly. But we had some issues doing this on certain WordPress installs. Also, when embedding advanced shortcodes within your foobar (like a Gravity Form shotcode) it just didn’t work. So now you have to choice to keep it they way it has always been, or include the javascript code inline, or let the plugin generate JS and CSS files on the fly and those are referenced. Obviously, you get the best performance from referencing the files that are generated to disk, but you get more flexibility with inline code, so depending on your setup, use what you need:

Toggle Or Close

If you don’t want visitors to toggle your foobar between the expanded and collapsed states, but isntead, let them close it completely, then that’s easy too. Just set the collapse type in the advanced metabox when editing a foobar:

Better Cookie Support

When setting the collapse type to Close, you may want to use the new and improved client side cookie options. This is to enable the browser to “remember” if the user closed the foobar or not, so if they close it, it does not show again. You can now set a cookie name and a duration:

Administrators Only

If you only want administrators to manage your foobars, then simply enable that on the foobar settings page:

Performance

A lot of things have been done to improve performance in V2. All of the images used for buttons and navigation are now using image sprites. As mentioned above, you choose how to include the JS and CSS files. Generating to disk giving you the best performance. You can also choose to include the JS files in your site’s footer, which is a best practice. And most of the advanced features are turned off by default, and you choose when to turn them on. Some of the features obviously add some overhead (conditional logic or encoded HTML) but it is really up to your website and your WordPress setup.

Now What?

So all in all, V2 is a major upgrade, with a huge list of new features. We are positive that these features make foobar stand out from the other notification bars available in the market. Check out the plugin homepage and demo’s and if you like it, then get your copy now!

January 10, 2012
by Brad
1 Comment

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.

New Options Structure

The options for foobar have been completely rewritten from the ground up. This is a breaking change for anyone upgrading from V2. The reason for this change : there were just too many options and they were not organised in a logical way. So they are not different. Luckily, we have written this options converter, so you can enter your old v1.8 options, and we will output the new v2 options for you. 

Bottom Bars

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

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

Check out the position demos from the documentation.

5 Button Themes

We have included some new button themes, so there are now 5 themes to choose from. Check out the themes demos. It is also very easy to create and use your own button theme!

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. Check out the navigation arrows on the main documentation page.

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"
},

Check out the width demos from the documentation.

Methods

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:

$foobar("toggle");

Callbacks

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){
    $("#console").append('expanding\n');
  },
  collapsing: function(o){
    $("#console").append('collapsing\n');
  }
}

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:

$foobar

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.

Still Not Convinced?

Check out the documentation and demos!

January 1, 2012
by Brad
0 comments

Start Something New In 2012 With These Boilerplates

You know what a boilerplate is right? If not, a boilerplate is a starting point / baseline / template, where someone has put together everything you will need to get started. They have done all the ground work, so you can get stuck in with no effort and focus on the good stuff : content or functionality. Think of a boilerplate as a starter-kit, rather than a framework. You are meant to modify and extend a boilerplate, and that is why they are usually well documented and laid out in a way that makes it super simple to customize to your liking.

A new year is upon us, and I am sure a lot of you have some cool ideas you want to implement in 2012. So hopefully these boilerplates will help kick-start that new idea into reality.

HTML5 Boilerplate

http://html5boilerplate.com/

“A rock-solid default for HTML5 awesome”. The HTML5 boilerplate is an awesome starting point for any site and you get a bunch of really cool stuff built-in:

  • Cross-browser compatible (even IE6!)
  • HTML5 ready
  • Best practices
  • Progressive enhancement and graceful degradation
  • and much, much more
Also check out Initializr 2 which generates a custom version of the HTML5 Boilerplate based on your requirements. Literally generate your starting-point HTML5 site in 15 seconds!

Mobile Boilerplate

http://html5boilerplate.com/mobile

“A best practice baseline for your mobile web app.” From the same guys who did HTML5 Boilerplate, this template is focused on mobile – duh!

WordPress Plugin Boilerplate

https://github.com/tommcfarlin/WordPress-Plugin-Boilerplate

A very useful starting point to get a WordPress plugin out quickly. Includes a default readme.txt file, basic translation support, as well as a bit of code that has a few hooks to include javascript and CSS files the right way. Nice!

HTML Email Boilerplate

http://htmlemailboilerplate.com/

This little gem gives you a design-free starting point for your next HTML email. It includes code to help you avoid rendering problems in the most common email clients – Gmail, Outlook, Yahoo Mail etc.

jQuery Boilerplate

http://jqueryboilerplate.com/

A great starting point for your next jQuery plugin. Extremely well documented, so this is an excellent starting point for a beginner wanting to to write their first jQuery plugin.

Gridless

http://thatcoolguy.github.com/gridless-boilerplate/

“Gridless is an optionated HTML5 and CSS3 boilerplate for making mobile first responsive, cross-browser websites with beautiful typography.”

Skeleton

http://getskeleton.com

“A small collection of CSS & JS files that can help you rapidly develop sites that look beautiful at any size, be it a 17″ laptop or an iPhone.”

Chrome Boilerplate

https://github.com/mahemoff/chrome-boilerplate

Starter-kit for your next Chrome app or extension. Includes some nice defaults, like the manifest file and some icons.

Boilerplate for Three.js

https://github.com/jeromeetienne/threejsboilerplate

Three.js is a lightweight 3D engine written for javascript. This boilerplate gives you a clean project to get started with three.js.

iOS Boilerplate

http://iosboilerplate.com/

A base template for iOS apps. It is an XCode project that includes many helper classes for common scenarios relating to iPhone and iPad development.

SVG Boilerplate

http://svgboilerplate.com/

“SVG Boilerplate is a simple, straightforward, and functional template to embed or inline SVG content (including in text/html) that works with browsers all the way down to IE6.”

Starkers

http://starkerstheme.com/

“Starkers is a bare-bones WordPress theme created to act as a starting point for the theme designer.” Also check out Boilerplate – a merger between the HTML5 boilerplate and the Starkers theme.

Convert-o-matic

https://github.com/stakes/convert-o-matic

“Convert-o-matic is a landing page template inspired by KissMetrics’ article “Anatomy of a Perfect Landing Page.” And by “inspired”, I mean a nearly one-for-one translation of the best practices described there into a customizable HTML5 landing page template.”

Event-o-matic

https://github.com/stakes/Event-o-matic

“Event-o-matic is a simple, one-page static site designed for events. It’s not fancy, but it Gets The Job Done. Everything you need to bang out a one-pager for your event is all here including .psd templates for the header, logo and background tiles.”