Google Custom Search and WordPress Integration

Feb 11th, 2008
() 126,494 views

Update: There is a new Google Custom Search plugin for WordPress that you can install and skip the lengthy instructions here.

The default WordPress search engine barely qualifies as a search engine. It’s results are not that relevant, the search page shows the actual blog entries instead of a list of links of resulting pages and the experience gets worse if the search query gets the least bit creative.

I think everyone should deprecate the WordPress search engine and move to Google Custom Search. There is simply no comparison. You can see the search results for AJAX on my website.

How-to for Google Custom Search Implementation in WordPress

Having recently implemented it on my site I don’t think it gets much better than this. Implementing it in WordPress is trivial and the results are of the highest quality.

  1. Head on over to http://www.google.com/cse/ and register for an account. Follow the prompts all the way until asked to select the kind of layout/code options.
  2. The best Google Custom Search configuration I think is to select the iframe option with advertisements placed on the right. Secondly, you will want to specify the search results url as something like http://yourdomain.com/search.php. More on that in a minute.
    Google Custom Search Options
  3. Subsequently you will be shown two textarea’s. The first one is the search box code which shows the input field where queries are entered. You can paste this code in your header or index template (header.tpl or index.tpl in the wp-content/theme/ directory) depending on where you want the box to show up.
  4. The second code box is for the search results page. To display the Google Custom Search results on a fresh page, create a file called search.php in the root of your web directory (this corresponds to the results url you entered above). Within this page you should paste both code snippets. The Google Custom Search box code will display the search box to the users once again so they can see their own query. The Custom Search results code will display the actual results below the box. This is what your search.php will look like: 
    // these two lines get the theme page initialization code and header
require('./wp-blog-header.php');
get_header();
?>

<!-- Google CSE Search Box Begins  -->
...
<!-- Google CSE Search Box Ends -->

<!-- Google Search Result Snippet Begins -->
...
<!-- Google Search Result Snippet Ends -->
  5. That’s it, you’re done.

Your page won’t be instantly indexed and may take a day or two, but that’s a small price to pay. And if you show your 5-10 most recent blogs in the sidebar then you’re good anyway because users can navigate directly.

Update @ 8 Dec, 2008: You can store search.php in your themes folder and tidy up the URL to /search/ instead of /search.php if you follow these steps:

  1. In step 1, the URL should be <your_domain>/search/ instead of <your_domain>/search.php
  2. In step 4, create a search.php file with the following code and save it in /wp-content/themes/<your_current_theme> folder: 
    get_header();
/*
Template Name: Search Template
Description: A template for the search page
*/
?>
<!-- Google CSE Search Box Begins  -->
...
<!-- Google CSE Search Box Ends -->

<!-- Google Search Result Snippet Begins -->
...
<!-- Google Search Result Snippet Ends -->
get_footer();
?>
  3. Go to Write -> Page and give the page the page the title “Search” and make sure the permalink reads /search/
  4. At the bottom of the page select Page Template -> Search Template
  5. If you previously had a search.php in your / folder you can delete it (but make sure you have a backup somewhere just in case).
  6. Navigate to /search/ to make sure it all works

No related posts.

Related

No related posts.

52 Responses



This article is no longer open for comments