To get a better idea what I mean by “auto-scroll,” simply look at the home page of this site. You’ll notice the featured articles scroll automatically form one to the next. If you’d like to implement this feature on your site, it’s pretty simple.

First, open your Featured Articles template. To find the Featured Articles template, click the Presentation link on your WordPress control panel, then click Theme Editor. From the list of files on the right, select “Feature Articles on Home Page.”

On the following page, scroll to the bottom, and find this block of code:

<script type="text/javascript" charset="utf-8">
  var my_glider = new Glider('my-glider', {duration:0.5});
</script>

Change it to this:

<script type="text/javascript" charset="utf-8">
  var my_glider = new Glider('my-glider', {duration:0.5, autoGlide:true, frequency:8});
</script>

You can adjust the time period between article rotations by changing the “8″ in the above code.

And that’s it.

Step 1 – Select a Photo and Cut it to the Proper Size

Your feature article photos can be almost any width you like really. However, the featured article box is only 650px wide, so you may want to limit your photos to less than half that width to allow room for the post excerpt.

The photo’s height, however, needs to be more specific. Ideally, your photo’s height should be exactly 220px. If it does happen to be taller or shorter, I added a style element to the photo that will automatically convert the height to 220px. If that happens, however, it may negatively impact the photo’s quality, so try to make it exactly 220px high.

Step 2 – Upload Your Photo

You can either upload your photo via FTP or via the standard WordPress image upload function on the Write Post page; just below your Publish button. Once your photo is uploaded, you’ll need the file path for the photo’s location.

For example, if you upload your photo to a subdirectory (of your WordPress site) named “images” … the file path would be something like: http://www.mysite.com/images/filename.jpg.

If you upload your photo via the Write Post image uploader, the file path will be something like: http://www.mysite.com/wp-content/uploads/2007/12/filename.jpg. To get the actual file path, just go ahead and send the image to your post editor. When you do that, WordPress will produce an image tag that looks something like this: <img src='http://mysite.com/wp-content/uploads/2007/11/filename.jpg' alt='feature1.gif' />

In this case, the only part of that tag you need is: http://mysite.com/wp-content/uploads/2007/11/filename.jpg

Once you have the image path, just be sure to delete the image tag from your post editor box.

Step 3 – Create a Custom Field for Your Photo

If you scroll to the bottom of your Write Post page, you’ll see an area near the bottom called “Custom Fields.” (You may have to click on the white + sign to the far right to expand the custom fields area).

In the field marked “Key,” you’ll need to enter: home_feature_photo. In the field marked “Value,” you’ll need to enter the file path for your image. Then just click the “Add Custom Field” button. Finally, continue with your post, and when you’re ready, click the Publish button.

Your image will appear in 2 places. First, it will appear in the Featured Articles box (for that article) on your home page. And it will also appear on the single post page for that article; aligned to the right of the content. See this post for an example.

If you choose not to enter a photo for one or more of your featured articles, the theme will function properly without it.