While there are some nice plugins to enhance WordPress search like Search Everything and Search Unlished, Google custom search engine (AKA Google CSE) seems to have the best algorithm yet.

Before integrating the custom search engine with your blog, I recommend testing it on a local WordPress installation (if you don’t have one, read this), before implementing it on your live blog.

integrate google custom search engine with wordpress

Let’s see how to integrate Google CSE in WordPress:

Preparing your blog for Google custom search integration

First, we need to prepare two files for the integration:

  1. Go to your WordPress theme folder and look for a file called searchform.php. if it doesn’t exist, create it.
  2. Create a new page template named searchResults and save it as a new file called searchResults.php.

    3. Your searchResults.php should look more or less like this:

    <?php /* Template Name: searchResults*/?>

<?php get_header();?>
      <div class="post">
        <h2><?php the_title();?></h2>
        <div class="postContent">
/* leave space here to paste the search results code later on*/
        </div>

<?php get_sidebar();get_footer();?>
  3. Login to your blog dashboard (www.yourblog.com/wp-admin).
  4. Create a new page (Pages -> Add New) and name it Search Results (or any other name you would like).
  5. As your page template select searchResults
  6. Click on Publish

internal search engine

Creating a custom search engine for your blog

The next thing to do is create and customize your new search engine.
If you don’t have an account in Google (I assume you do, but just in case), create one here.
Go to Google CSE, and click on Create a Custom Search Engine.
On the next screen fill out the following fields:

  1. Enter the desired name for the search engine (can be your domain name).
  2. Enter the search engine description (can be the same as your blog’s meta description tag).
  3. Make sure Only Sites I Select is selected.
  4. Type your domain name without http (e.g. www.yourblog.com).
  5. Make sure the Standard Edition option is selected.
  6. Go over the terms of service (if you know anyone who actually read the entire document, I’d like to know them too) and tick that box.
  7. Click Next.
  8. On the following screen click on Finish.

Setting keywords

You should now see your new search engine listed. Click on Control Panel.

  1. Click on Basics on the left pane.
  2. Enter Keywords for your search engine (can be the same as the keywords in your blog’s keywords meta tag).
  3. Click Save Changes.

google cse for blog

Customizing the look and feel for the new search engine

After setting the keywords, it’s time to customize the look and feel of the search engine:

  1. Click on Look and feel on the left pane.
  2. Select iframe. This means that the search results will be displayed on a separate page (which you already created and named it searchResults.php, remember?)
  3. Select an option from the list and click on the customize button. However, you can also have your own design for the search box as I did in this blog; in this case, just select the Default option (in addition, check out these tips).
  4. Click on Save .
  5. If you want to, you can make money by people clicking the ads in your search results page. To that click on Make Money on the left pane and follow the instructions.
  6. Click on Get Code .

more accurate search results

Copying the code for the search box and the search results to your blog

Alright, now we can copy the generated code to the files we created in WordPress.

  1. Make sure Get Code is selected in the left pane.
  2. Enter the URL (permalink) of the page you created in WordPress for your search results and select Top and Bottom for the ads location (refer to these the second tip for the reason to this location).
  3. Copy the code in the first box and paste it to the searchform.php file in your theme folder (if this file has some code in it already, delete it first and then paste the new code).
  4. Copy the code in the second box and paste it to the searchResults.php file, where you left some space for pasting (should be line 7 according to that example).

search engine for WordPress

We are done with the integration. However, you can modify those settings at any time and then recopy that code to your files again.

Finally, a few tips:

  • The code for your search box can be customized according to your CSS needs (add IDs or classes to the Form and Input tags).
  • If you want the search results iframe to have a width less than 795, you need to select Top and Bottom for the ads location.
  • If you do the integration locally before going live (recommended), the height of the search results iframe will always have white space below the results. This space will disappear once you
    implement the CSE in your live blog.
  • If your blog’s background isn’t white (like in this blog), wrap the code for the search results with a div. than give that div some right and left padding, so the search results will not appear that close to the edge of the white area. Search this blog to see an example of it.

Feel free to speak your mind or ask questions in the comment area!

Additional resources

Topics:   | |