Click on the image to see a demo. The demo is in my own site and is a slightly adapted version (different height, content; doesn’t really go with my site!) than on the client site as their site is not yet live.

Objective

My goal was to have a “featured” area on the home page where weekly specials would be displayed in a continuous horizontal slider, each one a Post in a category titled “featured”. Only the last 3 items would be displayed.

Ingredients

These are the files you’ll need to either create or edit.

js folder (create it in your theme folder; although it could be elsewhere)
easySlider.js (download and put it in the js folder)
slider.php (create this document in your theme folder)
index.php (or whatever page you want to display the slider on)
header.php (in your theme)
style.css (in your theme)

Instructions

Before I start, I want to mention that I’m first and foremost a designer and my years of scanning things that are neatly lined up to the left prevents me from being able to efficiently read (or write) indented code. I’ve tried and tried, but it just doesn’t work for me, so my apologies to you hard-boiled coders! So, here’s what to do if you’re trying to do this kind of implementation :

1. Download the slider code from CSSGlobe at http://cssglobe.com/post/5780/easy-slider-17-numeric-navigation-jquery-slider

2. Creat a folder called js in your client WordPress theme and copy easyslider.js into it. I took the version number off of the script title because I wanted to be able to easily update it without changing the link in the WP header to reflect the newer version.

3. Open header.php in your theme (or create a custom header if this is just for use on one page) and add the following just before wp_head (after your stylesheet and RSS links). This is really, really important to getting it working in WordPress as this code makes sure that WordPress’s jQuery is queued up for use by the javascript function we’re about to add. This way, we don’t have to add ANOTHER link to ANOTHER instance of jQuery (which you would need to link to if your site didn’t already have it activated). I also discovered that WordPress includes the latest, streamlined version of jQuery and uses what is referred to as “no-conflict” mode so that (hopefully) it won’t clash with plugins that try to use a different version. Or something like that. Google it.

<?php wp_enqueue_script("jquery"); ?>

Then comes…

<?php wp_head(); ?>

Followed by the link to the plugin. Please note that I used the full path to avoid additional queries being made by WordPress template tags, but you could do it that way (i.e blog_url and template_url). And notice that the only link is to the easySlider script; I’ve left off the link to jQuery which Alen includes in his instructions (which are not for installation on WordPress)  :

<script type="text/javascript" src="http://yourdomain.com/wp-content/themes/yourtheme/js/easySlider.js"></script>

Note that the easySlider instructions tell us to use the following code  following the link to the script :

<script type="text/javascript">
$(document).ready(function(){
$("#slider").easySlider({
continuous: true,
controlsFade: false
});
});
</script>

But this wasn’t working for me, so I went looking for the answer. A comment from reader Otto (no link given, but THANKS, Otto!) in response to this fantastic article by Chris Coyier in the CSS-Tricks forum about properly loading jQuery suggested employing this different structure, which is what I did, and it worked like a charm! Apparently it prevents conflict with certain plugins that use the $ variable.

jQuery(document).ready(function($){
// your $ code here
});
So here's what I did  after reading that :

<script type="text/javascript">
jQuery(document).ready(function($){
$("#slider").easySlider({
continuous: true,
controlsFade: false
});
});
</script>

The easySlider plugin has a ton of options, including automatic scrolling, continuous (endless carousel), option to fade out next/previous controls when they’re not useful, numeric slide navigation and more. I opted for continuous and didn’t want the disappearing controls since I created a design that lets users click on arrows to go forward or backward (or just forward or backward, endlessly!).

4. Visually speaking, in my client’s theme the slider is positioned across the top of two righthand sidebars, so I had to mess with the original CSS to adjust to a different width as well as a li containing more than a simple image of exactly the right size! I added it to the appropriate template in their theme with this :

<?php include(TEMPLATEPATH."/slider.php");?>

5. The CSS is without a doubt the hardest part of all this. A tip I can offer is that you need to understand up front that Alen has configured the javascript to handle layout and navigation using unordered lists (ul, li) so EACH SLIDE is a single li. This is easy if your list item will always be a single image or a few lines of text. I couldn’t do it the easy way, of course; I wanted each li to be a complete post with a link to the post. I started out by trying to do this using the handy Simple Image Grabber plugin and the_excerpt and got frustrated by problems with the math that manages the “continuous” option. It didn’t like my floating two line items next to each other to fill the (actually double) space in a single “slide”. Finally, I opted for a WP query that grabbed 6 posts from the appropriate category and put the entire content, including image, into a single line item as intended. If I was any good at javascript I’d probably figure out how to change the selectors and customize the easySlider script but I’d already spent an entire day trying to get this working, so I’ll leave that ’til another day!

Here’s what the CSS looks like for the demo version here on my site (you’ll likely be messing with the #slider li width and height and the padding around the post text). The text for the buttons (which I’ve included in the demo but not in my client’s site) is in the easySlider.js itself.

#featured {
width: 450px;
height: 290px;
background: #fff url(images/featured.jpg) no-repeat -8px -12px;
border: 1px solid #ccc;
overflow: hidden;
margin-top: 10px;
}

#slider {
}

#slider img {
float: left;
margin: 0 10px 0 0;
padding: 5px;
width: 150px;
height: auto;
}

.slide-title {
color: #fff;
font-weight: bold;
line-height: 100%;
display: block;
text-align: center;
margin-bottom: 35px;
}

#slider p {
padding: 0 15px;
}

#slider ul,
#slider li {
list-style: none;
overflow: hidden;
margin: 0;
}

#slider li {
width: 440px;
height: 290px;
padding: 5px 0px;
overflow: hidden;
}

#prevBtn,
#nextBtn {
display: block;
width: 80px;
position: absolute;
top: 92px;
font-size: 0.8em;
}

#prevBtn {
left: 53px;
}

#nextBtn {
left:418px;
}

#prevBtn a,
#nextBtn a {
color: #fff;
display: block;
width: 80px;
height: 32px;
padding-top: 5px;
text-transform: uppercase;
}

Resources for this post

Download zipped text file containing above code | Download easySlider 1.7

Help and research for this project.

http://cssglobe.com/post/5780/easy-slider-17-numeric-navigation-jquery-slider

http://digwp.com/2009/06/including-jquery-in-wordpress-the-right-way/

http://codex.wordpress.org/Function_Reference/wp_enqueue_script

http://justintadlock.com/archives/2009/08/06/how-to-disable-scripts-and-styles

http://css-tricks.com/forums

http://digwp.com/book/

This article will show you how to create custom category templates that are automatically used when specific categories are selected from the site menu, via a conditional statement in the category.php file. While it is possible to have categories default to using a custom template named with the category number (i.e. category-12.php), this is a simple, logical technique for displaying specific categories using custom templates, based on a conditional statement in the category.php Wordpress template. Another advantage to using this technique over the category/number approach is that you may have multiple categories that can share a single template (i.e., “products” and “books” might use the same layout) so you can avoid creating extra documents.

How it works

If a site visitor clicks on “books” she will be served a unique layout, directed by the category.php file in the site theme, that grabs all of the posts in the “books” category and presents them in a specific way. If the visitor clicks on “tutorials”, that same category.php file will grab a different template to present the posts in the “tutorials” category. When rolled over in the site menu, the browser status bar (bottom left of your browser window in Firefox) would show the link to these “pages” : http://domainname.com/category/books. The link in your theme template would be : /category/books. Same thing for the menu link to the tutorials category.

How to set it up

For the sake of this example, we will assume that you have three categories in your Wordpress installation – News, Books and Tutorials. We want a custom template for the Books and Tutorials categories and we want the News category to use the default category template. If your current theme doesn’t have a category.php template, you can grab it from the Wordpress default theme.

1. Make four copies of category.php and name one of them something like “category-original.php” just in case you want the original back later on down the road.
2. Rename the other three copied files category.php, category-default.php, category-books.php and category-tutorials.php. The hyphenated files will be your new templates – you can actually name them anything you like; I just prefer this naming convention because I think it’s easy to understand and the files show up together when viewed alphabetically. Please note that these templates do not require the opening php “template tags” that Worpress uses for custom Page templates; those are only for Pages where you select which page template you want to use. All the work here is done by category.php, which decides which category template to use. I agree that using the word “template” in so many different ways could be confusing…
3. Edit each hyphenated template as necessary to present the content intended for it.
4. Now, in category.php, delete everything and replace it with this  (you’ll need to remove the extra space after the beginning of the php tag question mark) :

   <? php
   $post = $wp_query->post;
   if (in_category('books')) {
   include(TEMPLATEPATH . '/category-books.php');
   } else {
   if (in_category('tutorials')) {
   include(TEMPLATEPATH . '/category-tutorials.php');
   } else {
   include(TEMPLATEPATH . '/category-default.php');
   }
   }
   ?>

