Below I have compiled a list of the 24 most stunning free Drupal themes in the community to-date. These are the best of the best and you won’t find better ones anywhere. Not yet anyways. But with Drupal’s bright future not so distant, there is sure to be more added  to this list in the coming months.

1. Ebizon Redfire

Compatible with Drupal 5 & 6

Ebizon RedFire is a strict xHTML validated, standards compliant CSS based drupal template with mission statement, breadcrumbs, custom footer. It is a fixed width with beautiful red, black on white background color theme.

demo | download

2. Sky

Compatible with Drupal 6

This is a center aligned, CSS-based (no tables), multi-column layout theme, with some configurable color options, and support for many core configurations and some popular contributed modules.

demo | download

3. Acquia Marina

Compatible with Drupal 6

Acquia Marina is an advanced theme developed by TopNotchThemes in partnership with Acquia for their commercially-supported Drupal distribution. It contains the same kinds of features you’ll find in our other Drupal themes.

demo | download

4. Marinelli

Compatible with Drupal 6

Marinelli is a 3 column, tableless layout theme with a wide image banner and a “top-tabbed” primary-links system.

demo | download

5. Agregado

Compatible with Drupal 6

Agregado was originally designed by Darren Hoyt and Matt Dawson for WordPress and commissioned by the folks at Smashing Magazine. Ported to Drupal theme by Leow Kah Thong.

demo | download

6. Color Paper

Compatible with Drupal 6

Color Paper was initially created by the DreamTemplate team for WordPress. This theme aims to combine visual appeal with clean typography and vivid design elements. It was created by them especially for Smashing Magazine and its readers. Which was later converted to a Drupal theme by Leow Kah Thong.

demo | download

7. Acquia Slate

Compatible with Drupal 6

Acquia Slate is an advanced, dark, corporate Drupal theme developed by TopNotchThemes in partnership with Acquia for their commercially-supported Drupal distribution.

demo | download

8. Worthapost

Compatible with Drupal 6

Addari is another clean theme contributed to Drupal from Worthapost.com. This theme targets those who want cleanliness and web 2.0 mixture for their Drupal based website.

demo | download

9. Analytic

Compatible with Drupal 6

Clean modern theme with fine tuned css, will be great for blogs, communities and online media.

demo | download

10. Colourise

Compatible with Drupal 6

demo | download

11. Dark Elegance

Compatible with Drupal 6

This theme mainly focuses on simplicity in usability, accessibility, typography & is built around a css-based (tableless) layout. The color palette uses simple flat dark colors which makes it a clean & fast loading theme.

demo | download

12. Magazeen

Compatible with Drupal 6

This bold magazine 2-col-theme was designed with the main focus being on typography, grids and magazine-look. It was created especially for Smashing Magazine and its readers.

demo | download

13. Pixeled

Compatible with Drupal 6

demo | download

14. Scruffy

Compatible with Drupal 6

Scruffy is a grungy, two-column blog theme originally designed for Wordpress by Cobus Bester. The Drupal port preserves the same fundamental layout, with minor tweaks to work with non-node pages, Drupal status messages, and so on.

demo | download

15. The Morning After

Compatible with Drupal 6

This is a port of the Wordpress theme The Morning After to Drupal/ProsePoint, developed as a subtheme of Zen.

demo | download

16. Mulpo

Compatible with Drupal 6

Mulpo is the new theme for mulpo.com. It is a simple clean theme with semantic markup, ideal for blogs. The mulpo theme manages to look very stylish with just one background image, all the rest is done with CSS. The current release of the mulpo theme has semantic clean markup, and is very very lightweight. Mulpo has only been tested in Firefox and Safari.

demo | download

17. 960 Robots

Compatible with Drupal 6

960 Robots is a theme created by Lullabot for its Drupal theming videos and DVDs. This theme, based on the 960 grid system, features two columns on the right side of the page, a two-column footer, calandar-page dates for posts, and real-name usernames in posts (requires profile field with the machine name “profile_real_name”). The theme also uses Twitter’s search API to display a random message based on a configurable search string as the site’s slogan (PHP5 required).

demo | download

18. Inove

Compatible with Drupal 6

demo | download

19. Simply Modern

Compatible with Drupal 6

Simply Modern is a table-less, CSS driven design sporting an advanced feature set.

demo | download

20. Summertime

Compatible with Drupal 6

Summertime is a beautiful theme with lots of small fancy things which will make your Drupal website look unique.

demo | download

21. Compositio

Compatible with Drupal 6

Beautifully crafted blog theme from Design Disease. Designed to work with the Activity Stream and Tagadelic modules. 2 col only. Ported using the Genesis ULTRALITE starter subtheme.

demo | download

22. 2 Tone

Compatible with Drupal 6

Simplistic two tone theme is perfect for any drupal website! It can be used as a theme for your personal blog or your own company website.

demo | download

23. Arthemia

Compatible with Drupal 6

A port and modification of the Arthemia Free Wordpress theme converted to Drupal The theme is of high quality, has 11 configurable regions and can be used in one and two column layouts.

demo | download

24. Lite Jazz

Compatible with Drupal 5 & 6

LiteJazz is a GPL theme by RoopleTheme. It features 3 color styles, 12 fully collapsible regions, suckerfish menus, fluid or fixed widths, easy configuration, and more.

demo | download

WordPress ()

Mashable’s ()

Fight Spam

Akismet – Antispam plugin from the creators of Wordpress that uses a central database of spam comments to flag spam. Requires a free API key from Wordpress.com ()

Spam Karma – Analyzes comments for spam based on a karma system.

Bad Behavior – Prevents spambots from even accessing your site by analyzing their HTTP requests.

Did You Pass Math? – Asks commenters a simple math question before their comments are posted.

Comment Timeout – Closes comments on old posts.

Encourage Commenting

BlogFollow – Shows a snippet of the commenter’s blog at the bottom of the comment.

DoFollow – Removes “nofollow” attributes from links in comments so search engines can follow them.

DoFollow Trackbacks – Removes “nofollow” attributes from trackbacks

Show Top Commentators – Lists the most frequent commentators on your blog, along with links to their blogs, in your sidebar.

Improve appearance

Nicer Trackbacks – Improves the appearance of trackbacks from other blogs.

WP-NoSh*t – Filters bad words from comments.

Numbered Comments Adds numbers to comments.

AuthorHighlight – Highlights comments by the blog’s author.

Comment Highlighter – Styles comments based on the author’s name, email, or URL.

wp-chunk – Truncates long URLs in comments to prevent them from stretching the page.

Enable rich comments

Custom Smileys – Adds clickable smiley emoticons to comments.

TinyMCEComments – Turns the comment box into a full-featured rich text editor.

Live Comment Preview – Allows readers to preview their comment before posting.

Edit Comments XT – Lets commentators edit their own comments.

Enable avatars

Gravatar () – Displays user-selected avatars from a central database next to comments.

Favatars – Pulls the favicon from a commenter’s blog or website, and uses that for their avatar.

MBLA – Adds user images from MyBlogLog to comments.

OpenID Comments – Lets readers comment with their OpenID identity.

Show off comments

WP-Most Commented Posts – Displays posts with the most comments in the sidebar.

Latest Comments with Avatars Reloaded – Shows the latest comments, along with the MyBlogLog avatars of the commenters.

Allow better conversation

Simple CoComments – Tracks the conversation across blogs.

Comment Karma – Digg ()-style voting on comments.

Quoter – Allows users to quote a previous comment in their comment.

Whisper – Lets users “whisper” comments that are only visible to one person.

Moderate comments effectively

Comment Twitter SMS Notification – Notifies you of new comments through Twitter SMS.

Bannage – Adds the ability to ban users from commenting by name, email, or IP.

CommentCentral – Allows batch opening and closing of comments on multiple posts.

In this tutorial, I’ll be covering the various things you can do with the post image feature. Some things will be specific to end users while others will be useful for theme and plugin developers.

One important thing to note is that this new feature is an image-based representation of a post. The image itself is directly tied to your post. You shouldn’t think of it as something different than that.

How does an end user make use of this feature?

First, your theme must add support for it. Otherwise, you won’t be able to use it. At this point, let’s assume that your theme does support it. I’ll go over instructions for theme authors later.

To use this feature, you must be within the post editing screen of your WordPress admin. On this screen, you’ll see a new meta box labeled “Post thumbnail” (or “Page thumbnail” for pages). There’ll be a link to “Set thumbnail,” which will allow you to use the media uploader to load a new image.

It’s not just for thumbnails

Even though it is called “post thumbnails,” we can technically use the feature for all sorts of things (e.g., feature images, medium-sized images for the front page, etc.).

By default, WordPress gives you several image sizes each time you upload an image. These image sizes are:

• Thumbnail
• Medium
• Large
• Full (the image you uploaded)

Some plugins even extend this by allowing more intermediate sizes. The important thing is that you understand that more than thumbnails can be used here.

How to add support for the post image feature in a theme

Theme authors, I’m going to make this simple for you. You only need one line of code to turn this feature on for your users. Add this to your theme’s functions.php file:

add_theme_support( 'post-thumbnails' );

Or, you can register support for specific post types. For example, let’s suppose you wanted to add thumbnail support for both the post and movie post type but not for the page post type. You’d use this instead:

add_theme_support( 'post-thumbnails', array( 'post', 'page' ) );

Of course, that one line doesn’t actually add anything to the front end for you. You’ll need to call the image somewhere within The Loop in your template files. For example, you might want to add thumbnails to your category archives. You’d do this by adding this line of code:

<?php the_post_thumbnail( 'thumbnail' ); ?>

Or, maybe you have a section on a special template that calls for medium-sized images:

<?php the_post_thumbnail( 'medium' ); ?>

Or, a huge sliding feature area on your front page and need the full-sized image:

<?php the_post_thumbnail( 'full' ); ?>

That’s all there is to it. As a theme author, you can hand over some powerful functionality to your users with just a couple of lines of code.

The rest of this tutorial will focus on developer features and some options for using older images.

Checking if the post has an image

Sometimes, you may need to check if a post has an image. There’s a function for that called has_post_thumbnail(), which will return true or false based on whether there’s an image.

In this example, we’ll check if there’s an image. If there’s not, we’ll show a default image instead.

