Every blog has a search bar. The search bar is a typically boring affair, with a white background and a button saying “Search,” and worst of all, it takes up a fair bit of room in your sidebar. Why not use a little Javascript to liven things up and save space? This effect can be seen in use on the search bar to your right.
NB – This method is primarily for Wordpress, but could be easily adapted to any other platform.
1 – Find The Default Search bar.
The code for your search bar usually lies in searchform.php, or in functions.php if it has been set up as a widget, and will look as follows:
<form method="get" id="searchform" action="<?php bloginfo('url'); ?>/">
<div><input type="text" value="<?php the_search_query(); ?>" name="s" id="s" />
<input type="submit" id="searchsubmit" value="Search" />
</div>
</form>
The line that we will be changing is this one:
<input type="text" value="<?php the_search_query(); ?>" name="s" id="s" />
2 – Display the “Search…” text by default.
To save space that would otherwise be used by a “Search” header, or writing “Search” on the button, we will have this text shown inside the actual search form.
The exception to this is if the user has already used the search function, and is on a search results page. In this case, we would want their search term to be displayed. This effect will be achieved using some basic PHP, and one of the Wordpress’s conditional tags.
<input type="text" value="<?php if(is_search() ) { the_search_query(); } else { echo 'Search...'; } ?>" name="s" id="s" />
3 – Adding the Javascript Effects
When a user selects the search bar, we don’t want them to have to remove the default text themselves. Furthermore, if they click out of it again, we will only re-enter the “Search…” text if they did not type anything. Otherwise, their unfinished query will be left as it is.
<input type="text" value="<?php if(is_search() ) { the_search_query(); } else { echo 'Search...'; } ?>" name="s" id="s" onfocus="if(this.value=='Search...')this.value='<?php the_search_query(); ?>'" onblur="if(this.value=='')this.value='Search...'" />
4 – The Complete Form
<form method="get" id="searchform" action="<?php bloginfo('url'); ?>/">
<div><input type="text" value="<?php if(is_search() ) { the_search_query(); } else { echo 'Search...'; } ?>" name="s" id="s" onfocus="if(this.value=='Search...')this.value='<?php the_search_query(); ?>'" onblur="if(this.value=='')this.value='Search...'" />
<input type="submit" id="searchsubmit" value="Search" />
</div>
</form>
With your new search form, you can now delete the space-consuming “Search” labels placed around your search bar. The bonus of using this method is that it is an easy way of adding useful interactivity to your website, which your users will appreciate.
Custom Search
David Airey (55 comments)30 August 07
My blog search is something I’ve been thinking about these past few days.
I want to hone my blog search results so users get more focused posts.
If you search for ‘logo design’ on my site, the first result is a post about Google Analytics. Logo design must be mentioned in there somewhere, but is there a way I can limit the search to the blog post heading? If so, I’d love to know!
Michael Martin (1285 comments)30 August 07
The default search is definitely quite poor. I’ve used search plugins before to expand a search to include pages, comments etc. but never to improve the actual quality.
Two which claim to improve quality are Search Reloaded and Wordpress Advanced Search, but I can’t recommend one over the other unfortunately. xD
If neither of those help, then I imagine that modifying one of the search everything plugins to search only the headlines wouldn’t be too hard, because the title has its own database field. Perhaps one of the plugin authors would add it to their plugin? (Or you could use an existing plugin to limit search to post excerpts, which WP would automatically grab from the first 50 words of your post?)
David Airey (55 comments)30 August 07
Thanks for the plugin mentions.
I think your idea to search the excepts (with titles too) would be the best option. Sadly, I don’t have the time, or skill, to do that right now.
Michael Martin (1285 comments)30 August 07
lol – Time is always a premium.
If you do want to look into this at some time, this plugin would be the place to start. It already has the option to search excerpts, and the plugin owner seems supportive in his readme file.
David Airey (55 comments)30 August 07
Thanks Michael!
I was using that plugin, but an older version that didn’t include the excerpts. I wouldn’t have noticed if you didn’t point it out.
David Airey (55 comments)30 August 07
Unfortunately the ’search everything’ plugin is in addition to the normal site search, so I can’t use it to filter results to ‘only’ the excerpts.
Thanks though. Now stop distracting me so I can get on with some work.
Michael Martin (1285 comments)30 August 07
lol – Sorry.
You’re right though. I don’t think I’d be able to find a plugin to disable actual searching anyway… xD
milo (72 comments)30 August 07
How safe is this version? As of some search php’s have the special chars issue.
If it’s safe, then it’s extremly usable, might feature it in forthcoming themes, if that’s ok with you.
Slevi (73 comments)30 August 07
Search, the feature I simply took away from my blog completely
, even though it is nice it simply tended to be giving back totally unrelated results though for pretty much the same reason as David mentioned. If one of the words shows up somewhere it’s already enough to make it instantly show up, as if there is nothing checking whether it’s actually remotely related.
I doubt I’ll also be bringing it back anytime soon, since my blog sort of mainly is just a personal blog there isn’t really any need to search a lot. Or I doubt anybody is truly interested in how I went to, let’s take a random thing like the cinema, in the past year
.
I am planning to start writing more stuff which would also classify as informative though but I’m not sure whether I’ll be reintroducing search for that or simply picking them out myself. Both ways would have their benefits of course, picked by me would enable me to categorize it like a directory so it’d be easy to find on what they’d need and probably not too much unrelated stuff in between whilst search would give the user more control over finding what he likes.
One thing is certain though, if I’d bring back search again I’d just start tagging the stuff I want it to look through as searchable and only make it look through that, otherwise the results are pretty much useless anyways.
Placing the search within the box directly is quite a nice thing though, to go back a bit more to the original topic
. Although I must say that a bit of javascript and php alone doesn’t make a nice looking search box. Over time I have seen many blogs with it placed under different headers like it’s some little box part of that, or getting rid of the title above to place a big grey button below it saying Search!.
Michael Martin (1285 comments)30 August 07
Milo – Do you mean the method I described in the post? It’s completely safe. It does nothing more than play with some text in the bar. And you’re free to use it however you like!
Slevi – Search can be extremely useful for finding content. Even a poor search is better than none (Though your more savvy readers might know to use Google to search your site). If you don’t like search, tagging is probably the thing for you. The next version of Wordpress (Due out in September) will have tagging built in, so you can have a look at it then.
And that’s right – You still have to design the actual search bar if you want it to look nice, but this tends to be a nice starting point I think.
Marco Ruelicke.net (43 comments)30 August 07
I’m not using the built-in search and I don’t use a plugin either except you call MightySearch a search plugin which increases the poor default search (which it isn’t!)
Thanks to MightySearch I can use the Google Co-op custom search engine easily which is really useful. I guess I could create an own search page without the MightySearch plugin, but it would take a bit time which I can use otherwise.
Slevi:
I also dropped the search, at least the search box in the sidebar, however I have a link to the search page + a “real” sitemap so a visitor who is looking for a certain post can use either to find his or her way.
Michael: Right now I’m using Ultimate Tag Warrior to provide my visitors a Tag Cloud page. I can’t wait to see the wordpress built-in tagging in action. Hopefully I can drop that plugin then.
Slevi (73 comments)30 August 07
The tagging feature definitely is something which appeals to me quite well, would stop me from having to use my categories for it
. I haven’t checked the beta yet but I hope they sort of like handle it the way they handle categories so I can easily transfer the current categories towards the tagging system and actually be able to tag and categorize separately rather than it being blended together.
I’ve always been quite a big fan of both categories and tags since it’s a user controlled system and in most occasions a more accurate way of finding what you want than an automated searching script.
Search indeed can be useful to find content, although it simply is a question of does it make sense? Although in the blogosphere that’s something I ask myself on more aspects for that matter, just like blogs being so-called done out of the viewpoint of a dog and such, but on top of a blog like that or any personal blog is there truly a need for search? In my opinion not, I doubt there is much interest on any personal blog to actively search. And for me that’s a major determining factor on whether or not something should be placed on a certain site, if it wouldn’t have a true purpose there you can better save it for something which would be more appropriate.
Michael Martin (1285 comments)30 August 07
I haven’t used the beta either, but from the various screenshots and such, it does like converting from categories to tags will be extremely easy.
If you feel there is no need for search, then that is your call. If you write articles which could be of value to your reader though, then a search is crucial I think. I won’t argue with the merits of only including useful features in a blog.
Marco Ruelicke.net (43 comments)30 August 07
Michael, can you check please the comment spam folder?
I believe my comment got lost in there
Michael Martin (1285 comments)30 August 07
Marco – Sorry, I hadn’t checked the folder yet today. Recovered now, thanks.
The plugin you mentioned looks very good, and integrates perfectly with your site. Just one thing; the adverts at the top of the search results pages. Are they Google’s or yours?
Marco Ruelicke.net (43 comments)31 August 07
the adverts are
1. optional
2. in my case connected with my AdSense account, not sure how the default is.
and no problem with the comment, next time I should use less links if possible
Michael Martin (1285 comments)31 August 07
Ahh – In that case, it seems like a great plugin! Thanks for the link.
Jonathan Franzone (4 comments)2 September 07
Thanks for the great tip! I haven’t implemented this yet, but I plan to. I’m also going to use it in my comment form. Currently my comment box says, “Write comment here…” Some lesser technical folks usually end up leaving that text. It’ll be nice to automatically delete it for them.
Michael Martin (1285 comments)2 September 07
That’s a great idea for a way of using it. Should clear up the majority of those mistakes then.
pablopabla (50 comments)3 September 07
Hi Michael!
I use Google CSE (Custom Search Engine) instead. It helps with monetisation as relevant searches are paid
Michael Martin (1285 comments)3 September 07
Hey pablopabla!
On a site like yours, that would work well. Google crawls your pages regularly, so the search will work well.
I remember using it on a static site once, when it was still quite new. Google had index the homepage and about 5 others, and that was it. Obviously I didn’t understand it well enough at the time! xD
(And the Google CSE search bar uses this same effect. Very nice.
)
hiutopor (1 comments)18 September 07
Hi all!
Very interesting information! Thanks!
G’night
Windows Vista Support (1 comments)22 March 09
Thanks for the scripts