I decided to add a “featured post slider” to the ElegantThemes PureType theme which I run on this dbwebwork website. Although PureType contains the base slider javascript and php function code that is in many of the ElegantThemes WordPress themes, it isn’t implemented. The changelog messages for PureType can be confusing, since they refer to the slider code; yet there is no implementation. The only guidance I got was to use the featured.php template for my code.

After briefly browsing the vast realm of slider plugins for WordPress, and a few false starts, I found a plugin that uses the s3slider code that runs in SimpleFolio. I like the look of that slider, although the plugin itself isn’t as good as it could be. Defects include

  • It stores the slider images inside its own plugin directory structure, and automatic plugin updates will wipe out those images. A better solution would integrate with WordPress’s own media gallery/uploads and custom fields capabilities. Keep a backup on-hand.
  • There is no convenient method for activating/deactivating the uploaded slides: they are either present and running, or they have been deleted. This would not be difficult to add.
  • There is a security issue in requiring chmod 777 permission on the image files folder. One can change it back to 755 after one completes the file uploads.

Some instructions on how to add the slider to the PureType homepage:

  1. Download and activate s3slider from your WordPress plugin “add new” tool.
  2. Modify the “files” folder permissions if necessary, to 777. You can use C-Panel or other similar tools on your shared hosting site, or use an FTP client like FileZilla to access the plugin directory.
    ~/wp-content/plugins/s3slider-plugin/files/
  3. I like to save the originals for any theme files that I edit, so I recommend that you save the original PureType/includes/featured.php template page by renaming it, say, featured-orig.php. You can now mess around with featured.php and have no fear that you can’t return to its original working state.
  4. Replace that page with the following code:
<div class="featured"> 
     <div class="featured-thumb-wrapper">
          <?php if (function_exists(s3slider_show())) { s3slider_show(); } ?>
     </div>
</div>
  1. Retaining the featured-thumb-wrapper class will retain some of the styling of the original featured posts section.
  2. Now you can upload your slides, per the s3slider instructions. There is a handy cropping tool included. Somewhat unintuitively, you must click “crop” to save the image and text edits, even if your crop size is the same as your entire image.

There are a few styling problems to take care of, as well; too numerous and detailed to put into this post. Please download my modified s3slider.php file for reference.

  • To add the nice 10px #EED border to the slide images, near the bottom of the page, change
    <li class="bannerImage">

    to

    <li class="bannerImage featured-thumb">

    But keep in mind this will cause a bunch of style problems that will need to be addressed. See my modified s3slider.php code for all the changes I made.

  • Add some margin at the bottom to #banner.
  • Add
    background: #EED

    to

    #banner ul#bannerContent li.bannerImage

    .
    After much snooping to try to fix a white area on the bottom of the border, this is what finally worked. Thank goodness for FireBug and for the nice inspect element web developer tools built into Chrome.

  • Change font sizes to ems if you want to be more typographically correct.
  • Modify the widths and heights of the #banner and #banner span to adjust for the 10px borders. The banner gets wider and taller by 20px, and the banner span (where the text goes) gets narrower, e.g. echo (get_option('s3slider_width')-20)
  • to improve your SEO, use H3 tags instead of “strong”. You’ll need to add a definition for it:
    #banner ul#bannerContent li.bannerImage span h3 { font-size: 1.4em; font-weight: bold; display: inline; }
  • .bannerImage span needs to have its bottom raised up. I found that 8px works — dunno why 10px is too high; some remnant border someplace.
    .bannerImage span { bottom: 8px; }
  • That’s an overview of the sorts of edits I needed to make to properly integrate this slider. If you want to try it out, you can download my copy of s3slider.php.
    Photo credit: Jim Hughes, “Bighorn Lupines”, USDA Forest Service