Thesis feature box – how to add a slider

The d13slideshow plugin used in this tutorial doesn’t seem to be working with WordPress 3.0. I’ll publish an update to this article as soon as I get the problem solved. If you really want to use slider as described below, stay on WordPress 2.9.

A few months back, I wrote an article on how to highlight your featured posts using the Thesis feature box.  To my shock and amazement the article was a huge success and to this day is the number one read article here on my Empty Cabin Media blog.  Well, now I’m going to teach  you how to take it to the next level by adding a slider to your Thesis feature box.

One of the big trends in websites these days is the ultra-slick graphical sliders you often see prominently displayed at the top of many blogs and websites.  These graphical sliders allow you to not only feature your articles, but feature them using a combination of animation, images, and text from your articles.

I was recently asked to implement a slider for my friend Jeff Rose who writes on personal finance at Good Financial Cents.  After doing a little research, the slider I decided to use was d13slideshow.  Let’s jump in and get d13slideshow working on your Thesis enabled site!

Install the d13slidehow plugin

The first step is to install the d13slideshow plugin.  The easiest way to do this is to use the built in WordPress Add New Plugin option.  Here’s how:

  1. Login to your WordPress Admin console
  2. Select the Plugin option from the left side admin menu
  3. Select Add New under the Plugin section
  4. In the search box, type: d13slideshow and click Search Plugins.  You should get one result, and that’s the d13slideshow plugin.
  5. Click on the install link over to the far right.  A pop-up summarizing the plugin will be shown.
  6. Click the Install Now button and your plugin will be installed.  One note here, depending on your sites security settings and your host, you may have to enter your ftp credentials after click Install Now.
  7. Wait for WordPress to tell you it has successfully installed the d13slideshow plugin, then click on the activate plugin link.

That’s it, d13slideshow is now installed on your site.  No, you won’t see it just yet, we’ll take care of that soon enough though.  Let’s get it configured first.

Configuring the d13slideshow plugin

The settings for d13slideshow are very comprehensive and can be found under the Settings admin console menu.  I won’t go into details on all of them as they’re pretty easy to figure out, but I will touch on a few things.

Height and Width – By default, the slide show width and height under Slideshow styles is 640×480.  The size is ultimately up to you, but I personally think the slider looks best if it’s the same width as your content section.  As far as height, your call, but I wouldn’t make it too tall as it will push your content too far down the page.  On Jeff’s site, he elected to go 525×350.  Personally, I might go even less on the width, say 250 or 300, but again, it’s really up to you.  Whatever size you decide, just type the dimensions into the slide show width and slide show height fields.  Dimensions are in pixels.

Colors – The next few fields let you select the colors you want to use.  Of course you’ll want to make some adjustments here to make the colors blend, specifically: Excerpt title color and Excerpt link color.

Animation Style – The default animation style is play once.  On Jeff’s site, and I would recommend this for yours as well, we set this to loop continuously.  This will make d13slideshow loop constantly through your image/post combinations.

Feature Selection - Here is the most important selection you’ll make.  d13slideshow allows you to select which posts will be included in your slide show in a couple of different ways: Use Sticky Posts, Feature by category, Manually select posts, 5 most recent, and 10 most recent.  The choice is yours, but my preference is Feature by category.  This option lets you chose a category that the d13slideshow will pull posts from.  It will then pull either the 5 most recent or 10 most recent depending on what you specify.  I prefer to create a “Featured” category here, just like we did in my original feature box article.   This will allow you to very easily change the posts displayed in the feature box, but just adding posts you want to show to the “featured” category.  Once you’ve made the selection you want and filled in the appropriate options, click Update Options to save your selections.

If you went with the featured category option I recommend, now is the time to create that category if you don’t already have one, and add a few posts to it.

Adding Images to your Thesis feature box slider

The next thing we need to do is add an image for each of your posts.  Don’t worry, this is easy:

  1. Find some images - If you already have images, great, if not my favorite place to find images is using Flickr’s Creative Commons images.  These are images you can use for free.  All you have to do is credit the author.  So browse around, find the images you want, and save them to your hard drive.  I’d suggest creating a special folder.
  2. Resize your images – While the d13slideshow plugin will automatically size your images to the height and width you specified, having the browser resize images for you slows your site down.  Additionally, downloading a 3000×1000 image, to only show it at 640×480 isn’t efficient either and again will just slow down your site.  Re-size the images to the height and width you specified for d13slideshow to use.  I have Photoshop and use it to resize my images, but if you don’t, a great option is Pixlr.com.  Again, save the resized images to your hard drive (use a different name).
  3. Upload them to the WordPress Media Gallary - Next, we’ll upload your images to the WordPress Media Gallery:
    1. Login to your WordPress Admin console and click on the Media menu in the left side menu.
    2. Click the Add New menu in the Media menu and then press Select Files.
    3. Highlight one of the resized files from above and WordPress will upload the file.
    4. Next you’ll see the image you selected, along with some fields associated with the image.  We won’t set any of these for this exercise.
    5. Copy the File URL for the image and save it in a text editor, Microsoft Word, or something similar.
    6. Press the Save All Changes button and repeat steps 2-6 until all of your images have been uploaded.
  4. Associate your images with your posts – Now we’re going to associate the images we just uploaded with each of your posts:
    1. Edit your first featured post.  Scroll down to the Custom Fields section of the post edit page.  We’re going to add a new custom field here.
    2. Find the link that says Enter New and click it.  Under the name field, put: promoimage.  To the right of that, under value paste in the File URL of the image for the post you are editing.
    3. Save your post.  Repeat steps 1-3 for each of your featured posts.  Note, now that we’ve added the new custom field the first time, you won’t need to click Enter New.  The promoimage field will be available in the drop-down in the custom fields section going forward (neat huh?).

Add the slider to the Thesis feature box

Now that our d13slideshow is installed, configured, and our images are ready to rock, it’s time to show the slider. First, make sure you’re feature box is turned on.  This is located under the Thesis Options menu under Design Options.  Find the Feature box section and choose: In Your Content Column.  Click the Big A** Save Button.  Now for a little php coding magic: Add the following code to your custom_functions.php file:


/**
* Show slider in the Thesis feature box
* By: Larry, Empty Cabin Media (http://www.emptycabinmedia.com)
*/
function show_slider() {
d13slideshow();
}
add_action('thesis_hook_feature_box', 'show_slider');

If you’re using Openhook, add the following code to the thesis_hook_feature_box hook:


d13slideshow();

Now view your blog and if you did everything correctly, you should have a slick looking image slider featuring the posts you selected and it should look very close to the slideshow over at Good Financial Cents.

Now go show all of your friends!

I’ve disabled comments on this blog, but if you have any issues or see something that isn’t working for you in this article, just contact me and I’ll respond as quickly as I can.

Comments on this entry are closed.

Previous post:

Next post: