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.
Leave a comment
Marketing
September 2nd, 2008 at 6:25 AM
Well I’ve never used PHP before, but what the hack, I’ll give it a try.
Marketing
September 3rd, 2008 at 11:37 AM
Have you checked out the new Google chrome yet?
Connor Wilson
September 3rd, 2008 at 3:46 PM
Yeah, I’m anit Chrome. Also, I’m a Mac user, so that doesn’t help. Don’t give me a new browser with a rendering engine between IE and Firefox. That’s just not fair to developers.
Tool Designer
September 5th, 2008 at 9:43 AM
This looks like it could be a good thing to add onto wordpress. I’ve never really written any proper php code but ill have to give it a try and see if it will be beneficial.
Maria
September 6th, 2008 at 8:05 AM
I think I should try as well. Why not, at least I can find out if it will be of usage for me
Mary
September 9th, 2008 at 11:56 AM
Probably in the nearest future I will try using PHP code. Thanks for this informative review
James
September 17th, 2008 at 8:03 PM
Hi, I found your blog on this new directory of WordPress Blogs at blackhatbootcamp.com/listofwordpressblogs. I dont know how your blog came up, must have been a typo, i duno. Anyways, I just clicked it and here I am. Your blog looks good. Have a nice day. James.
Mary
October 1st, 2008 at 12:39 PM
I tried it and it is great indeed. thanks
Dana Bordwick
October 13th, 2008 at 6:19 AM
I am going to try it in a couple of days. Big thank for such a comprehensive review on PHP.
Dermaroller
October 28th, 2008 at 8:19 AM
Why are you anti Chrome. Not used it as I’m sticking to firefox which works fine for me. But I am a bit of a wh0r£ to google so I can’t help but think they’ll produce a good browser too.
Sumesh
October 30th, 2008 at 10:44 PM
John Nunemaker seems to be adding a new dimension to Ordered List - more, varied articles.
Livesearch looks beautiful - I tried your design category page.
I am a bit worried by how much the javascript would slow down the site - have you tried making them into a single file and/or compressing?
And QuickSilver looks vaguely familiar, thanks to Gnome Do, QS’s equivalent on Linux (with a similar interface).
Marketing
November 1st, 2008 at 1:00 PM
Quick question as any one tried out Ruby on Rails as I hear its awesome stuff.
cat
November 6th, 2008 at 5:04 AM
It looks like it”s a good thing I think I have to try it right now
Funny Icons
November 6th, 2008 at 10:08 PM
Hey Connor,
Re:Chrome
I thought it used the same rendering engine as safari?
Tony
November 14th, 2008 at 3:42 PM
Wordpress is the best blogging platform on the net and not it just got a bit better!
Shaggy
November 20th, 2008 at 2:39 AM
Thanks for the tips Connor. Yeah, I think Chrome uses Webkit which is the same rendering engine as Safari so it shouldn’t cause any extra headaches for developers (the last thing developers need is another rendering engine!).-
Monica - savings
December 2nd, 2008 at 1:40 PM
Very useful and interesting article that has new tips which I haven’t read about before. Keep up the good work. I just added your RSS feed to my Google News Reader..Thank you for sharing
Box Art Canvas
December 11th, 2008 at 8:13 AM
Chrome does use Webkit so no sweat for developers.
Chris Abdey
December 11th, 2008 at 2:11 PM
Wordpress is the best blogging platform
Justin Smith
December 12th, 2008 at 11:45 AM
I agree with Chris
Graffiti Fan
December 16th, 2008 at 11:01 PM
Great search app - should make finding stuff a lot easier on my PC
Parent Mix
December 17th, 2008 at 12:57 PM
Chrome does use Webkit so no sweat for developers.
ttomp13
December 18th, 2008 at 4:08 AM
DermaRoller - I dislike Chrome for many reasons.
1. It’s another browser to code for.
2. Things that look good in IE and Firefox don’t always in Chrome.
3. The “find” feature doesn’t work in online html boxes.
4. It crashes way too much.
Sisko ~_~
January 3rd, 2009 at 7:28 PM
thx
Atniz
January 5th, 2009 at 6:26 AM
Thanks for sharing this. Will try it out.
Login »