Quicksilver Style Livesearch with WordPress
Over at OrderedList, John Nunemaker wrote a guide on using jQuery (or Prototype, whichever works for you) to implement a Quicksilver Type Livesearch. QuickSilver is an awesome Mac app that lets you search through your apps, files, etc… By typing fragments of a string. From there you can launch apps, open files, and tons of other options.
I just type 'F' an it presents Firefox.
Get Your Files Setup
There’s a few Javascript files you’ll need to setup before we can start editing our WordPress theme. Here are the files you’ll need to save and upload to your theme’s folder:
- Quicksilver.js — This processes the input and gives back a value based on matches with the search area (our posts).
- Livesearch jQuery Plugin by John. This is what makes everything work together, with the live input and the search area.
- And of course, you’ll need to go get jQuery.
Now set those files up in header.php like this:
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/scripts/jquery.js"></script> <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/scripts/quicksilver.js"></script> <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/scripts/jquery.livesearch.js"></script>
Once that’s setup, it’s time to get going on the real stuff.
Archive.php vs. Archives.php
Before we continue, I’m just going to clear something up. There are always these two files in your theme’s directory, but what’s the difference? Basically, one is a page template and the other is the display for the archived posts, like dated archives and the like.
- Archive.php is the archive that shows posts based on date, author, category, etc… This is the file we will be editing!
- Archives.php is the page template, which in the end just links off to pages that use the former page to display.
If you go to the archives link at the top of this page in my navigation, it will take you to my Archives.php page. If you click a link on that page, it will take you to my QS Livesearch enabled Archive.php.
Modifying the Loop
What we’re going to do is basically put all the posts we have in a list so the JS we downloaded can do it’s magic. Find the loop in your archive.php file and we’re going to change it to the code below. I’ll explain it after.
<?php if (have_posts()) : ?> <div class="post"> <form method="get"> <div class="livesearch"> <input type="text" value="" name="q" id="q" /> </div> </form> <ul id="posts"> <?php while (have_posts()) : the_post(); ?> <li><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></li> <?php endwhile; ?> </ul> </div> <?php else : ?> Oops, no posts! <?php endif; ?>
This is going to display the form and text input that users can use to refine the posts on the page. It’s also going to take all the posts and put each one in an LI. The reason we only display the title is because the script searches through all the text in each LI. Besides that, it’s nothing fancy. Get the posts, display the posts to work with the JavaScript.
Potential Problems
The first thing I ran into with this was that if you have a low number of posts per page, you won’t get many items to search through. You can try writing different queries for each option, but in the end, there is a plugin that can fix this. It’s called Different Posts per Page.
A word of warning — you will need to sign up for their stupid newsletter to activate their plugin. It’s worth the trouble, though. Just block the letter if you don’t want it, because this is the easiest solution to the problem.
Next, it’s always possible that you might have uploaded your JS files into a different directory than the /scripts/ that I provided in the code. Make sure the files are included properly before asking any questions, because this is the number problem that users have when doing something involving JavaScript.
If you have any questions that don’t fall into those two common errors, then feel free to leave a comment and I’ll help you out. You can see the example as I mentioned above, right here an my site. For instance, go check out my Design category page.
