Flickr provides a neat little snippet of javaScript to supply various image galleries direct to your site – a so-named Flickr badge.

So if your gallery is on Flickr – rather in your WordPress, which has its own gallery shortcode – a shortcode in the blog post content can be used to embed a gallery of thumbnail images, which is also a good way to demonstrate the various usages of WordPress shortcodes.

The HTML for a flickr badge looks something like this:-

<div class="flickr_badge"><script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?count=5&display=latest&size=m&layout=h&source=all_tag&tag=fish"></script></div>

And the parameters work like this:-

count integer 1-10. Default is 10.

display string ‘latest’ or ‘random’ Default is latest.

layout string h, v, x - Photos are listed horizontally, vertically, or no style. Default is horizontal.

source string user, user_tag, user_set, group, group_tag, all, all_tag

Source implies which ‘account’ the photos come from:- a specified user, a user set, a group, or all users, then filtered by tag if required. Further parameters may then be required, user(ID string) tag (string), group (integer), and set (integer, the url …/sets/1234567/).

size string s, t, m s stands for square (cropped, not small…), t for thumbnail, and m for medium. t = thumbnail is the default.

(idgettr is very useful for figuring out user IDs and the IDs for photosets, groups etc.)

WordPress Shortcodes

A shortcode has a “handler function” – which is integrated into the code by calling the function add_shortcode(). The purpose here is to supply the various parameters for our Flickr badge as parameters of the function – the query string for the Flickr call is then constructed and the javascript code output to the page.

In functions.php

