So what do you get in Jetpack? Well here are three of my favourites:

• WordPress.com Stats – exactly what it says on the tin…
• Shortcode Embeds – easily add media from YouTube, Vimeo and Slideshare.
• LaTeX – need equations in a blog post? This ones for you then.

There are eight plug-ins currently available with more coming soon.

The last plug-in I mentioned, LaTeX may sound like it’s come straight from a .xxx domain name but bare with me; under that slightly suspect name is a powerful tool for anyone who needs to format equations in a post. Here’s a small demonstration:

LaTeX has allowed me to embed one of the most beautiful equations in all of mathematics; Euler’s Equation directly into my blog post. It links Real Numbers, Euler’s Number, Imaginary Numbers and Pi in a staggeringly simple equation. There’s a mass of information on LaTeX here with everything you’d ever need pretty much covered.

So if you’re looking to give your WordPress blog a bit of a boost (horrible pun I know), give Jetpack a whirl!

Committing your plug-ins to SVN tends to break this (very cool) auto-update functionality. SVN adds a hidden “.svn” directory to each directory you commit. WordPress auto-update tries to delete the updating plug-ins folder before downloading and extracting the new version into the “wp-content/plugins directory”. WordPress isn’t able to delete the “.svn” directories so the auto update process fails, leaving you without the plug-in you were trying to update (since it deleted it before failing).

So what’s the solution? Well you could download the latest plug-in version and manually extract / commit it to your repository; but that’s too long winded (and boring). The ideal solution lies in the use of the svn:externals property. It allows you to attach an external repository location to a folder in your own repository. Since all WordPress plug-ins are hosted in the WordPress repository you can update all your plug-in’s directly from there with a quick “SVN Update”! Perfect!

You can do this via SSH and the command line or you can do it via a SVN client with a GUI (I use TortoiseSVN). I’ll be showing you how to do it via the GUI.

First you need to remove the plug-in you want to update from your repository if it’s been added. This may seem a little strange as you are trying to update it; but we need to update from an external repository and if a version already exists it will fail:

Delete the plug-in you need updating from the repository first

Next you need to setup your svn:externals property on the “wp-content/plugins” directory via the properties menu:

Edit the properties on the 'plugins' directory.

Now for the tedious bit. For all the plug-ins you want SVN to auto-update, you will need to find the WordPress repository URL for. So for the example, to update Akismet and All in One SEO pack you will enter the following:

Add the plug-in repositories to the externals properties, one per line.

Once you’ve added all the plug-ins you want to auto-update (remember to remove them first if they already exist in your repository!) commit your changes. Then watch the magic happen via an update:

Plug-ins checked out from the WordPress repository.

Akismet and All in One SEO Pack have been checked out from the WordPress repository trunk. Every time you do an update SVN will check for new versions of the plug-ins. Great stuff! There is a slight warning with checking out from trunk; the developer could be working on a new release and unfinished code may have been committed, so the plug-in may be broken if updating from trunk! To get around this you may want to checkout from the plug-in tags (final versions) instead. To do that change the repository URLs to:

Unfortunately this will involve changing your svn:externals property every time a new version of a plug-in comes out, but it’s less likely your plug-ins will break. Note: Remember to replace the tag version number with the latest version.

I hope this little tip helps you streamline your deployment!

P.S. On a side note, if anybody knows how to auto update from a tag automatically please leave a comment, I’d love to know if it’s possible.

The design and layout layout had already been created in the usual fashion. All that was left to do was to layer on all the JavaScript goodies (the fun part!). While implementing jCarousel I ran into a curious console error message:

“jCarousel: No width/height set for items. This will cause an infinite loop. Aborting…”

When I checked the carousel CSS, the item width had been set:

Strange. The width had been set, so the error message must be from something else. After a few minutes investigation it turned out that the carousel didn’t have a parent with a set width. When fired the carousel is wrapped with two divs; one wraps the carousel, the other wraps the carousel and the navigation. Neither of these divs have an explicit width set which is what was causing the problem. It was a very quick fix in the end:

Upon a little more investigation it seems you can fix this issue in other ways too. Instead of using a class of “product” to set the item widths I tried using the following:

Very strange! The CSS in both cases changes the same elements, it just ignored the width in the ‘product’ class.

So for anyone else encountering the same “No width/height set for items” issue here’s a quick check list for you to try:

1. Make sure you set a width on the items (duh!). Maybe try different CSS selectors if necessary.
2. Set a width on the “jcarousel-container” class or one of its parents.
3. If all else fails, adapt one of the skin examples bundled with jCarousel.

The last one is very annoying if you have your carousel already styled up, but it is guaranteed to work.

What Aloha actually does is make the content editable right on the page; no need to jump into the CMS, find the page, make the changes then preview the result. Just click on the text you wish to edit and type away. Done! It’s hard to believe it actually works until you try it. Why not give it a go on their demo page. It incorporates a few HTML5 technologies which could cause issues with older IE versions, but the demo page seems to work (with a few quirks).

Quickly and easily edit the demo webpage.

The core has been written to be very small and streamlined, with additional functionality being added by the way of user contributed plug-ins. There’s already an extensive API for developers to play with so I’m sure many of the missing features will be plugged very soon.

There are alternatives about such as TinyMCE and CKEditor, but they’re integrated directly into a CMS’ administration pages rather than as an inline editor like Aloha. Now before you get too excited there are a few cons:

• It isn’t as simple as just dropping the scripts into a page, it needs to be integrated into a backend system for the changes to be saved.
• Still in early development so could be quite buggy.
• Doesn’t work with Opera Browser at the moment but this is being worked on.
• Some features aren’t available yet, like image / media insertion. But I’m sure these will be developed as it matures.

So there are still a few issues to iron out but it all looks very promising! There were even murmurs on Twitter today about a WordPress plug-in and a Drupal v7 module (not 6 though I presume) in development. So it won’t be long before we’ll be able to try it out on a live site; hopefully it’s also simple enough for clients to use too!

Back when Snipplr was young, Tyler Hall wrote a WordPress plug-in for Snipplr that allowed you to embed your snippets directly into your posts. What a great idea; unfortunately it hasn’t been updated since 2006 and much has changed in the world of WordPress. Enabling the plug-in in it’s current state is a little flakey; so I’ve decided to update it for WordPress 3.0+.

The plug-in is called ‘Snipplr Snippets’ and is available to download from the WordPress plug-in repository. I’ve used many of the functions that were in the old plug-in so it isn’t a complete rewrite but much of the structure has changed (big thank you to Marcin Dominas helped with a couple of issues i was having at first).

Snipplr Snippets sidebar widget in action.

The administrator area has been updated and there are a couple of new features available which hopefully are self explanatory. I’ve also updated to the latest version of GeSHi for the syntax highlighting, if you don’t like the look a feel of the outputted code simply disable the plug-in CSS in the site header (admin panel), copy to your style.css and modify as needed. For the plug-in to work you will need a Snipplr account and an API key (available from the settings page).

Once you’ve installed the plug-in and enabled it, it’s dead simple to include a snippet into your blog post like so:

Where the ## is the ID of the snippet you wish to include in the post (you can get this from the snippet URL). The code below is pulling in a snippet directly from Snipplr using the plug-in:

I’ve tested the plug-in and it seems to work fine, there was a warning from the CodeColorer plug-in because it also uses GeSHi for syntax highlighting but I haven’t noticed anything break because of it. If it does please let me know and I’ll fix it. If you have any suggestions / bugs leave a comment and I’ll see what look into implementing / fixing them. Download here.

After updating to WordPress 3.0 (yay!) I decided to check the plug-ins that I’ve written to see if they still worked in version 3.0; to my dismay Post Thesaurus had stopped working… nooooo! Not good! A quick scan using Firebug revealed the issue: the Headspace2 plug-in.

Headspace2 is a superb plug-in that allows you to tweak the SEO potential of your site. There are tonnes of options available; All In One SEO is easier to use, but I prefer the flexibility of Headspace2. The problem was occurring in the headspace-tags.js file:

This error was stopping the rest of the JavaScript on a post page from firing (hence breaking Post Thesaurus). Looking at line 76 of headspace-tags.js you will see:

The code seems to be falling over when there are no tags, so I just added a ternary operator which checks the array length first.

