I’ve used the plugin on a client’s static site, but wanted to figure out a way to have a jquery plugin, specifically Nivo Slider (because I really like it), integrate with WordPress in a non-obtrusive way.

That said, there is already a WordPress plugin for Nivo Slider, but you have to use a photo uploader on the sidebar, and I’m really particular about NOT confusing my clients, some of whom are scared to death of computers and the web

I really just wanted a way for a client to be able to add a new post, upload a photo from the standard photo uploader, select a category, and have their photo added to the slideshow. No muss, no fuss…and no extra instructions.

As I was thinking about how to get a post photo to show up automatically, I thought about a plugin for WordPress that I already use quite frequently, The Attached Image. This great little plugin allows you to pull the first photo from your content and do a variety of things with it in your theme templates. I love it especially for adding thumbnails to article lists and the like, but I thought it might serve my purpose here as well.

You can see the working version at Waltrich.com, a great client who sells lawn chair webbing as well as old school aluminum webbed lawn chairs.

First, I created a slideshow category under Posts > Categories, so that a user could assign this category to the post.

Next, I double checked the category ID for use in my template ( Category ID 3 in this case), and added the following code.

<div id="slider">

<?php $recent = new WP_Query("cat=3&showposts=100"); while($recent->have_posts()) : $recent->the_post();?>

<?php the_attached_image('img_size=full', $recent); ?>

<?php endwhile; ?>

</div><!--/slider-->

The slider id is called in the javascript and the WordPress query, “recent” is asking for the latest 100 (add your own number here) posts in the slideshow category.

The attached image code asked for the full sized image in the post, and displays each one from the loop.

After you’ve gotten this code installed, make sure you follow the usage instructions found on Nivo Slider’s website. You can use the following code in your header (inside the head tag) if you like. It’s a pretty basic install really.

<link rel="stylesheet" href="yourdomain.com/nivo-slider.css" type="text/css" media="screen" />

<script src="yourdomain.com/jquery-1.4.2.min.js" type="text/javascript"></script>

<script src="yourdomain.com/jquery.nivo.slider.pack.js" type="text/javascript"></script>

<script type="text/javascript">

$(window).load(function() {

$('#slider').nivoSlider({

effect:'sliceDown', //Specify sets like: 'fold,fade,sliceDown'

slices:15,

animSpeed:500,

pauseTime:5000,

startSlide:0, //Set starting Slide (0 index)

directionNav:false, //Next & Prev

directionNavHide:false, //Only show on hover

controlNav:false, //1,2,3...

controlNavThumbs:false, //Use thumbnails for Control Nav

controlNavThumbsFromRel:false, //Use image rel for thumbs

controlNavThumbsSearch: '.jpg', //Replace this with...

controlNavThumbsReplace: '_thumb.jpg', //...this in thumb Image src

keyboardNav:true, //Use left & right arrows

pauseOnHover:false, //Stop animation while hovering

manualAdvance:false, //Force manual transitions

captionOpacity:0.8, //Universal caption opacity

beforeChange: function(){},

afterChange: function(){},

slideshowEnd: function(){} //Triggers after all slides have been shown

});

});

</script>

Style to taste, and VOILA! If you have any issues with either The Attached Image or Nivo Slider, they have extensive documentation and help for you. I’m not a guru for either, so forgive me if my help is slow in coming or ill-informed.