If you’ve been living under a shell for the past, I dunno 5 years – WordPress is an open source blog posting application. With the advent of version 2.7, the admin section got a great makeover with functionality plus usability enhancements by the bucket load. In this article I will describe where WordPress is using jQuery and the plugins involved.

Thickbox

The first plugin I would like to talk about is Thickbox. Thickbox is a modal window plugin bringing focus to a seemingly popped up window or photo within a page, and removing focus from the page behind it. The most obvious example of this is the “Add Media” functionality within the Add/Edit posts section. What’s great about this implementation is the fact that all your uploading, attribute setting and inserting functionality is handled in one thickbox modal window, no page refreshes. Once complete, the window closes and your blog post has been updated with the new media inserted, again without a page refresh. Thank you ajax!

Thickbox can also be seen in use within WordPress when previewing plugin information, or previewing a new theme before you activate it. Again, ajaxified to the hilt for ultimate usability. Good work guys!

hoverIntent

HoverIntent  is quite a good plugin actually, it simply tries to guess the user’s intent on where they are trying to hover and initiating a callback, rather than the built in javascript hover function which initiates a callback instantly. It does this by waiting for the mouse pointer to slow down and assumes “Right, this is the place I need to run my callback!”.

To see it in action, hover over the “New Post” dropdown at the top of the admin page. A better demo however is on the hoverIntent download page which shows you why it’s powerful.

jQuery.color

Next up, we have the jQuery.color plugin which enables you to animate between colors using jQuery. Think transitioning from red to yellow for example. You can see this in action when you hit the “Approve” button on a comment – you will see the background color transition from yellow to white. Lovely!

Whilst we talk about the comments editing page, functionality such as “Quick Edit” is also powered by jQuery events and load animations, as well as integrating ajax calls for a seamless experience.

jQuery UI

If you don’t know what jQuery UI is, its a library that sits on top of jQuery enabling advanced animations and effects. WordPress is using a number of jQuery UI effects in various places which I’ll show you below:

Resizeable

Resizeable does what it says on the tin – it will resize an element based on interaction from the user. A typical example is expanding the size of a box object like the image above. This is being used within the New/Edit Post page enabling you to resize the edit window for your blog post.

Sortable

Sortable is another effect which easily allows the user to perform drag/drop actions on elements to re-sort them. The most obvious demo of this is on the Admin homepage, where you can move the various “portlets” around the page, rearranging them to a view that you prefer. WordPress obviously have to go one step further though and save the new portlet positions to the database so that they are in the same position every time.

Sidebar

The Admin sidebar is another jQuery controlled element. The minimizing and maximizing control as well as the show/hide menu items is all handled. See the postbox.js file for more on this…

HotKeys

HotKeys is a plugin which enables you to register key combinations like CTRL+B or whatever in order to carry out functionality. The most obvious example of this is CTRL+B or CMD+B for Apple to make highlighted text bold. Dead easy to implement, and great from a usability perspective.

Conclusion

That’s it for this article. I hope you enjoyed it, and feel free to give your comments and feedback below on WordPress’s implementation of jQuery, and where you could see improvements.

Resources to help you learn:

Learning jQuery	JQuery In Action	jQuery Reference Guide

This entry was posted on Tuesday, February 17th, 2009 and is filed under Case Study, Development, WordPress, jQuery. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.