The search page in a WordPress blog is normally a bit of an after-thought. I know that until I replaced the WordPress page here with a Google search page, my search results were just like any other category page.
You can do a lot to improve your search results page though. In this post, milo has shown us some of her best techniques for creating a far more useful page.
We will start by adding a counter for the number of results found, then we will highlight the search times in the results themselves, and finally, show you how you can exclude certain categories from your results.
1 – Show the Number of Results Found
The typical WordPress search results page has the title “Search Results.” It’s not very helpful, but we can make it much more dynamic, very easily.
Let’s change our title to something like “Search Result for search terms – 12 Articles“
Much nicer, right?
Open your search template file, search.php. In it, search for the following:
1 | <h2 class="pagetitle">Search Results</h2> |
Now replace this with:
1 | <h2 class="pagetitle">Search Result for <?php /* Search Count */ $allsearch = &new WP_Query("s=$s&showposts=-1"); $key = wp_specialchars($s, 1); $count = $allsearch->post_count; _e(''); _e('<span class="search-terms">'); echo $key; _e('</span>'); _e(' — '); echo $count . ' '; _e('articles'); wp_reset_query(); ?></h2> |
And that’s you done! You can use CSS to style individual parts of the title however you like. E.g. The HTML for the search terms will look something like this:
1 | <span class="search-terms">search terms</span> |
2 – Highlight the Search Terms in Results
When you search on Google or any other major search engine, the words you searched for are highlighted in the results to make it easier for you to scan. We can do the same with your search results page.
In search.php, search for the following:
1 | <?php the_title(); ?> |
This is the code for showing the title of each of the results. In the default theme, it will be wrapped up in a line like this:
1 | <h3 id="post-<?php the_ID(); ?>"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h3> |
Now, replace the part with:
1 | <?php echo $title; ?> |
Finally, before this line, paste the following:
1 | <?php $title = get_the_title(); $keys= explode(" ",$s); $title = preg_replace('/('.implode('|', $keys) .')/iu', '<strong class="search-excerpt">\0</strong>', $title); ?> |
Your search terms will now be wrapped in tags. Bolding works great for this, but if your headline is already in bold (or h1 etc. tag) then use CSS to style it in some other way for emphasis.
3 – Exclude Certain Categories from Being Searched
You may not want all of your categories to appear in your search results. For example, if you’ve set up a sidebar asides category, you may not want those short snippets tangling up with your results.
To remove a category, open up your theme’s functions.php file (Or create a blank file with that name if your theme doesn’t have one), and paste the following code at the end:
1 2 3 4 5 6 7 8 9 | <?php function SearchFilter($query) { if ($query->is_search) { $query->set('cat','8,15'); } return $query; } add_filter('pre_get_posts','SearchFilter'); ?> |
Simply change the “8,15″ part to a comma-separated list of the category IDs for any category you want to exclude (Can get the category IDs from WordPress by going to Posts > Categories.
With those 3 steps, we now have a much more dynamic and helpful search page to give to our users. What do you think of them? Is there anything else that you like to see on a search page?
WordPress Hacks Series: The code in these posts was written entirely by Milo, a web designer from Oxford, Britain. Check out her website for free WordPress themes and her blog, or follow her on Twitter!
Custom Search
Samantha Armacost (2 comments)12 March 09
Thanks so much for this information! I recently re-worked my site and have been irked by the search element of WordPress.
However, I went to implement the show number of results in the header code and it resulted in an error. It appears to have
& ;when an actual & is needed.$allsearch = & ;new WP_Query
to
$allsearch = &new WP_QueryMichael Martin (1319 comments)13 March 09
Thanks a lot for spotting that Samantha! Fixed it now.
banna (1 comments)15 February 10
Great ..i like it
Ben Lind (2 comments)12 March 09
Thanks for the code! Also, thanks Samantha for that fix – it worked great.
Ramraj (1 comments)21 June 09
I really appreciate your efforts for putting up such a nice article on wordpress search customization. Thank you
izzatazizdotcom (2 comments)12 March 09
never think to do anything about search thing.. haha just add drop from the widget. but nice tutorial. thank you.
Khoality (1 comments)12 March 09
This is a great tip from what I can see. It’s true the search function is an after-thought. Some blogs are so large that you can only find old posts by searching and when the results come up, it can be a bit daunting.
I am making these new changes as we speak, thanks again!
Michael Martin (1319 comments)13 March 09
Glad you liked them, they make a nice change! We have another search edit that you can make coming up next Thursday, but you’ll have to come back then to find out what.
LGR (2 comments)12 March 09
Good tips if you stick with the WordPress search. The problem is not that the WordPress search page is an after thought, the whole search is a bit of an after thought. I found it is better to just replace the WordPress search feature with a Google custom search. The results are much better than what the default WordPress search would return.
Michael Martin (1319 comments)13 March 09
That’s true. I have Google custom search here on PBD as well. The problem with it is that they really plaster it in adverts. The sheer number of them is a bit ridiculous which is quite off-putting.
LGR (2 comments)13 March 09
True the ads can get a little much, but the results are much better. I know I had trouble finding old posts on my site with the WP search function and often just gave up. Google search at least makes it possible to find old posts.
Hiranthi (1 comments)13 March 09
Why not use the Search Unleashed plugin by John Godley? I’ve never used anything else since I found that plugin: http://urbangiraffe.com/plugins/search-unleashed/
Sheamus (5 comments)13 March 09
Very useful – thanks. My search page was looking a bit bland but just applying your first suggestion has made things look a little more professional. Much obliged.
Farid Hadi (15 comments)13 March 09
My search page is horrible!
Thanks for reminding me. Will change that now.
Will definitely add the search term in the title and show the count.
Tuan Anh (2 comments)13 March 09
Thank you for these useful codes. I’m wondering about advanced search like other cms and forum, such as they can search within some categories, or can combine with some arithmetic login operators. Do you have some advices for me on this?
Laurence Flynn (8 comments)14 March 09
Awesome tip, please do this on our blog please, Michael. (j/k)
Michael, did the skin on our new blog and the new site just went live. Working with Michael was great and I’m recommending him everywhere.
Aman@BullsBattleBears (11 comments)17 March 09
ooohhh..so nice new code to play with this week! Thanks for the write up and instructions..you guys rock!
Evan (4 comments)17 March 09
Amazing tips, thanks so much I have been looking to do fix a wordpress search to do almost this exact thing. Thanks for the tips.
Nora Reed (1 comments)18 March 09
Hey, great post with some really useful tips. As a fellow designer and blogger, i wanted to let you know about a contest that my blog, logo blog, is having. Please check us out, you can win a prize for redesigning our logo! thanks!!!
Web Design Beach (31 comments)18 March 09
Excellent tips. Search feature is one of most important blog interface to help readers find content on blogs, as sometimes is very hard to find what are you looking for if you have tons of content. And byimplementing this techniques, the interface will be more helpful. Thanks for sharing.
Marissa (1 comments)19 March 09
Great article! The only problem I noticed is that the third script seems to do the exact opposite of what it says – once implemented, it made the “excluded” category the only possible category to draw results from. Any idea how to fix that?
seobag (1 comments)20 March 09
>> Is there anything else that you like to see on a search page?
Yes please. How i can search only in last 20 posts?
Jonas Nordström (1 comments)2 April 09
in the third example, im pretty sure you should change
$query->set(‘cat’,'8,15′);
into
$query->set(‘cat’,'-8,-15′);
Casemon (1 comments)22 January 10
Yes, that works; thanks for catching this!
CSSJockey (1 comments)25 April 09
Another cool thing to do with your WordPress search is to make the Search Box suggest you what to search!
You can power your WordPress search with Search-suggest/auto-complete feature just as you might have seen with the Google Search Suggest and Yahoo Search Assist feature.
This feature helps you effortlessly find exactly what you’re looking for. No doubt, it lists a few suggestions to keep the user looking for more and more. “One sometimes finds what one is not looking for” …
I have written this how-to that guides you onEnabling Auto-Complete Search in your WordPress Blog!
Hope you find it useful and cool…
Cheers.
CJ (2 comments)8 June 09
Thanks for sharing this information. Good Stuff. Let me ask if you have any suggestions if I wanted to filter the results to Search only Posts and not Pages. How could I do that? Thanks for any suggestions…Appreciate it.
CJ’s Latest Post: Liquid Force Press Wakeboard 142 w/ Cab Bindings – Mens – Sale Price: $299.95, Retail Price: $529.95 (43% Off)
ely (2 comments)5 February 10
Add in this line:
$query->set(‘post_type’, ‘post’);
Abhinav Sood (1 comments)8 June 09
The above comment by CJ has been posted using my alias and my email… But the URL is not mine! It’s spam. Kindly remove the comment as soon as possible.
Thanks already,
CJ Abhinav
Abhinav Sood’s Latest Post: A Spanking New WordPress Theme
CJ (2 comments)26 June 09
Abhinav,
My name is CJ and not my alias and I posted the above comment, What makes you think it is spam? Most certainly it is not, just so you know. So Kindly do not request that my comment be removed. Okay. Thanks.
Strictly Online Biz (1 comments)3 August 09
Thanks a million for this tutorial. It really complemented Lorelle VanFossen’s Understanding and Fixing WordPress Search and helped me create a better search result page for my blog. I even added adsense to the top and bottom of the search results. Go check it out guys. I’ll be trying section targetting on it to see if the adsense ads stay relevant to the search keyword. Once again thanks for a great post.
Harvey (1 comments)8 August 09
Hi, very nice tip but I have a BIG problem highlighting the search result… I have an image for every post I write and the alt and title within the img tag show the title of my post. The problem is when the search result is highlighted, it break my alt and title img tag and the rest of the text is a mess. The reason is it includes some html stuff to highlight the ‘word’ within my alt and title tag… How can I make the highlight skip the img tag?
Please help me, I searched for days and didn’t find anything…
Thanks a lot!
Ryan (8 comments)11 September 09
Thanks for the tips…the first two are perfect.
Tracey (1 comments)18 September 09
Hi all,
Very useful info here, thanks!!
I’m trying to build a new search in a wordpress site of mine, but searching on USER DATA (e.g. a postcode that I’ve defined as a custom user field) – has anyone done this before? I’ve got the page template working & I can list users, but I can’t list subsets of the user data – my PHP and DB skills are too limited.
thanks in hope!!
Tracey
DavidW (1 comments)19 September 09
The remove categories doesn’t work for me jsut gives a tstring error.
Loy97 (1 comments)22 October 09
This seems to suggest that the higher temperature of the warm-blooded animal includes the advantage of enabling it to get rid of its entropy at a quicker rate, so that it can afford a more intense life process. ,
Mad Max (2 comments)25 November 09
Great tips, but I’m using a much more simple way to show number of results in my search page:
found_posts.’ results matching you search criteria “.$s ?>
…
…
What do you tink about it?
Bye
Mad Max (2 comments)25 November 09
Great, my piece of code went lost! Let’s try again:
echo ‘We have found ‘.$wp_query->found_posts.’ results matching you search criteria ‘.$s
…
…
Bye
David (16 comments)8 January 10
Anybody know how to change the search result url?
instead of ‘domain.com/?s=searchterm’ have ‘domain.com/searched/searchterm’
Otherwise helpful tips, thanks
Caleb (2 comments)22 January 10
One thing I cannot figure out is how to make the results display a certain amount of search results without me having to change the number of posts displayed on my home page??
Please help!
Michael Martin (1319 comments)22 January 10
Hi Caleb,
Sorry, I’ve never posted about that on PBD (Probably should though!)
Open up your search.php file, and before the WordPress loop code, add this:
global $query_string;
query_posts($query_string . “&posts_per_page=20″);
Can change the 20 to any number you want. Should do exactly what you’re after!
ely (2 comments)5 February 10
You could also try adding this to your function:
$query->set(‘posts_per_page’, ‘20′);
Rapidshare Mix (1 comments)6 February 10
Im looking for a plugin that would replace default search in wordpress.Default searche results suck.
Asko Nõmm (1 comments)23 February 10
Very useful, thanks
Jolle jolles (2 comments)8 March 10
Thanks! Worked very well.