<?php
	if ( has_post_thumbnail() )
		the_post_thumbnail( 'thumbnail' );
	else
		echo '<img src="default-image.png" alt="Example Image" title="Example" />';
?>

Getting the post image ID

Maybe you need to write your own custom script but still want to allow users to upload their own images. You can grab the post image ID and use it. This ID is saved as the meta value for the meta key _thumbnail_id. It is the ID of the attached file.

You only need to call the function in your code like so:

$image_id = get_post_thumbnail_id();

How to return the image instead of displaying it

In some scenarios, you might want to return the post image for use in your PHP code instead of displaying it.

Here’s an example of that functionality:

$image = get_the_post_thumbnail( $post->ID, 'thumbnail' );

How to filter the image size

Some plugin developers may want to filter the image size (or maybe even child theme authors). The post_thumbnail_size filter hook is available for that. The filter function below is for changing the thumbnail size to medium.

Add this PHP code to your theme’s functions.php file or your plugin file:

add_filter( 'post_thumbnail_size', 'my_post_image_size' );

function my_post_image_size( $size ) {
	$size = 'medium';
	return $size;
}

Changing the HTML output of the post image

There may be some scenarios where you’ll want to change the HTML markup of the displayed image. In this example, I’ll show you how to wrap the image with a link to the post.

Add this PHP code to your theme’s functions.php file or your plugin file:

add_filter( 'post_thumbnail_html', 'my_post_image_html', 10, 3 );

function my_post_image_html( $html, $post_id, $post_image_id ) {

	$html = '<a href="' . get_permalink( $post_id ) . '" title="' . esc_attr( get_post_field( 'post_title', $post_id ) ) . '">' . $html . '</a>';

	return $html;
}

What happens to my old images/thumbnails?

If you’re like me and many others, you may have been using custom fields to add images to your posts for years. If you switch to this new method, everything will be lost.

I’ve got a solution for this problem: The Get the Image plugin.

Version 0.4 will be released when WordPress 2.9 is out. Not only will support be added for the new WordPress post image feature, but you won’t lose all of the hard work you’ve put in. The plugin will have the ability to check for post images in five different ways (in the below order):

• Custom fields.
• New post image feature.
• Attached image.
• Scan the post for images.
• Default image.

For those of you already using this plugin or a theme of mine that includes the script, you’ll only have to upgrade the plugin or theme. The feature will be turned on for you by default, so you will be able to start using the new feature without touching anything but an upgrade button.

Have fun with your new post images

I hope this tutorial has given you an in-depth look at the post image feature. There are some limitations, but on the whole, this feature will make things much easier for end users compared to the currently-available methods.

If you’re a user of my Get the Image plugin or Hybrid theme, look out for an update within a few days of WordPress 2.9. You’ll be able to start using the post image functionality soon.

Keep in might that these are new releases and so, their stability and status should be considered as BETA. You might want to test them on a backup server before going live. The descriptions listed here are those submitted by the plugins’ authors and do not necessarily express my views.

1. WP Content Slideshow

WP Content Slideshow shows up to 5 Posts in a very nice and powerfull Javascript Slideshow. On the left side of the Slideshow it displays an image for every post. On the right side, there are all the titles (and a small description under the title) of the posts. The Slideshow highlights the active post and repeats automatically after getting to the 5th post. You have a powerfull Administration Area to adjust the category, the number of posts, the width and height, and many colours for the Slideshow!

Download: WP Content Slideshow
Compatibility: 2.6+

2. Sidebar Generator

Now you can create as many sidebars as you need for any page you want. Thats right, page/post specific sidebars. You can easily seperate your site into sections, or make every single page have specific sidebar content on it. Great for CMS sites.

Download: Sidebar Generator
Compatibility: 2.8.0+

3. WordPress Tabs Slides

Tabs and Slides (in post/page) Plugin gives you the ability to easily add content tabs and/or content slides. The tabs emulate a multi-page structure, while the slides emulate an accordion-like structure, inside a single page!

Download: WordPress Tabs Slides
Compatibility: 2.5+

4. Custom Login Page

With the Custom Login Page, you can change the background image of your login page, the background image/color of your login form div, the main logo image of your login page, and add custom CSS. All through a simple interface. Remember to view the Help tab at the top of the settings page of the plugin.

Download: Custom Login Page
Compatibility: 2.0.2+

5. Featured Page Widget

Allows you to feature pages on your sidebar using an excerpt of the page and a text or image link to the page.

Download: Featured Page Widget
Compatibility: 2.8 – 2.8.4 (maybe 2.8.5)

6. Ecwid Shopping Cart

Ecwid is free full-fledged shopping cart that can be easily add to any blog. It offers the performance and flexibility you need, with none of the hassles you don’t.

Download: Ecwid Shopping Cart
Compatibility: 2.7+

7. SubHeading

This plugin uses a custom field to allow subheadings to be added to both posts and pages. The custom sub heading field is re-positioned so that it is displayed directly below the main title.

Download: SubHeading
Compatibility: 2.8.2+

8. ShowTime Slideshow

Displays all pictures attached to a post/page as a slideshow. Simple setup. This plugin requires Adobe Flash, reverts nicely to default WordPress gallery if Flash is not found. Choose among high quality transitions. Ken Burns (pan&zoom) and many other effects. Full Screen mode.

