I was checking out the control panel for my blog’s Google Custom Search Engine and saw something under the Code tab that I hadn’t noticed before: Search box and search results code for your website
I was intrigued at the thought of having the search results show up with my blog’s theme. After completing my search page, I thought I’d share how to do it.
First, create a new page in the theme’s folder called _search.php and upload it with the following content:
<?php /* Template Name: SearchResultsFromCSE */ ?> <?php get_header(); ?> <div id="content_cse"> <!-- Google CSE Search Box Begins --> <!-- PASTE YOUR CODE HERE later --> <!-- Google CSE Search Box Ends --> <!-- Google Search Result Snippet Begins --> <!-- PASTE YOUR CODE HERE later --> <!-- Google Search Result Snippet Ends --> </div> <?php get_sidebar(); ?> <?php get_footer(); ?>
In the theme’s style.css, create a copy of the #content block and call it #content_cse.
In WordPress admin, create a new page and select the search template from Page Template dropdown menu. Publish the page.
Now that the page has been created, get the url and put it in the Codes page field where it asks for the url (“Specify the URL of the page on your site where you want the search results to appear”). Copy and paste the two sections of code into _search.php in the places indicated above.
If the search results don’t fit perfectly within the theme, play with the width and padding in #content_cse.
If you want the query to show up in the page’s title, edit wp-includes/general-template.php:
FIND:
$title = $prefix . $title;
REPLACE with:
// If there's a query
$cse_query = strip_tags(stripslashes($_GET['q']));
if ( !empty($cse_query) ) {
$title = $prefix . $title. ': '.$cse_query;
} else {
$title = $prefix . $title;
}
Tips:
- If you have a narrow theme with a sidebar, in the CSE option “Specify where in the results you want advertising to be placed”, choose “Top and Bottom”. Otherwise, the sidebar will conflict.
- Check in both Firefox and IE because the padding and width settings affect each browser differently and sometimes could have embarrassing results.
Thanks for this. I’m working on implementing custom search in a new WordPress-powered site. Would it be possible to implement more than one custom search engine in a site with this approach — for example, a a cluster of search engines, each aimed at a particular search niche? Would this call for more than one template — e.g., _search1.php, _search2.php?
Thanks again.
You’re welcome, REP. Yes, it’s possible to implement more than one cse, but I don’t know how to make it work with the search page.
However, I am using the ajax search api to have multiple cse as tabs in the results. You can try it out with the search box at the top of the sidebar. You can even find my relevant post by querying for [ajax search api].
If that’s what you’re interested in, I can post the code.
Thanks for the offer of the code. Right now as I’m building the site, I’m creating a separate search results template page for each cse. We’ll see how that works!
Thanks for posting this; unfortunately it doesn’t seem to work for me.
I’ve created a new page based on the template, but when I want to add the CSE code in the page I can’t see “PASTE YOUR CODE HERE later” in the page editor (code view obviously). All I can see is a blank page with a title.
Any idea what I might be doing wrong?
I’m using wordpress 2.3.2
Thanks again.
Hi Roel,
If by page editor you mean WordPress’s editor, you wouldn’t be able to edit from there. You need to edit _search.php with a text editor on your computer and then upload it again.
Hope that helps.
Thank you for your quick response. I now have the code on the page; only some trouble with the position of the sidebar which I will figure out in my theme.
Thanks again.
WordPress users can actually go I more step and integrate the Adsense Search to the WordPress page itself , so they can Monetize the traffic using search on their blog.
Look @ the search on my blog
or this image to see what i mean : http://img80.imageshack.us/img80/9720/searchintegrationso7.png
be sure to remove the other adsense ads from the search page
Thank you so much for your article. I had tried many advices from blogs tutorial out there but this is the one that works perfectly on my blog. Great work!
You’re welcome, imhaya! Thanks for letting me know this helped you.
Hi,
It was a great post, thanks very much for the tutorial. Unfortunately, however, I was not able to implement the custom search. Would it be possible for you to have a look at my case. Really appreciate your help…
Thanks, i was struggling to integrate Google CSE into my blog
I followed everything that was instructed, I’m not getting no errors, however, i’m not getting any results to show on the page.
Your assistance is greatly appreciated!
Thanks, I used some information here and from codex to setup my own type of “custom search”. In fact, I kept the original wordpress search and added a google search after wordpress’s results. This way the visitor gets the most recent posts and he also has the option to use google to get more relevant search results. If none of my posts attends what he seeks he can also follow another link provided by google’s search. Oh… and you can use it with Adsense too!
I guess adsense provides option to open search results in your site only !
Thanks for the offer of the code