The default WordPress search is not the best search result provider for WordPress posts. Fortunately, there are some very good alternatives such as Google Custom Search. I will show you how to use Google Custom Search to give your visitors a better experience when they search for blog posts on your website or blog.
In this article, we will not replace the existing wordPress searhc, we will just another otpino of Google search in the header of your blog, you can however remove the WordPress search if you want.
Step 1 – Create a New Page for Google Search Results in your WordPress Blog
Login to your WordPress Admin Panel and Go to the Pages > Add New and name it “Search Results”. Paste the following code in the WP editor, just make sure you use “HTML” mode while pasting the code in your newly created ‘Search Results’ page. Don’t select “visual” to paste your html code.
Before saving the page, choose the “Full Width Page” from the Template Drop down in the “Page Attributes” box from right hand panel. (see the following screenshot).
if you do not have full width template in your theme, you may create one by reading this post ‘how to create full width WordPress template’.
Step 2 – Getting the Custom Search Code from Google AdSense Account
Login to your AdSense account and go to AdSense Setup Tab. Go to AdSense for Search Link. Now create your search engine here. You are required to select few options such as
- Search Type: Choose whether you want users to search your site, a collection of sites, or the web.
- Selected sites: Specify a site or list of sites to search across. These can be individual pages, parts of sites, or entire sites.
- Optional Keywords: Keywords are used to tune the search engine’s results and ads to match your site’s content. Specify keywords that describe the content and subject of your site.
Most important of these options are the one under Search Results Style section.
For Opening of search results page, Choose Open results within my own site
for ‘Choose whether you would like your search results to open on Google or within your site.’ and Enter URL where search results will be displayed. yopu need to provide url of the search results page you created earlier which should be something like http://www.website.com/search-results/. Please see the screenshot below for other options.
Name Your Search Engine and Press Submit and Get Code button and you will see the Custom Search code. Just copy the partner-pub-id and place in the following code.
Step 3 – Creating Google Custom Search Form Template
Create a new file google-searchform.php in your WordPress Theme folder and add following code there. Make sure you replace partner-pub-xxxxxxxxxxxxxxxxxxxxxxxxxxxx with your own custom search engine ID that you set up inside AdSense in the Step 2 above.
One caveat here, that if you have not opted for a custom permalink structure, your blog pages might not work for this “/search-results/” and you will need to change this to page id. You will have to change it in the above Google Search form template.
Step 4 – Adding Google Custom Search Form in the Blog Header Template
Open your Theme/header.php file, and place this code in the header above navigation where you want to show the search box. You can style is as you desire using the css. I’d leave that to you as you desire.
<div id="gSearch"> <?php if (is_file(STYLESHEETPATH . '/google-searchform.php')) include (STYLESHEETPATH . '/google-searchform.php'); else include(TEMPLATEPATH . '/google-searchform.php'); ?> </div><!--end#gSearch-->
Signing up for Google Custom Search without Using Google AdSense Account
In the above example, I have explained the process to integrate Google AdSense Custom Search into your WordPress Blog. You are not bound to use your AdSense Account Google Custom Search, although I’d recommend it and there are additional benefits but if you do not have AdSense account or simply do not want to use it, you may go over to http://www.google.com/cse/ and click the ‘Create a Custom Search Engine’ button. You’ll need a Google account for this. (It’s setting up process is a bit different which I may explain in later post).
http://www.google.com/cse/ is a simple case of filling in the details of your site and search engine.
Note: Google offers 2 versions of CSE: a free one with ads, and an ad free, supported version for $100 per year. Bloggers will probably prefer the free version because the ads can be integrated with AdSense to make some money.
Hope that helps.