Download: ShowTime Slideshow
Compatibility: 2.7+

9. Quick Adsense

Quick Adsense is an Ads management Wordpress plugin. It offers a quicker & flexible way to insert Adsense or any Ads code into a blog post. Besides, it can randomly place the Ads anywhere within a post. It comes with a simple setting page, and it does not overwhelm you with complicated customizable options.

Download: Quick Adsense
Compatibility: 2.5 – 2.8.4 (maybe 2.8.5)

10. Members

Members is a plugin that extends your control over your blog. It’s a user, role, and content management plugin that was created to make WordPress a more powerful CMS. The plugin is created with a components-based system — you only have to use the features you want.

Download: Members
Compatibility: 2.8+

With the buzz created around these themes, regular users became aware of what could really be achieved, and thus, those that could not afford the license of a premium theme, became more selective with the free ones. A good-looking theme was not enough anymore, and WordPress developers realized it.

A good premium theme would bring its developer not only a good amount of money, but also recognition in the community, and this is where the free theme developers scored their biggest points. Now that their “turf” was endangered they had to react, and they did. For premium themes like Thesis or WP Unlimited, users have now alternatives like Thematic, Hybrid, Carrington, WP Framework or my own (even if not a framework) Simple Balance.

Why should free theme developers consider adding an options page?

Because being “cool” is just not enough anymore. Theme developers need to learn how to be useful. Free stuff can be either useless and ignored or useful and praised. I’m yet to see the developer offering a free theme without gaining something from it, be it awareness, expertise, backlinks, donation money, you name it! But none of these are achieved through an uncompetitive – even if free – product.

5 Most looked for options in a WordPress theme

“Stand out from the crowd!” If I had a penny for every time I read this I’d laugh at Shoemoney’s AdSense check image sipping a chilled cocktail somewhere on a tropical island, but you know what? This saying is so true that it cannot be repeated enough, and users KNOW IT! Theme users want to be able to have their own identity online. They need to be able to customize their themes and make them express who they are and what they believe in. And this is where options pages come into play. What are the most looked for options? Let’s see…

1. Logo and / or header image update / replacement

It doesn’t matter if it’s a professionally designed logo or a simple Windows Paint play. If it gives the blogger satisfaction and he wants to display it, let him do so. Add either a file upload box or an input box where the user could enter the full URL to the logo image to use. Same goes for the header images.

2. Layout structure

If you’re developing a 2 column theme, give the user the option to choose to display the sidebar either on the left, or on the right. With 3 column themes, you can give them even more options, like having the content centered, between the sidebars, or having both sidebars on the same side (right or left) of the content. If only takes a couple of PHP conditions and some “visionary” CSS coding.

3. Custom navigation menus

Don’t expect users to want every page that they publish to show up in their blog’s main navigation area. Give them the option to select which pages should show up there, and why not, add their own links, even if external.

4. Custom RSS URLs and email subscription forms

Implementing a FeedBurner email subscription form is fairly easy for any developer, and I’m pretty sure that any dveloper knows how to customize such a script. The fact that it functions mostly based on a simple user ID should make the customization even easier through a theme options page.

5. Advertising management

Not everyone uses services like BuySellAds, or is affiliated with an advertising network. Some users actually prefer to take care of the advertising themselves. So, why not give them the possibility to do so by adding a few more field to the options page. Let them select the number of banners they need displayed, do-follow option, position of banners and so on. It takes a bit to develop, but the user response to it is amazing.

Additional options you could consider implementing

While the 5 options above are the most looked for, some users might also find the following options useful:

• Overall switch between serif and sans-serif typography;
• Theme color adjustments. Here are a couple of web-based color picker scripts you could use: one, two, three and four;
• Alternatively, you can offer a built in color schemes system;
• Custom “featured” areas;
• Additional, customizable widget areas;
• Twitter updates area;
• And the list could go on and on…

The limits are set by your knowledge and enthusiasm

While the enthusiasm is not something you train, but rather have it or not, knowledge can be trained. Remember that the WordPress Codex is your best friend, and the support forums can be of tremendous help. Additionally, Stefan Vervoort of DivitoDesign and WPToy has put together a very useful PDF called the “WordPress Theme Development Checklist“. Do take a look (and use it!).

So, the next time you think of releasing a free theme, ask yourself this: Is you theme competitive enough? If it’s not, it will not stand a chance when the alternatives are so smart!

jQuery 1.4 was recently released. This wasn’t simply a maintenance release as some had speculated; there are many new features, enhancements and performance improvements included in 1.4! This post covers the new features and enhancements that you may find beneficial.

You can download jQuery 1.4 right now, here: http://code.jquery.com/jquery-1.4.js

1. Passing Attributes to jQuery(…)

Pre 1.4, jQuery supported adding attributes to an element collection via the useful “attr” method, which can be passed both an attribute name and value, or an object specifying several attributes. jQuery 1.4 adds support for passing an attributes object as the second argument to the jQuery function itself, upon element creation.

Let’s say you need to create an anchor element with several attributes. With 1.4 it’s as simple as:

jQuery('<a/>', {
    id: 'foo',
    href: 'http://google.com',
    title: 'Become a Googler',
    rel: 'external',
    text: 'Go to Google!'
});

You may have noticed the “text” attribute— you’ll probably be wondering what that’s doing there, after all there’s no “text” attribute for anchors! Well, jQuery 1.4 utilises its very own methods when you pass certain attributes. So the “text” attribute specified above would cause jQuery to call the “.text()” method, passing “Go to Google!” as its only argument.

A better example of this in action:

jQuery('<div/>', {
    id: 'foo',
    css: {
        fontWeight: 700,
        color: 'green'
    },
    click: function(){
        alert('Foo has been clicked!');
    }
});

The “id” is added as a regular attribute, but the “css” and “click” properties trigger calling of each respective method. The above code, before the 1.4 release, would have been written like this:

jQuery('<div/>')
    .attr('id', 'foo')
    .css({
        fontWeight: 700,
        color: 'green'
    })
    .click(function(){
        alert('Foo has been clicked!');
    });

Read more about jQuery(…)

2. Everything “until”!

Three new methods have been added to the DOM traversal arsenal in 1.4, “nextUntil“, “prevUntil” and “parentsUntil“. Each of these methods will traverse the DOM in a certain direction until the passed selector is satisfied. So, let’s say you have a list of fruit:

<ul>
    <li>Apple</li>

    <li>Banana</li>
    <li>Grape</li>

    <li>Strawberry</li>
    <li>Pear</li>

    <li>Peach</li>
</ul>

You want to select all of items after “Apple”, but you want to stop once you reach “Strawberry”. It couldn’t be simpler:

jQuery('ul li:contains(Apple)').nextUntil(':contains(Pear)');
// Selects Banana, Grape, Strawberry

Read more about: prevUntil, nextUntil, parentsUntil

3. Binding Multiple Event Handlers

Instead of chaining a bunch of event binding methods together, you can lump them all into the same call, like so:

jQuery('#foo).bind({
    click: function() {
        // do something
    },
    mouseover: function() {
        // do something
    },
    mouseout: function() {
        // do something
    }
})

This also works with “.one()“.

Read more about .bind(…)

4. Per-Property Easing

Instead of just defining one easing function for a single animation, you can now define a different easing function for each property that you’re animating. jQuery includes two easing functions, swing (the default) and linear. For other ones you’ll need to download them separately!

To specify an easing function for each property simply define the property as an array, with the first value being what you want to animate that property to, and the second being the easing function to use:

jQuery('#foo').animate({
    left: 500,
    top: [500, 'easeOutBounce']
}, 2000);

See this code in action!

You can also define per-property easing functions in the optional options object as property name-value pairs in the “specialEasing” object:

jQuery('#foo').animate({
    left: 500,
    top: 500
}, {
    duration: 2000,
    specialEasing: {
        top: 'easeOutBounce'
    }
});

Editor’s Note – The author of this article, James Padolsey, is being modest. This new feature was his idea!

Read more about per-property easing

5. New Live Events!

jQuery 1.4 adds support for delegating the “submit“, “change“, “focus” and “blur” events. In jQuery, we use the “.live()” method to delegate events. This is useful when you have to register event handlers on many elements, and when new elements may be added over time (using “.live()” is less-costly than re-binding continually).

But, be careful! You must use the event names, “focusin” and “focusout” if you want to delegate the “focus” and “blur” events!

jQuery('input').live('focusin', function(){
    // do something with this
});

6. Controlling a Function’s Context

jQuery 1.4 provides a new “proxy” function under the jQuery namespace. This function takes two arguments, either a “scope” and a method name, or a function and the intended scope. JavaScript’s “this” keyword can be quite tricky to keep a hold of. Sometimes you won’t want it to be an element, but instead an object that you’ve previously created.

For example, here we’ve got an “app” object which has two properties, a “clickHandler” method and a config object:

var app = {
    config: {
        clickMessage: 'Hi!'
    },
    clickHandler: function() {
        alert(this.config.clickMessage);
    }
};

The “clickHandler” method, when called like “app.clickHandler()” will have “app” as its context, meaning that the “this” keyword will allow it access to “app“. This works quite well if we simply call:

app.clickHandler(); // "Hi!" is alerted

Let’s try binding it as an event handler:

jQuery('a').bind('click', app.clickHandler);

When we click an anchor it doesn’t appear to work (nothing is alerted). That’s because jQuery (and most sane event models) will, by default, set the context of the handler as the target element,- that is, the element that’s just been clicked will be accessible via “this“. But we don’t want that, we want “this” to be set to “app“. Achieving this in jQuery 1.4 couldn’t be simpler:

jQuery('a').bind(
    'click',
    jQuery.proxy(app, 'clickHandler')
);

Now whenever an anchor is clicked, “Hi!” will be alerted!

The proxy function returns a “wrapped” version of your function, with “this” set to whatever you specify. It’s useful in other contexts too, such as passing callbacks to other jQuery methods, or to plugins.

Read more about jQuery.proxy

7. Delay an Animation Queue

You can now add a delay to your animation queues. In fact, this works on any queue, but its most common use case will probably be with the “fx” queue. This allows you to pause between animations without having to mess with callbacks and calls to “setTimeout“. The first argument to “.delay()” is the amount of milliseconds you want to delay for.