What this script tells the server is :
- If the link to the books category has been clicked, use the template category-books.php to present data from that category
- Else if the link to the tutorials category has been clicked, grab category-tutorials.php to present that data
- Otherwise, use  category-default.php to present the data from whatever category has been selected for viewing

Extras

A similar technique can be applied to the single.php template and you can also employ conditional statements to doing neat things like changing header graphics or page layout based on the page or category being served. More on that to come in another article…

If you are using a wonderfully handy plugin like Improved Include, you can also include a page – like intro text – at the beginning of the custom template rather than adding that content to the template itself. This is a good way of ensuring that you keep the content and structure separate, and enabling changes to the intro text to be conveniently made in the Wordpress admin area. If you are using this plugin, you would simply add the following directly before if (have_posts)) :

<? php if(function_exists('iinclude_page')) iinclude_page('6','displayTitle=true');//use your page number ?>

In my search for a way to : a) easily generate a list of a large number of PDF documents in a folder on the server; b) automatically show links to each document for easy download, and of course c) display this within a Wordpress Page or Post (whew!), I discovered the WP Include File plugin from http://AmberPanther.com and this directory lister script (thanks to http://www.totallyphp.co.uk).

How I did it

With a bit of experimentation, I was able to do it like this :

1. I created a folder for the PDFs at my client’s site root and named it logically (i.e. “pdf”)
2. Inside this folder, I put the PDF files and added the script as a file called index.php
3. I then created a Wordpress Page for the list and used the WP Include File shortcode to include index.php file with the plugin. The shortcode looked like this (I’ve added an extra space after/before each bracket so you can view the code in this page) :

   [ include file="MyCustomFile.php" masterpath="/home/myusername/myrootdirectory/thefilefoldername" ]

The hardest part was figuring out the proper path for the shortcode and adding hooks/html to index.php to style the list of PDFs. WP Include File has several settings options, but I ended up using what they call the “masterpath” option directly in the shortcode (as shown above). You can download my adapted version of the script here and see how I did it, and view a page with a list of PDF documents generated using the script (it could be other types of documents or images, too).

I’ve been looking high and low, for a client, to find some way to easily  upload and link to PDF documents. I came across the Apture plugin for Wordpress, which interfaces with the Apture website (http://apture.com) and lets you pick from uploaded documents of all types (multi-media, pdf, xls, pp, etc.). Click on the sample link below to give it a spin!

Sample PDF

I’m into my second year of using open source survey software Lime Survey to manage voting for one of my client projects. If you don’t know about it, stop by http://limesurvey.org and check it out. In addition to a downloadable, self-installed version for your server, they have begun to offer a hosted version and will soon release Lime Survey 2.0. I have very much enjoyed this highly stable, easy to figure out application that promises to be even better with the upcoming version.

Turns out that there’s a way to do it. No software required, the result is immediate and it is shockingly easy to reveal the hidden password.

Digitizing Books One Word at a Time

A CAPTCHA is a program that can tell whether its user is a human or a computer. You’ve probably seen them — colorful images with distorted text at the bottom of Web registration forms. CAPTCHAs are used by many websites to prevent abuse from “bots,” or automated programs usually written to generate spam. No computer program can read distorted text as well as humans can, so bots cannot navigate sites protected by CAPTCHAs.

About 60 million CAPTCHAs are solved by humans around the world every day. In each case, roughly ten seconds of human time are being spent. Individually, that’s not a lot of time, but in aggregate these little puzzles consume more than 150,000 hours of work each day. What if we could make positive use of this human effort? reCAPTCHA does exactly that by channeling the effort spent solving CAPTCHAs online into “reading” books.

Unbelievable. I visited this site when it was just starting up and recently came back via a link to Zoho Creator. Unf_ _ _ _ing believable is more like it! Create database apps on the fly without being a programmer. Gorgeous interface, incredibly good instructions, beautiful stuff!

If you use Mail, you cannot be without this!