It seems like a million years ago I saw a fantastic screen on jQuery for Designers that really made me think, “Wow, that’s amazing”.  Now, I thought both the screencast and the technique was amazing.  First, here’s this really cool technique that I can do if only I watch the screencast.  Second, here’s this guy taking the time to create the content and then giving it away.  I feel I’m finally in the position to give something back myself.  This is my version of the coda-style slider for WP on the Hybrid Framework.

View a demo of the Coda Slider on WordPress.

Ever since that screencast on I have been looking for a minimalist slider to use on a WordPress theme.  All of the ones out there have some fatal flaw for me, it doesn’t work with jQuery, or it looks horrible to me, or some other reason.  I wanted the version shown in the J4D screencast but I didn’t have the skills to pull it off.  Then another screencast came along and I finally figured out how jQuery worked in wordpress!  That was CSS-Tricks.  After that screencast, I was ready to tackle integrating the slider by myself.

the setup

The first thing you need is a few panels to slide right? I created three posts (you could use as many as you want) and entered some dummy text, slightly different titles, and an image to each one.  I set the category for each to “slider”, you may use anthing you want, just change the relavent code in the demos to what ever you choose.  (Hint: if your very new to this type of thing, just use slider for your category.)  This is an important step as the content will be pulled for our slider based on the category you choose.

I found a few of the slider tutorials that show you a custom loop to add to a page template.  I don’t like doing this type of thing as I don’t really understand loops and when I try to write custom loops, they don’t work.

Enter query-posts by Justin Tadlock.  I never understood how this worked until I watched a screencast by the WordPress Modder, and I have used it in almost every site since.  I used installed the query-posts plugin and then dropped the query-posts widget into the Utility: Before Content widget area unique to hybrid.  I think you could do this with other themes, but Hybrid just makes things so easy.

Once the plugin was activated and the widget placed, I set the settings.  Here are the important ones.

• title – none
• display – the except
• category_name – slider
• get_the_image – check the box

That should get your page up and running and ready for the java-tricks to work their magic.  Refresh your page and make sure you see your three posts ready to go.  They will also show on all of your pages due to the Utility Before Content widget area showing up on all pages, use the widget logic plugin to make it only appear where you want it, that’s a whole other screencast.

If you would like to see the instructions in action, check out the video here.

I will put the next few steps in separate posts to keep things in small digestible chunks.