By Anders Haig, andershaig.com
I'm going to assume you're building a theme from scratch or at lease have already picked a pretty decent and non-confusing free theme available on the web. The first thing you'll need to do is go to http://simplesli.de and download the script. I chose the minified version because I don't intended to edit the actual code, but you can download the "human-readable" version if you'd like to see a bit more about what it's doing or you're planning on editing it.

In most Wordpress themes, you'll have a header.php file with all the included JavaScript, CSS and additional files you need on every page. Each header.php may look a little different, but they'll have some common elements. Wordpress includes a version of JQuery that they choose, and for SimpleSli.de to work optimally, you'll want to tell Wordpress not to use their version and include your own. You can do this by adding the code


right before the


tag. The wp_enqueue_script tag tells Wordpress that you don't want it to use the copy of JQuery it likes and you will specify your own. I like using Google's JQuery API, but you can also reference a copy of the script locally. After wp_head, you'll include the JQuery script and the SimpleSli.de script like this:


The last little part of that is just loading the actual SimpleSli.de function when your page is ready. SimpleSli.de is customizable, but you can learn more about customizations via their website (Ed: aka, right here ;)). You're all done with header.php now, so you can save and close it and open up the file you want to have the slider on, in my case index.php. All I added to my code here was an include() to a new file we'll create just to keep the SimpleSli.de code a little separate and easily include it on any additional pages in the future. To include a file in php, just use


If you intend to have more than one slider, you'll want to name it something else.

Next, you'll need to create a new blank PHP file, and input the following chunk of code:


Everything is contained within the div. I've added the class of .slider too. This just makes it easier for me to position later. Lines 2 and 3 create a previous and next button that we can style and position using CSS. They both have a rel="1" tag and it needs to match the same rel tag used by the slider. That's how SimpleSli.de can tell what the buttons are meant to manipulate. The .simpleSlide-window and .simpleSlide-tray are just necessary components of the script and explained better than I could on the SimpleSli.de website (Ed: Check out the "features" section).

Line 6 is important. It says to Wordpress, "Get me the five most recent posts that are in the category titled 'Featured.'" If you want to have the slider display posts from another category, just replace "Featured" with your existing category name. showposts can be set at 1 or higher, but if you set it too high and a lot of post information needs to be pulled, you'll be slowing your site down unnecessarily. Line 8 is the beginning of the slide format that each slide will share. There's only one slide in the code here because Wordpress will use this as a template to create a slide for each post. Within this example, the thumbnail of each post is displayed and linked to the post itself. It's important to keep rewind_posts or your page won't be able to use another query as well.

Depending on the version of Wordpress you're using, the_post_thumbnail might not be enabled; I'll explain how to do that in a few more paragraphs. If you want to customize what's displayed in each slide, just edit lines 10-12 with the code of your choice to keep it easy.

Wordpress versions 2.9 and above are built with a simple way to choose thumbnail images for each post. The default size of a thumbnail is a small square but you can edit the height and width to fit your theme within the admin panel by going to Settings > Media. To enable this new feature for your themes, just open up the theme's functions.php and add the line


That's it! Now with one line, you can pick images by clicking the small "Set thumbnail" link on the right side of any Edit Post or New Post page, uploading an image and choosing "Use as thumbnail".

The only thing that's left is a little bit of prettying up of the design. Most likely you'll want to edit things to match your current site, but you'll need to specifiy the size of the slider by entering this code in your main CSS file:


You can edit the height and width as you like, but make sure to also set the thumbnail size to match or you'll have unattractive extra space or images cut off by the available area. Feel free to ask me any questions regarding the usage but also understand that my support is limited by my time and I may not be able to help you with specifically configuring your site or a unique problem you may be having.



Using JQuery to enhance interfaces is a nobrainer, but as a designer I'm not as much of a JQuery pro. I can do some of the simpler tasks and when it comes to advanced functionality, I go hunting for acceptable plugins. I would say that I'm a bit too much of a perfectionist in general and the same is true when I look over a plugin I may be interested in using. I've tried out 20+ JQuery slider plugins and snippets for use in my websites and I finally found what I'm looking for in SimpleSli.de created by d. drew design. SimpleSli.de is actually simple unlike other plugins with the simple moniker. It's so idiot proof it's virtually plug and play. (Ed: Aw, shucks!)

Since I discovered SimpleSli.de, I've used it in a number of websites and just recently decided to add it as a featured posts slider. Wordpress is a great platform, but you'll need to do a little modification to get it all working just right.