jQuery UI in WordPress

I normally just dismiss the WordPress ‘Welcome’ screen and disable it in the Screen Options menu for the Dashboard. However, I realised this wasn’t actually very sensible for a pro WordPress developer as it shows you what’s new and what you should be aware of. As it turns out I noticed on this feed that they now ship the jQuery UI library with the WordPress core, so you can enqueue it and use it straight from your functions.php file.

Simple, eh? Well not really to be honest, mainly because it’s not that obvious how to do it (or at least it wasn’t tonight, on 05/06/2012). Seasoned users of jQuery UI will know you can build your own custom library which contains all the effects and animations you are using on your project and then download it. Same here but different, you have to load them in individually.

This makes sense of course, when you think about it. Otherwise you’d be loading in stuff you weren’t going to use and we don’t want that.

So you load in jQuery, then jQuery UI, then the effects you want in functions.php a la;

wp_enqueue_script( 'jquery' );
wp_enqueue_script( 'jquery-ui-core' );
wp_enqueue_script( 'jquery-effects-core' );
wp_enqueue_script( 'jquery-effects-blind' );

And then use them like;

	
$(".mybutton").click(function(){
$details = $(this).closest('.button-parent').find('.myanimation-div');
$details.toggle('blind', {}, 300);
});

Here’s a very handy ready reference for including the right effect/widget/interaction.

http://www.htmlcenter.com/blog/using-jqueryui-in-wordpress/