Connor Wilson » Blog Archive » Quicksilver Style Livesearch with WordPress

Quicksilver Style Livesearch with WordPress

Posted on September 1st in General — 109 Comments so far. Got something to say?

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.
Sabac
January 7th, 2009 at 7:49 AM

Your tips can help a lot as I have been searching for the solution since a week. Thanks for sharing it. I’ll post my feedback after implementing it but I think you have missed nothing so it will go very smoothly.
Paul Kirk
January 9th, 2009 at 2:47 PM

Your tips can help a lot
horoscope 2009
January 11th, 2009 at 2:40 PM

I am agreed with ttomp13 regarding this. I don’t like Chrome either.
mike mills
January 11th, 2009 at 10:07 PM

This was a breeze to program. Thanks for sharing this cool search option.
sweetgabru
January 13th, 2009 at 6:02 AM

Thank you for providing this great information.

I hope that It will be better than others.
Marketing
January 15th, 2009 at 7:06 AM

It’s been alomost 3 months you haven’t posted anything. Have you abondened this blog?
sydney harbour cruises
January 22nd, 2009 at 12:56 AM

you want a single page with links to all your archived entries, arranged just so to form the main gateway into your blog’s past. With the WordPress 1.5 theme system, you can create template files to customize this archive gateway for each theme you use. Or, maybe you’re just wondering how to use the archives.php template file that’s included with the WordPress Default Theme.
Kartal
January 29th, 2009 at 4:49 AM

Thanks.
Husqvarna
February 8th, 2009 at 11:24 PM

Good for SEO - make sure your archive is just a single click from the home page of your blog.
Anne Arundel
February 10th, 2009 at 12:22 PM

I am always afraid to use new things and that also from a guidance from web, that is really risky business.

But however if this is coming from your website than I can believe and go ahead.
Allen McDaniel
February 11th, 2009 at 12:32 PM

tried it and it is great
thanks
Cheat codes
February 12th, 2009 at 2:46 PM

Thanks you for the tuto
Alex Malone
February 12th, 2009 at 3:42 PM

Wordpress is the best blogging platform indeed as there theme show same ratios on any web browser.
Odzyskiwanie DAnych
February 13th, 2009 at 4:09 AM

You don’t have a chrome? The only thing from apple I got is an iPhone. Quicksilver looks nice though and I’m wondering about moving to mac.
tatil
February 14th, 2009 at 9:01 AM

thanks for massege
Asian Blogger Guy
February 14th, 2009 at 10:44 PM

Very cool regarding Quicksilver. Not a Mac user, but great that this can be ported to WP.
C Richey
February 15th, 2009 at 5:25 PM

My sister was asking me about it for her macbook. I’ll refer her over here to this post since I have no clue about macs. Nice machines but most of the software I use is PC only.
Dave Williams
February 16th, 2009 at 5:59 AM

It looks like it”s a good thing
Sweetgabru
February 18th, 2009 at 3:23 AM

I hv been waiting here for your new work.
Hossam
February 26th, 2009 at 11:27 AM

Your tips can help me a lot
Pemilu Damai
February 28th, 2009 at 12:23 AM

Great php’s code. i wll try..
Chy King
March 2nd, 2009 at 5:36 AM

wow .. you are a awesome coder!
psd to html
March 2nd, 2009 at 6:59 AM

No doubt about great coder but even great stuff provider, m unaware about difference of Archive.php vs. Archives.php, lovely stuff.
Majid A
March 3rd, 2009 at 9:22 AM

Exactly .. your coding is so smooth
Robin Bastien
March 9th, 2009 at 1:26 AM

Wow, what a great block of code! I’ll keep my eyes peeled on this once my blog expands more. Thanks
web design miami
March 11th, 2009 at 4:19 AM

Quicksilver is one of the best things on macs. I’d love to see it on more blogs, thanks for that tutorial.
Jamie Allsop
March 13th, 2009 at 4:37 AM

Thanks for this informative review
ENT Doctor
March 18th, 2009 at 1:48 PM

Thanks for the PHP scripts.
Kristin
March 20th, 2009 at 7:34 AM

Thank you for useful information.
J Teo
March 26th, 2009 at 12:35 PM

Very professional
che_3z
April 1st, 2009 at 2:02 AM

Useful article. Thanks.
fab
April 2nd, 2009 at 6:10 PM

lol @ trying to make a static design “web 2.0″

lol @ integrating twitter like anyone gives a shit what you think, are saying, or have said

lol@using wordpress

lol@”i r master codar cuz i know css + html, bow before me”

lol@using your name as your domain name (at least think up a company name)

lol@you
lol@your site

gb2high school
gb2dreamweaver

gtfo my internets, keep to your own corner which you have so nicely made for yourself.
Jacques Snyman | Website Design
April 3rd, 2009 at 2:38 AM

Hey nice blog! What about some updates dude? Look forward to seeing some more of your work, keep them posts coming please!
Miami web design
April 7th, 2009 at 2:59 AM

Waiting for updates from you connor
Miami web design
April 7th, 2009 at 3:01 AM

Can I do a guest blog post for you , if you are very busy
Pozycjonowanie Poznan
April 9th, 2009 at 4:05 AM

Quicksilver is one of my favourite things in the world. I’m glad someone finaly got around to “porting” it to WP.
Kids & Teens
April 12th, 2009 at 7:54 AM

I will give this PHP code a shot and see how it works. Besides, it’s too early to judge Chrome, as there are still room for improvement.
skin roller
April 16th, 2009 at 8:44 AM

great article thanks
skin roller
April 16th, 2009 at 9:29 AM

will give this a try
Virtual Family
April 19th, 2009 at 8:25 AM

I like the liveseach feature, I also like the new admin bar and the new post screen. And I’m hoping to find out more soon. Keep up the good work.
Melody
April 20th, 2009 at 12:23 AM

I hate when they force you to sign up for something you obviously don’t want another one of..
fare ilaçlama
April 25th, 2009 at 11:34 AM

Have you checked out the new Google chrome yet
emlakfaktor
April 25th, 2009 at 3:27 PM

one of the best things on macs. I’d love to see it on more blogs,
ilaçlama
April 28th, 2009 at 1:58 PM

I tried it and it is great indeed. thanks
PHP Scripts
April 29th, 2009 at 11:21 PM

Very cool.
Miami Web Design
May 1st, 2009 at 9:39 AM

its really cool thanks for the code
Miami Web Design
May 1st, 2009 at 9:40 AM

great post dude
Virtual Family
May 1st, 2009 at 12:19 PM

I have a wordpress blog and I would like to check that it has been set up for SEO as well as possible. How should I check that it is SEO’d as well as possible? Is there some software that can check that it is OK? Is there anything else that I can do? Many thanks for your help!
Jacques Snyman | Website Design
May 3rd, 2009 at 10:03 AM

I just popped in again to see if there has been any updates to your blog, but an sadly disappointed. Is there a reason for the lack of updates? Please give us something to read and talk about, Connor!
Lumineers cost
May 8th, 2009 at 1:05 AM

What gives? I was hoping for some updates. Looking forward to future posts.
pire ilaçlama
May 8th, 2009 at 2:47 PM

its really cool thanks for the code
Jason Yee
May 10th, 2009 at 12:59 AM

Nice post. Damn, I got to buy a mac but I want to wait for the new OS to come out.
How To Lose Weight
May 11th, 2009 at 12:11 PM

This is really nice. The design is really sleek.
Regalsysteme für Paletten
May 20th, 2009 at 5:08 AM

Hello buddy nice post. I have bookmarked your site.
austin weddings
May 27th, 2009 at 4:38 PM

nice tutorial.
Jacques Snyman | Website Design
May 28th, 2009 at 4:55 AM

Hey Hey Connor! I still do not see any fresh updates! What is keeping you so busy dude? Please give us stuff to read and talk about!
Naomi
May 31st, 2009 at 2:07 PM

I will try this owing to your excellent post with detailed information.Thanks.From the comments I am understanding that it is great.
Virtual Family
June 1st, 2009 at 6:25 AM

i just post a blog about 10 minutes ago but when i googled it, it does not appear. is there any problem?
MP3tunes User
June 3rd, 2009 at 4:34 AM

I think can try, and then see how this will effect.
Seo Singapore
June 5th, 2009 at 3:33 AM

Quicksilver is really cool.Will try it.
Vikson
June 5th, 2009 at 10:20 AM

From the comments I understood that Quicksilve does a great work.It is worth to try.Thanks for the code.
Custom Website Design
June 6th, 2009 at 2:59 PM

DO NOT take pre-med courses with College Now, online, or at a community colleges. Medical schools will eat you alive for it. In order to find out what you need to graduate from college, first pick a college and a major. Then, look at the major’s required clasess as well as that university’s required classes. Next, make sure that College Now credit is accepted.
Garment Racks
June 7th, 2009 at 10:09 AM

This looks like a good tool.
Jacques Snyman | Website Design
June 7th, 2009 at 12:06 PM

Still nothing new! What is up with you, Connor? We would loooove some new content, friend!
Beauty Salon
June 10th, 2009 at 7:02 AM

I’d already gave a try to quicksilver and seems useful for me. It seems that you have put down your hands at blogging. since very long time there’s no fresh content maah friend… Hope to see you back very soon.
Lumineers
June 10th, 2009 at 10:42 PM

Sometimes it bothers me that I’m a PC user
Deniel - cheap web hosting
June 12th, 2009 at 9:08 AM

I heard and read a lot about that and I am happy that I am going to give it a test drive. Thanks for sharing the tutorial.
NJ SEO
June 12th, 2009 at 4:01 PM

Quicksilver is so helpful and combining it with livesearch will make it more robust.
cheap hotels london
June 13th, 2009 at 7:23 AM

Amazing post! I have not much knowledge about php, but I think it will be helpful to all php users.
Jacques Snyman | Website Design
June 14th, 2009 at 2:59 PM

Hiya Again, Connor! Still nothing new here, but Ido se you’re a bit more active on twitter. I joined your flock….heheheheh
Virtual Family
June 15th, 2009 at 4:16 PM

I’m looking to do something like what johnchow.com has done to his navigational bar which is seen on the very top right of the webpage.
Stu @ Lasik Surgery Halifax
June 15th, 2009 at 7:36 PM

This looks sweet, thanks!
Tai Slim
June 16th, 2009 at 2:36 PM

You have shown me a fantastic way to make my blog more user friendly. Thank you.
PEI real estate
June 18th, 2009 at 1:07 AM

John Nunemaker you are doing good and really nice post for everyone.
Love Poems & Love Quotes
June 20th, 2009 at 6:59 PM

I have heard about quicksilver. This is going to be so revolutionary, thanks for bringing this out!
Kristin
June 25th, 2009 at 6:57 AM

As I understand OrderedList is virtually the same browser as Firefox?
Wyposazenie Hoteli
June 25th, 2009 at 7:39 AM

Kristin: yes it is. The differences as so little that there’s almost no way to notice them.
MSN Sözleri
June 29th, 2009 at 4:51 PM

Thanx For Adminnnn
Otel Rehberi
June 29th, 2009 at 4:52 PM

asdasdada
Neysene Blog
June 29th, 2009 at 4:52 PM

sdasdasd
Lazer Epilasyon
June 29th, 2009 at 4:52 PM

thanxxx
Jacques Snyman | Website Design
July 1st, 2009 at 8:46 AM

Hiya Connor! You’re twittering but not blogging dude! What about some updates to your blog, man?
Leicestershire Web Design
July 2nd, 2009 at 12:10 PM

Looks good, i’ll try it,
Leicestershire Web Design
July 2nd, 2009 at 12:12 PM

I tired it and it works fanastically! thanks