You want a jQuery slideshow for your WordPress blog? - on the front page, or maybe in the sidebar? No real problem, all the javascript is taken of with the help of a jQuery plugin, all we have to do is figure out how to get the post data.

And to keep things really simple, this is going to use the thumbnail functions in WP 2.9 – no need to mess around with custom fields any more.

Firstly, you do have to explicitly declare the new thumbnail system in functions.php – and best to wrap it up in an “if function exists” to avoid problems for older WP installs.

if (function_exists('add_theme_support')) {
add_theme_support( 'post-thumbnails' );
add_image_size('slideshow-image', 300, 160); // for front page slideshow
}

The smart move is to define a “Featured” category – any post in that category will be available for the slideshow, and that’s the selection taken care of. Create a category – call it featured, or anything, but make a note of the cat_ID – mouseover a category on the admin categories page and it’ll be in the url, something like:

http://testblog.com/wp-admin/categories.php?action=edit&cat_ID=3

The ordering will be by date, newest first. (Don’t forget you can tweak the timestamp of a post if you really want to just to get the order exactly as you want it).

So create a couple of posts in this category and add some thumbnails to them – since our slideshow is going to be 300px by 160px, make sure they’re bigger than that. Then, in home.php, or index.php, where ever you want the slideshow to appear, add:

<?php

$featured_category_id = 3;
$number_of_posts = 4;

$args = array('showposts'=>$number_of_posts, 'cat'=>$featured_category_id);

$slideshow_query = new WP_Query($args);

?>
<div id="slideshow">
<?php
// let's keep a record of the post IDs as we go, in case we want to omit these from other post loops/lists on the same page
$duplicates = array();

while ($slideshow_query->have_posts()) : $slideshow_query->the_post();

//add the ID to the duplicates array for future reference
$duplicates[] = $id;

//test to see whether there's a thumbnail associated with the post
if (has_post_thumbnail()) {
?>
<div class="post-thumbnail">
<a href="<?php the_permalink(); ?>">
<?php	the_post_thumbnail('slideshow-image'); ?>
</a>
</div>
<?php	}
endwhile;
?>
</div>  <!-- end of #slideshow -->

Next, some javascript. We can use the excellent jQuery Cycle Plugin – as the package stands currently, we’ll use jquery.cycle.all.min.js – which allows all the possible transition effects etc. – in practice, you may well want to use the lighter versions…

* For a standard production site, always use min = minified, rather than pack = packed – pack may be a smaller filesize, but it doesn’t run quicker….

We need a very quick script to configure and activate the plugin – so create a new file, slideshow-activate.js

jQuery(document).ready(function($){
$('#slideshow').cycle({
fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
});
});

Later, there are lots of options here, transition speed, pausing etc. – consult the plugin pages for ideas.

We need to get our scripts on the WordPress page, and indicate that they depend on jQuery being loaded – making use of the WordPress functions wp_register_script and wp_enqueue_script – so in functions.php

add_action('wp', 'js_head_load');

function js_head_load(){

if(is_admin()) return;  //so that we're not loading unecessary scripts in the admin

wp_register_script('cycle', get_bloginfo('template_directory')  . '/scripts/jquery.cycle.all.min.js', array('jquery'), '1.0');

wp_enqueue_script('slideshow-activate',  get_bloginfo('template_directory')  . '/scripts/slideshow-activate.js', array('jquery', 'cycle'), '1.0');

}

And then, don’t forget to put the 2 files into /scripts in your theme folder…

That should give you a working slideshow – ready to be styled with some CSS. Note that the way the Cycle plugin works is that it looks to rotate the immediate children of the div being called – here, they’re images, they could be eg. divs – so if you add a wrapper div(s) you may need to adjust slideshow-activate.js.

And if it’s not working, check first that the right scripts (jQuery, Cycle, slideshow-activate) are actually being loaded and in the right order, by looking at the page source – and check you’ve got thumbnails attached to the relevant posts…

You could go on to tidy this up – avoiding the hard-coded category id by having something in the theme options admin to change the id for example. Also, as said earlier, there’s a lot of scope in playing with the plugin parameters to get exactly the slideshow you want…

Lastly – the record of the duplicates we kept – the method for omitting them from subsequent Loops of posts is here: Multiple WordPress query duplicates

By default, WordPress loads the version of jQuery that comes with the package. But there is an alternative way of doing it and that’s to use the AJAX Libraries API at Google Code – use their bandwidth, why not…

A few lines added to your functions.php in the theme you’re building and you’re ready to go.

wp_register_script() – the useful point is that you can use this function to access scripts hosted elsewhere…

Just add this code to your functions.php file:

add_action('template_redirect', 'js_head_load');

function js_head_load(){

if(is_admin()) return;

wp_deregister_script('jquery');
wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js');
wp_enqueue_script('jquery');
// and then any other scripts to register and queue...
}

Notice the first line of the function ensures that the jQuery isn’t loaded on WP admin pages - if a script isn’t needed, don’t load it on the page – and in this case jQuery in noConflict mode can cause the admin rich text editor and the widget drag and drop interface to go awry..

The advantages:-
You’ll be able to update the version your site is using quickly and easily, probably a good thing.

Google Code tends to have a policy of only including versions demonstrated to be stable, jQuery 1.2.4 and 1.2.5 didn’t make the grade

The user may already have it cached in their browser via some previously visited site instead of downloading from a location on your site (and if enough sites do it, the chances are that much greater that they will have a copy in the cache).

Not just jQuery – check out jQuery UI
http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js
And MooTools, which seems seriously under-used in conjunction with WordPress
http://ajax.googleapis.com/ajax/libs/mootools/1.2.4/mootools-yui-compressed.js

Always grab the minified version.