function flickr_badge_shortcode($atts){

//Here's our defaults
$query_atts = shortcode_atts(array('count' => '6', 'display' => 'latest', 'source' => 'user', 'size' => 't', 'user' => '', 'layout' => 'x', 'tag' => '', 'group' => '', 'set' => ''), $atts); 

 	return sprintf('<div class="flickr_badge"><script src="http://www.flickr.com/badge_code_v2.gne?%s" type="text/javascript"></script></div>
', http_build_query($query_atts));
}

add_shortcode('flickrbadge', 'flickr_badge_shortcode');

Provided you have PHP5 on the server, http_build_query() is the quick and easy way of building a query string from an array – and it’s urlencoded….

Note that the empty parameters group, set etc. are required in the defaults – otherwise nothing gets passed to the constructed url via shortcode_atts().

So now, in a post content you can apply the shortcode tag:

[flickrbadge count="4" layout="h" display="latest" size="t" source="all_tag" tag="fish"]

And you should get a nice gallery of Flickr images for users to check out – once you’ve added some CSS to style the images (note the possible uses of the layout parameter here).

This example was of the selfclosing shortcode tag – but you can elaborate a bit, to inject more content into the shortcode function. The simplest example would be to give the gallery a custom title.

Again in functions.php

function flickr_badge_shortcode($atts, $content=NULL){

//Here's our defaults
$query_atts = shortcode_atts(array('count' => '6', 'display' => 'latest', 'source' => 'user', 'size' => 't', 'user' => '', 'layout' => 'x', 'tag' => '', 'group' => '', 'set' => ''), $atts);

return sprintf('<div class="flickr_badge"><h3>%s</h3><script src="http://www.flickr.com/badge_code_v2.gne?%s" type="text/javascript"></script></div>', $content, http_build_query($query_atts));
}

add_shortcode('flickrbadge', 'flickr_badge_shortcode');

And would be called from the post content with opening and closing shortcode tags:

[flickrbadge count="4" layout="h" display="latest" size="t" source="all_tag" tag="fish"]Here’s the latest fish[/flickrbadge]

Caution!
Best to avoid camelCase notation in the attributes – the regex that the content is passed through to locate shortcodes is case-insensitive.
Always remember to use return in the handler function and not echo (in this example sprintf, not printf). It’ll appear on the page – but not in the right place…

WordPress shortcodes are relatively simple in concept, but can be a bit fiddly in practice, keeping track of the default parameters and the use of shortcode_atts() just needs a bit of thinking about sometimes…

With the popularity of jQuery, AJAX, and client-side programming operations in general, there’s more use made of JSON as a format for getting data backwards and forwards.

For example, the Twitter API offers data as JSON – and more manageably than accessing their RSS XML feeds for user timelines etc.

http://twitter.com/status/user_timeline/USERNAME.json?count=10 

The issue is how to make use of JSON-encoded information in the WordPress environment – much of what is available is only recently available, so some care has to be taken about how it’s used.

1. Native PHP functions

json_encode() and json_decode() make life very simple – but these functions are only available in PHP >= 5.2.0 and WordPress is still designed to run on significantly older versions of PHP than this. Alternatives would have to be supplied if you were thinking about releasing a plugin. There are custom-written functions to reproduce these in PHP4, see for example user contributions to json_encode. These are often not 100% perfect, but one may well do all that you require…

2. JSON2

If you’re happy to do the work in jQuery/javaScript, WordPress 2.9 comes with JSON2 bundled, registered and ready to go…

add_action('wp_print_scripts','load_json_parser');

function load_json_parser(){

	if (is_admin()) return; // probably don't want this on admin pages

	wp_enqueue_script('json2');

}

No need any more to play around with eval in the javaScript, but again, this is a WordPress >= 2.9 thing….

3. Borrowing the Text Editor

Lastly, there is one more, slightly unofficial, dodge that can be used. WordPress makes use of TinyMCE as its rich text editor and this comes with the its own JSON parser. Results may not be completely predictable.

require_once(ABSPATH."/wp-includes/js/tinymce/plugins/spellchecker/classes/utils/JSON.php");

$jsObj = new Moxiecode_JSON();

// encodes the supplied array to JSON format
$json = $jsObj->encode(array("key1"=>"value1","key2"=>"value2"));

//decodes supplied JSON to a PHP array
$json_array = $jsObj->decode($json);

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.

Since the arrival of WordPress 2.7, the true framework is based on the concept of parent/child WordPress themes.

A child theme is dependent on its parent – here, the framework – for its template files and functions, it’s not going work without it – ‘parasite’ might be a better name.

When you install a WordPress framework theme, it doesn’t look very impressive to start with – black and white – but that’s not the point. The basic idea is to cover all the fundamentals in the parent framework, the stuff every good theme needs, and keep separate the fancy styling, add-ons etc. in the child theme.

The art of a good framework is how it lets in the customization. Much like PHP frameworks, used wisely, they allow flexibility and concise code, quickly applied – used unwisely, they rapidly become a big old mess with far too many moving parts…

Any good WordPress theme developer will have ended up with a core code that does the job the way he or she thinks best – and this is the origin of a framework. Frankly, if you are are more programming-orientated as a theme designer than design-orientated, they may not be for you. Whether you stick with your code, or dip into your first framework child theme, up to you… but here are the current market leaders, as it were, in no particularly significant order.

Thematic
Produced by Ian Stewart, the prime mover in getting parent-child themes off the ground, Thematic has grids, CSS frameworks, and 13 different widget-ready areas. There’s a growing selection of child themes, free and premium, and support forums.

ThemeHybrid
Again, all the usual goodies, ThemeHybrid also comes with a good selection of child themes built up. For enhanced support in developing and customizing your own theme, ThemeHybrid has a paid club membership option (currently US$25).

Buffet
Buffet has a variety of jQuery features – Superfish menus, SuperSleight for png transparency in IE6, jBreadcrumb. It also offers 2 CSS frameworks – 960gs and the Blueprint CSS frameworks – and support for microformats, XOXO, hAtom, hCard…

Sandbox
Sandbox is probably the original – been around for years – a minimalist WordPress Theme, designed for developers to build on and produce workable themes simply using CSS. But it’s fully widget-ready, XHTML valid and released under the GPL.

OnePress
The unique proposition for OnePress is its integration with phpBB, with a unified login and forum messages displayed on the blog – if you’re a jobbing site-builder this is certainly something that comes up as a very common client requirement.

Conclusion

There are other frameworks – many other frameworks – in different states of development. This is a hot topic in WordPress theme design and I’m sure the situation will continue to evolve – much like the arrival of javascript libraries, there’ll be a fair amount of competition before the winner(s) emerge.

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