jQuery('#foo')
    .slideDown() // Slide down
    .delay(200) // Do nothing for 200 ms
    .fadeIn(); // Fade in

If you want to delay a queue other than the default “fx” queue, then you’ll need to pass the queue name as the second argument to “.delay()“.

Read more about .delay(…)

8. Check if an Element Has Something

jQuery 1.4 makes it easy to check if an element (or collection) “.has()” something. This is the programmatic equivalent to jQuery’s selector filter, “:has()“. This method will select all elements in the current collection that contain at least one element that complies with the passed selector.

jQuery('div').has('ul');

That would select all DIV elements that contain UL elements. In this situation you’d probably just use the selector filter (“:has()“), but this method is still useful when you need to filter a collection programmatically.

jQuery 1.4 also reveals the “contains” function under the jQuery namespace. This is a low-level function that accepts two DOM nodes. It’ll return a boolean indicating whether the second element is contained within the first element. E.g.

jQuery.contains(document.documentElement, document.body);
// Returns true - <body> is within <html>

Read more about: .has(…), jQuery.contains(…)

9. Unwrap Elements!

We’ve had the “.wrap()” method for a while now. jQuery 1.4 adds the “.unwrap()” method which does the complete opposite. If we assume the following DOM structure:

<div>

    <p>Foo</p>
</div>

We can unwrap the paragraph element like so:

jQuery('p').unwrap();

The resulting DOM structure would be:

<p>Foo</p>

Essentially, this method simply removes the parent of any element.

Read more about .unwrap(…)

10. Remove Elements Without Deleting Data

The new “.detach()” method allows you to remove elements from the DOM, much like the “.remove()” method. The key difference with this new method is that it doesn’t destroy the data held by jQuery on that element. This includes data added via “.data()” and any event handlers added via jQuery’s event system.

This can be useful when you need to remove an element from the DOM, but you know you’ll need to add it back at a later stage. Its event handlers and any other data will persist.

var foo = jQuery('#foo');

// Bind an important event handler
foo.click(function(){
    alert('Foo!');
});

foo.detach(); // Remove it from the DOM

// … do stuff

foo.appendTo('body'); // Add it back to the DOM

foo.click(); // alerts "Foo!"

Read more about .detach(…)

11. index(…) Enhancements

jQuery 1.4 gives you two new ways to use the “.index()” method. Previously, you could only pass an element as its argument and you’d expect a number to be returned indicating the index of that element within the current collection.

Passing no arguments now returns the index of an element amongst its siblings. So, assuming the following DOM structure:

<ul>
    <li>Apple</li>

    <li>Banana</li>
    <li>Grape</li>

    <li>Strawberry</li>
    <li>Pear</li>

    <li>Peach</li>
</ul>

When a list item is clicked you want to find out the index of the clicked element amongst all the other list items. It’s as simple as:

jQuery('li').click(function(){
    alert( jQuery(this).index() );
});

jQuery 1.4 also allows you to specify a selector as the first argument to “.index()“, doing so will give you the index of the current element amongst the collection produced from that selector.

You should note that what’s returned from this method is an integer, and it will return -1 if the selector/element passed cannot be found in the document.

Read more about .index(…)

12. DOM Manipulation Methods Accept Callbacks

Most of the DOM manipulation methods now support passing a function as the sole argument (or second, in the case of “.css()” & “.attr()“). This function will be run on every element in the collection to determine what should be used as the real value for that method.

The following methods have this capability:

• after
• before
• append
• prepend
• addClass
• toggleClass
• removeClass
• wrap
• wrapAll
• wrapInner
• val
• text
• replaceWith
• css
• attr
• html

Within the callback function, you’ll have access to the current element in the collection via “this” and its index via the first argument.

jQuery('li').html(function(i){
    return 'Index of this list item: ' + i;
});