And lastly, one disadvantage:- googleapis.com does go down very occasionally – but then again a site ought to function, more or less, without javaScript.

Just at the moment the best font replacement technique around is cufón – so how to get this technique into your WordPress theme design?

You’ll need 3 javascript files – best to put them in the theme directory under /scripts

1. The Cufon javascript
2. The individual font javascript – downloaded from cufon – or use their excellent generator http://cufon.shoqolate.com/generate/ (not all fonts as .ttf will do the trick, there’s issues of licensing in terms of web embedding)
3. A custom script, very simple, just to activate.

The plan is to get the scripts loading in the WP header, and the best action hook for this is template_redirect – so, in functions.php

add_action('template_redirect', 'them_js_head_load');

function them_js_head_load(){

define(TH_TEMPLATE_URL, get_bloginfo('template_url'));

wp_register_script('cufon', TH_TEMPLATE_URL . '/scripts/cufon-yui.js', array('jquery'), '1.0');
wp_register_script('my_font', TH_TEMPLATE_URL . '/scripts/myfont.font.js', array('jquery'), '1.0');
wp_enqueue_script('fontsactivate', TH_TEMPLATE_URL . '/scripts/fontsactivate.js', array('jquery', 'cufon', 'them_font'), '1.0');
}

fontsactivate.js is as simple as you want to make it – just this, for example, will replace all post h2 headings on the page

Cufon.replace('.post h2');

Don’t imagine it’s a great idea to replace all the text on a page with a custom font, that’ll make the server chug a bit – stick with headings…

To refine a previous post on WordPress and jQuery and the use of the wp_enqueue_script function, its paths and dependencies.

As a barebones example, this is how we do it when we we’re enqueueing – if that’s a word – the jQuery Cycle plugin, so that we can make a slideshow on the page.

The important point is probably in the dependencies – firstly, the Cycle plugin depends on jQuery, so has to be loaded after – secondly, our custom script to run the whole process on depends on the jQuery Cycle plugin and therefore also on jQuery and is the last to load.

The custom script we’ve written is in them_directory/scripts/them.cycle.js – something very simple, like this:-

jQuery(document).ready(function($) {

$('#images').cycle({
//some parameters
 });
});

(Don’t forget, the dollar $ object isn’t defined in WordPress jQuery (historical reasons) – hence the form of the first line)

This is client-display side javascript, as opposed to admin-side, (which tends to follow slightly different rules in the WordPress setup) and in this case, the action hook ‘template_redirect’ is usually the time to do it.

To enqueue the jQuery library itself is simple – it’s already registered by default in WordPress, no need to specify other than the default path and version.

So in functions.php

add_action('template_redirect', 'them_js_head_load');

function them_js_head_load(){

	//register the plugin
	wp_enqueue_script('jquery-cycle', THEM_TEMPLATEURL.'/scripts/jquery.cycle.lite.min.js', array('jquery'), '1.0');
	//register the custom script
	wp_enqueue_script('them-cycle', THEM_TEMPLATEURL.'/scripts/them.cycle.js', array('jquery', 'jquery-cycle'), '1.0');

}

Note for convenience and efficiency, we’ve previously defined

define(THEM_TEMPLATEURL, get_bloginfo('template_directory'));

And what you end up with in the page source should be something like this – javascripts loaded in the right place in the page head, up and running

<script type=’text/javascript’ src=’http://localhost/test/wp-content/themes/this-theme/scripts/jquery.cycle.lite.min.js?ver=1.0′></script>

<script type=’text/javascript’ src=’http://localhost/test/wp-content/themes/this-theme/scripts/them.cycle.js?ver=1.0′></script>

If you’re a theme developer, you’ll (perhaps) be looking at keeping up with the latest in javascript/AJAX and incorporating a few tweaks into your brand new theme – in some ways, it’s been made very easy for you (and in one or two ways it’s just a little tricky…)

So, assuming you have a basic knowledge of PHP, theme design and javascript, here’s how it works:-

Loading up jQuery

WordPress arrives with jQuery already bundled, so this bit’s easy enough. But we need to get it loaded onto the page, which doesn’t happen automatically…

The plan here would be to get some nice tabbed divisions going, maybe in the sidebar, courtesy of jQuery.

<?php
add_action('template_redirect', 'them_js_head_load');

function them_js_head_load(){

 // we don't need this on admin pages, so...
	if(is_admin()) return;

      wp_enqueue_script('tabber', get_bloginfo('template_directory') . '/scripts/tabs.js', array('jquery', 'jquery-ui-core', 'jquery-ui-tabs'), '1.0');
}
 ?>

In this code, we’ve enqueued a custom script tabs.js, that’s going to initiate the whole process – and we’ve also declared its dependencies – jquery, jquery-ui-core, jquery-ui-tabs, the user interface sublibraries, also bundled into WordPress as standard.

These are already registered, so only the handle is required, here: ‘jquery-ui-tabs’, etc.

The full list of bundled libraries is at: WordPress wp_enqueue_script.

Vital! – The snippets of jQuery code you’ll find while out and about on the net make extensive use of the shortcut $ to express the jQuery global object. This isn’t going to work in WordPress, so at all times we use jQuery(document).ready(function($) – and then it will work… Once inside the function, we can use $ as a shortcut.

The reason for this slight complication is that Prototype and Scriptaculous libraries arrived first into WordPress and have got to hold on to using the $ shortcut. And don’t be tempted to dabble with jQuery.noConflict() here – you won’t get good results.

And from here, since you know what you want to put in your theme in terms of flashy javascript/AJAX add-ons, I’ll leave you to get on with thieving some snippets and getting them up and running….

* Update – some of this information is superseded by changes in the way WordPress handles the loading of javascript – there’s a follow-up here – More about WordPress and jQuery