If there are no tags create an empty array, else run the usual code. Adding this code fixed the issue and Post Thesaurus works again. Phew! Panic over. I’m sure this error will be picked up by the developer straight away and fixed in the next update.

After finding I use the word ‘great’ a little too much, I thought it was about time to do something about it. Here are a few screenshots of the plug-in in action:

Notice the widget in the top right corner.

The widget has completed a search and populated the results panel.

Big thank you to Big Huge Labs for providing the excellent API. I’ve included an admin page with a few settings (under ‘settings’). One feature to note is the ability to enter your own API key. I’ve added this just in case the plug-in starts exceeding the 10,000 requests per day a single API key is allowed. Sign up is simple and only takes a couple of minutes, then you’ll have 10,000 requests per day all to yourself.

I’ve implemented the API using a little jQuery Ajax goodness and some JSONP. Since jQuery is used by the WordPress admin by default, there’s no additional overhead in having to add it manually.

Grab the plug-in off the WordPress site here, or you can download the zip from my site here (Version 1.0.0.0).

Hope you find it useful, any feature requests or bugs leave a comment below.

Tab Down simply hides content above the page which a user can then access via a floating tab. It’s easier to illustrate using a couple of demos. Demo 1 pushes the page content down with the tab, where as demo 2 tab content floats over the top of the page content. You can easily switch between versions by passing true or false to the “floating” option when calling the tabDown method.

Demo 1 example with floating set to false.

The plug-in is simple to use and has a number of options to allow customisation:

• Floating: Sets if the tab floats over the main content or pushes it down (default: true)
• Time: Time in milliseconds for the slide animation (default: 1000)
• Container: If your tab content is inside a “wrapper” div, let the plug-in know the selector for this div, see demo 1 for an example (default: “body”)
• Downtext: The text used in the tab before sliding down (default: “Down”)
• Uptext: The text used in the tab after sliding down (default: “Up”)
• Easing: For smoother animation you can use animation easing, requires the jQuery easing plug-in (default: “swing”)

View demo 1 and demo 2 or download the code (version 0.1 – updated 2nd Apr 2010).

jQuery.staggerNaver simply delays each fadeIn animation on a set of list items to create a type of ‘wave’ effect. The plug-in can accept an object with custom user settings:

• animateTime: Time taken for fadeIn animation in milliseconds (default: 210)
• easing: Easing method used, requires the easing plug-in if not default (default: “swing”)
• onePageOnly: Use only on one page e.g. your home page (default: false)
• onePageSelector: If you are only using the animation on one page, what selector would identify to jQuery that you are on that page? (default: “#home”)

I’ve included the one page only setting because as with any set of page animation it can sometimes become very annoying, especially if it does it on every page load!

View a demo or download (version 0.1 – updated 25th Feb 2010).

The effect is a scalable background image; as you expand / contract the browser window the background image scales up and down with respectively. Unfortunately it isn’t possible to do using only CSS 2.1; it’s possible using CSS3 using the background-size property, though not yet widely supported. The technique doesn’t use a background image, it uses an absolutely positioned image to achieve the same effect; so it could be considered a hack. If you’re not sure what I mean, here’s a demo. It’s quite simple to use; here’s the basic HTML:

The plug-in is called using (with custom settings):

The plug-in accepts an object as an argument with custom user settings:

• imageSelector: The ID or class of the fake background image (default: “#bgImage”).
• centerAlign: Align the image in the center of the container, both vertically and horizontally (default: true).
• containerPadding: Padding in pixels that expands the image slightly in relation to it’s container to minimise seeing behind the image when scaling up and down in certain browsers (default: 80).

A couple of things to note:

1. You must have a container div for the image, using the body tag returns strange results.
2. The resize event in Firefox is a little weird, it doesn’t fire continuously as you scale up and down so you can sometimes see the container background when scaling. There are plug-ins that make the resize event consistent across browsers.
3. Since this is a JavaScript dependent effect it may be worth adding the fake background image using JavaScript
4. It’s better to use a larger image for scaling, as expanding a smaller image will look fuzzy and out of focus.

Any questions / ideas for expanding this plug-in then leave a comment. View a demo or download (version 0.1 – updated 17th Feb 2010).