Also, with some of the above methods you’ll also get a second argument. If you’re calling a setter method (like “.html()” or “.attr('href)“) you’ll have access to the current value. E.g.

jQuery('a').attr('href', function(i, currentHref){
    return currentHref + '?foo=bar';
});

As you can see, with the “.css()” and “.attr()” methods, you would pass the function as the second argument, since the first would be used to name the property you wish to change:

jQuery('li').css('color', function(i, currentCssColor){
    return i % 2 ? 'red' : 'blue';
});

13. Determine the Type of Object

jQuery 1.4 adds two new helper functions (stored directly under the jQuery namespace) that help you determine what type of object you’re dealing with.

First, there’s ”isEmptyObject“, this function returns a boolean indicating whether or not the the passed object is empty (devoid of properties – direct and inherited). Second, there’s “isPlainObject“, which will return a boolean indicating whether the passed object is a plain JavaScript object, that is, one created via “{}” or “new Object()“.

jQuery.isEmptyObject({}); // true
jQuery.isEmptyObject({foo:1}); // false

jQuery.isPlainObject({}); // true
jQuery.isPlainObject(window); // false
jQuery.isPlainObject(jQuery()); // false

Read more about: isPlainObject(…), isEmptyObject(…)

14. Closest(…) Enhancements

jQuery’s “.closest()” method now accepts an array of selectors. This is useful when you want to traverse the ancestors of an element, looking for (more than one) closest elements with certain characteristics.

In addition, it now accepts a context as the second argument, meaning that you can control just how far or how close you want the DOM traversed to. Both of these enhancements accommodate rare use cases but they are used internally to great effect!

Read more about .closest(…)

15. New Events! focusIn and focusOut

As mentioned, to delegate the “focus” and “blur” events you must use these new events, called “focusin” and “focusout”. These events allow you to take action when an element, or a descendant of an element, gains focus.

jQuery('form')
    .focusin(function(){
        jQuery(this).addClass('focused');
    });
    .focusout(function(){
        jQuery(this).removeClass('focused');
    });

You should also note that both of these events do not propagate (“bubble”); they are captured. This means that the outermost (ancestor) element will be triggered before the causal “target” element.

Read more about the focusIn and focusOut events.

Enjoy jQuery 1.4, the most anticipated, most feature-rich, best performing release of jQuery yet!

Well, that’s it! I’ve tried to cover the changes which I think will have an impact on you!

If you haven’t already, you should check out the ”14 days of jQuery“, an awesome online event marking the release of jQuery 1.4, and jQuery’s fourth birthday!

And don’t forget to checkout the new API documentation!

By and large, this release is a plugin developers release with lots of new APIs and abstraction. However, there are significant additions for theme designers and users as well. As a result, unlike previous iterations of this article (I do one for every major WordPress release), I’m going to break this down into sections for each kind of feature.

Themes: the_post_thumbnail()

Theme developers have a new piece of functionality that have become extremely popular in themes these days. As blogs have evolved from journal form into entities that can be very magazine-like, the use of thumbnail images has also grown. Typically, this layout is achieved through the use of custom fields that must be manually created and populated. No more!

As of WordPress 2.9, if you use the built in image uploader, then WordPress handle this for you. Theme designers that wish to support this feature can add the template tag the_post_image() to their themes to achieve proper placement as required by the theme layout. The template tag can optionally take a “size”, which is one of the WordPress default sizes: thumbnail, medium, large, etc. If none is provided, it defaults to your preset thumbnail size.

Example:

Conveniently, if a theme is enabled for post thumbnails, the only “feature” currently offering this support in WordPress, then a new “meta box” will be displayed on the Write screen allowing you to assign a post image.

Themes: Register Support for WordPress Features

Editorial Note: Since this article was published, the code has changed to refer to post-thumbnails, not post-images. As a result, function names have also change. The code and examples included before reflect this change. Sorry for the confusion and sorry specifically to theme devs who have implemented the_post_image() feature already. Just change it to the_post_thumbnail()

This may seem to be an obscure feature, and typically, it’s pretty simple to figure out what I’m talking about just by looking at the header. In this case, it’s a bit more obscure because it suggests a feature that is introduced in WordPress 2.9 and then only for a very niche purpose. I can see this being built out over time, and plugin authors can supply their own use cases.

The concept is simple. If a feature exists — in the core, the only use case is for the thumbnails I described earlier and it is called ‘post-thumbnails’ — then a theme can declare support for the feature using the add_theme_support() function in the theme functions.php. It can only be declared in this file and it requires a feature be assigned a name. As I mentioned, with WordPress 2.9, there is only one feature that is named and that is post-image. Plugin authors can provide their own new functionality using the require_if_theme_supports() function.

Themes would then enable support for the feature by including the following in their functions.php file.

We’ve used the function_exists() check on the add_theme_support() function to ensure backwards compatibility with WordPress installations prior to WordPress 2.9. Similarly (and possibly confusingly in this context), before you would have to check for the existence of a plugin by using a function_exists() or class_exists() piece of logic and loading it if the class or function did exist, but now there are on/off switches to get it done.

Users: The Trash Can

On Windows, they call it the Recycle Bin. On Macs, it’s the Trash. In both cases, the feature exists to help people recover from accidental deletions. We have all had those moments where we nuked something we had no intention of nuking. With WordPress, accidental deletions have been permanent. In WordPress 2.9, everything is recoverable now with a new Trash feature. When you delete a post, page, category, comment, or any bit of content, it is moved to the Trash where you can decide whether to pull it back at a later date.

The Trash Can view. From here, content can be restored or deleted permanently.

Trash collection is done every 30 days by default, but it is possible to change this by editing your wp-config.php file. Add the following to your config file to change trash collection to every 7 days. Modify as needed.

Users: Image Editing

One of the hot new features in WordPress 2.9 is image editing. Now don’t get me wrong. This isn’t Photoshop. And it only support basic functionality at this time. However, image editing will allow bloggers to crop, scale and rotate images from right within WordPress. From the media library, you can edit images by clicking the Edit link under an image, and then clicking the Edit button on the individual image page. This brings up an interface like what is shown below.

The WordPress 2.9 Image Editing Screen

Users: oEmbed

oEmbed, as described at oEmbed.com, is a specification that allows media providers like Flickr, YouTube and others to provide data for consumer applications like WordPress about media. So by including an Embed (Use the File uploader and choose “From URL” and paste the link to the page that contains the media, not the media file itself) in a post or page, WordPress can retrieve the relevant specs on the media file and formulate a properly formatted embed accordingly.

Below is an embed of one of my Flickr photos using oEmbed.

Below, is an oEmbedded YouTube video (Original video removed so here’s the Iron Man 2 Trailer).

If you don’t want to use the GUI for this stuff, you can simply wrap the URL to the media page in embed shortcode tags like this.

The list of supported oEmbed sites in WordPress are as follows:

• YouTube (via oEmbed)
• Blip.tv (via oEmbed)
• Flickr images and videos (via oEmbed)
• Hulu (via oEmbed)
• Viddler (via oEmbed)
• Qik.com (via oEmbed) — never heard of this site, but it was listed on oEmbed’s website, so…
• Revision3 (via oEmbed)
• Google Video (via an internal handler)
• PollDaddy (via an internal handler)
• DailyMotion (via an internal handler)

That said, plugin authors can add new providers if they want by using the oembed_providers filter or override altogether with the WP_oEmbed->providers property.

Plugins: Custom Post Types

One of the strengths of Drupal has been its ability to have multiple types of contents contained in objects that all look alike to PHP. WordPress has supported a variety of content types as well, but it has not been nearly as flexible making WordPress a blog platform with some additional support for pages and attachments. Technically, the only post_types that WordPress has supported have been post, page, revision and attachment. While it has technically been possible to add new post_types (like podcast, mp4, or tutorials – they could be anything, really), it has been a chore and required plugin developers to handle quite a few moving parts in order to make it all work properly.

No longer. Plugin authors now have API to register new post types, opening up the possibility for even more creativity and uses for WordPress.

get_post_type()

The get_post_type() function can only be used in the Loop. It returns the type of post a post is. Keep in mind, I’m using post loosely. All content in WordPress is kept in the posts table thereby inheriting the name “post”, but post is also a kind of content that is associated with blog content (as opposed to page which is a pseudo-static page, attachment which is information about an image or file uploaded with the media uploader, etc).

get_post_types()

The get_post_types() function will return a list of all types of post content. By default, this will be post, page, attachment and revision. Refer to the source code for optional arguments that can be used to control what kind of data is returned.

register_post_type()

As a plugin author, you can use this function to create a new post type. The first argument is the unique handle you want to assign to the post type – let’s call it podcast – and the second argument is an array that contains additional elements. The key one here is an exclude_from_search, which by default is set to true. You actually probably want to set this to false unless you really don’t want this additional content searchable. See below for example usage.

There is currently no user interface for post types. There is a patch in for UI that will likely be included in WordPress 3.0.

Plugins: Comment Meta

There has been a variety of meta tables in WordPress. Meta tables, like usermeta or postmeta, are database tables that contain information about the type of data that is stored in WordPress. It allows plugins and WordPress to assign metadata, such as user roles and capabilities, to pieces of data thus extending that data. Now, there is a comment meta table as well.

Though it is unclear how plugin authors will seek to use this table, the fact that it is available is a major deal as it essentially provides meta tables for every piece of content in WordPress now.

Plugins: Metadata API

With the addition of a comments meta table, it has become effectively redundant to duplicate functions throughout WordPress. You have a get_post_meta() function that does the same thing as a get_usermeta() function except they query data from different tables that also look identical except for the data stored in them.

In WordPress 2.9, there is an entirely new Metadata API that can be used to retrieve data from any of these meta tables.

The add_metadata() function takes a meta type (‘comment’, ‘post’, ‘user’, etc), the ID of the content type, the key and value of the metadata and whether the information should be unique or not (true or false).

You can also use update_metadata(), delete_metadata(), get_metadata() and update_meta_cache() for further wrangling. Refer to wp-includes/meta.php for full documentation.

Themes/Plugins: Theme System Modification

A lot of messiness has been eliminated in WordPress 2.9 theming. For one, new template opportunities exist. Now, instead of looking for a template file called category-x.php, tag-x.php or page-x.php, where x is the ID of one of those types of content types, it will look for these templates second. The first template that is now looked for is based on the slug. So if you have a category, tag or page called foo, the first template to be sought after would be category-foo.php, tag-foo.php, or page-foo.php. If none of these templates exist, then the ID-based template file is looked for.

Additionally, plugin developers can register new directories for themes to be located with the register_theme_directory() function.

System: Database Repair Script

The database occasionally needs a good spring cleaning. Other times, the database needs a repair. WordPress ships with a new script that will do just this. It is housed at /wp-admin/maint/repair.php but in order to use it, you need to create a new (or modify if it already exists for some reason) constant in wp-config.php.

System: Minimum Requirements

PHP 5 is not required yet. That’s coming in WordPress 3.0 will be increasingly implemented over time. But MySQL requirements have been boosted from MySQL 4.0 to MySQL 4.1.2.

Bonus coverage

Other interesting things in WordPress 2.9.

• JSON compatibility, before only beneficial to PHP 5.2, has been backported for use in WordPress
• New ‘Undo’ button when using the Visual Text Editor
• A new sanitization API (with functions like esc_html())
• The emoticon system can be altered using the smilies_src hook.
• Bulk Upgrading of plugins
• Filesystem optimizations pertaining to FTP/SSH etc.
• rel=”canonical” for single posts and pages aiding in SEO
• Minify Admin CSS making for quicker (and smaller) page loads
• Bunny Tags and Jeromes Keywords Importers removed