Kabitzin on May 8, 2009 · in Blogging Tips

Oh hi Google, come on in!

As I’m sure most of you know, the WordPress search function is terrible; hell, even the developers know that WP search sucks. WP search returns results in reverse date order (rather than in order of relevancy), and it has a lot of trouble with phrases. After seeing Hung give it a spin at AnimeNano, I decided to give Google Search a try as well. After all, Google is all up in this blog’s business already. So here’s a little starter lesson on how to not only replace your WP search with Google Adsense search, but also make everything look nice and integrated.

Set Up Adsense for Search

The first thing you need is an Adsense account, which most webmasters should already have. Navigate to Adsense Setup >> Adsense for Search. Most of these options are self-explanatory, but make sure you select that you want the results to load on your own site. You’ll also want to make sure that the search results are the right width. Unfortunately, the smallest you can make this value is 795 pixels, so if you have a really narrow site, this isn’t going to work that well.

I already knew I was going to call my page 'Search'

I also set my search up to search on http://www.seaslugteam.com/*in order to only return results from SS!AB. If the reader wanted to search the whole web, he probably would have gone straight to Google instead of using my site’s search function. Once you’ve customized the various options, click Submit and get the 2 blocks of Google code. The first block is for the search field, while the second block returns the results of the search.

Create A Search Page

Next, you will need to add a template to your WP theme. There are tutorials out there for creating page templates, but chances are that your theme already has a few. The easiest way to make a custom WP page template is to go into your theme folder and copy and rename the page.php file. At the top of the page, place the following code:

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

Once you upload this template into your theme’s folder, you’ll be able to select the template in your Edit Page screen (Attributes >> Template). You should give the new page a title (in this case Search, so that the URL will be http://www.seaslugteam.com/search/ as I told Google in the previous step), and also hide the Search page from displaying in the navigation menu (with this helpful plugin).

You should probably disallow comments and pings on this page, too

The two additional changes that you will make to this page template to differentiate it from a typical page are:

1. Remove the sidebar: Find the code <?php get_sidebar(); ?> or <?php include (TEMPLATEPATH . "/sidebar.php"); ?> and remove it. As mentioned before, the search results must be at least 795 pixels wide, so chances are you cannot fit both the search results and the sidebar. If your theme allows for you to have a 795 pixel body and a sidebar, you do not have to delete the code for the sidebar.
2. Paste in the Google code: I took the code that Google gave me in the second box (that returns search results) and pasted the block underneath <?php the_content(); ?>. I also added a comment above the Google code. This means that the webpage will render just like a normal page on your blog, but with the search results right under your (empty) page content.

Replace the Search Widget

Go to your Widgets page, and remove the old WordPress search widget. Create a new text widget, and paste in the code from the first box that Google gave you (that displays the search box). Make sure to save your widget settings. You should now see the Google search box where your WP search box was.

Tweak Your Style Sheet

For this step, the Firefox plugin Firebug is invaluable. This plugin will help you figure out which id or class you need to change in your stylesheet to get everything looking just right. The two main changes you will probably have to make are to the width of your post area on your search page (because your stylesheet probably restricts this area, to give the sidebar some space), and to the padding on your widget. This step is not too difficult, but the settings differ from theme to theme. If you have to go back and tweak your Google settings at this point, remember to re-paste the new Google code into your template, because the width is hard-coded.

Notice that 910 width + 10 padding = 920 total pixels

In the Thematic theme, the id that we are interested in is called container. Since this id is used a lot, I decided to change <div id="container"> to <div id="container_search"> on my search.php template, so that I wouldn’t have to change any of the other theme files. I then added the following lines to my style.css file.

#container_search{
width:910px;
padding-left: 10px;
}

My container is set to 920 pixels, but I wanted to offset my search results by 10. Therefore, I told Google to return the results in a 910 pixel box, and set the padding on the left to 10. I also added a few pixels of padding to cse-search-box, to get my search box to display in line with my other widgets, but this is a matter of preference.

Put Ya Guns On!

Wrong Holic, but good try!

That’s it, you’re done! You can always go back and tweak the look a bit, but all search results should look as if they came from your blog. I’ve found Google’s search to be a lot better, and I prefer the format of Google’s results. As much as I expect WP to improve their search function, I can’t really see it coming close to what Google has. Plus, the chance at additional ad revenue, however small, is a nice bonus (although when I used “Welkin” as my test term the first day, Google kept returning ads for Belkin).

Update: I realized a week later that if you select “Top and Bottom” for the Ad Location, the minimum width drops to 500 pixels. If your main content area is wider than 500 pixels, you can leave the sidebar in and skip the CSS tweaks, making the process even easier.

Update 2: Also note that you can paste the code for the widget box (which displays the search bar) into your template above the code for the search results. This makes it more convenient for readers in case their first search needed to be corrected or refined. You can change the line that reads <input type="text" name="q" size="31" /> so that the size is larger and fills the width of the content area. I changed mine to size="120" and keep in mind that this is the length of the field in terms of character length and not pixels.

This post was written by...

Kabitzin – who has written 1971 posts on Sea Slugs! Anime Blog.

One of the founders of Sea Slugs, I handle most of the blog admin tasks while wearing my I AM BOSS shirt. I like my action series well choreographed, and my romance series extra trashy. I also have a soft spot for puns.