In developing Petomundo!, one of the biggest drawbacks that we faced was in using the default WordPress search. At an early meeting after the Pet Breeds database was created, we would type in Beagle, and in the search results, it would be show down the list as the fourth or fifth post.

Another situation arose in dealing with all of the sub-domain content of the site. We have tons of users creating great blog posts all about the animal world, and there was no way to search the other sites using the default search. So, this needed to be addressed too.

I was a little nervous about the integration with Google Site search as I had used a variety of plugins before that didn’t work the way that I wanted to, so off I went, determined to make it work the way that I wanted.

Here are the steps in a general order.

Google

  1. Start off at Google Custom Search Engine and create an account. The reason that we are using Google Custom Search Engine and not Site Search, is that site search you have to pay for, and custom search is ad supported, so it is free. Also, you can set up your adsense account and even make some change for those searches.
  2. Fill out all of the forms to get going. The magic comes when you get to the section about sites to search. Theoretically, you could add all of the sub sites, but Google provides a nice wild card setting by adding an asterisk the front or back end of the domain name for sub-folders, or sub-domains. I added these variables:
    • *.petomundo.com/*
    • petomundo.com/store/*
    • petomundo.com/petbreeds/*
    • petomundo.com/members/*

    The first element does a comprehensive search of the whole site, sub-domains, and sub-folders. The second and third provide a refined search that will explain in a moment.

  3. Click on Standard (ad supported) Edition and the terms of service, and submit.
  4. On the next page, there is a box to try out a query, and I FYI, I have never been able to have it return anything, but it has worked for me on the site.
  5. Once you have completed the registration process, click on the control panel button for your site.
  6. The basic area can be reviewed. You may wish to have the search engine public, (there are others for code, apple stuff, etc.) When you are done there, if you would like to make money one ads, click over to the make money button in the left column.
  7. If you have an Adsense account, simply enter your info. One thing to keep in mind is that you need to make sure you are signed up for AdSense for Search and not just AdSense for Content or Referrals. This needs to be done to make money off the ads that will show up as part your search results.
  8. Once that is done, click on the code button to get the code for your site.
  9. For me, the goal was to host the results on my site, so I picked that option. If you are looking to make money via adsense, iFrame is the only option.
  10. In WordPress, create a new page called search and note the permalink for that page. For Petomundo, it is http://petomundo.com/search-2/.
  11. In Google, add the URL for your newly created page into the area where the search results will appear.
  12. Now, time to create a few pages in WordPress to handle this new content.

WordPress

  1. Let’s start off with the page results template. Take your page.php template in your theme folder and duplicate it, renaming it searchresults.php. At the beginning of the folder add this code to distinguish it as a template page.
  2. Now, in the content area of your page, delete the contents of the loop and paste the code from Google into the area where the loop would have been.
  3. Now, for the search form, there are few options here. You may want to add it somewhere in your header, perhaps in your sidebar, or elsewhere. With Petomundo, I added it in the header, and also in the sidebar where I had another search box that people where accustomed too. I also added it to the top of the search results page so that if someone wanted to refine there search, they could do it right within the same page as the search results. Like they would with Google.
  4. Once the code is place, go back and edit the search page you created back in step 10 of the Google side. If you are running 2.7.* there is a box at the bottom right about page templates. Add the Search Results Page template and you should be set.

A lot of steps, but mostly copy/paste. As I mentioned up in step 2 of the Google part, there are ways to add refinements to your search. I wanted a way for people to search specifically in the Pet Breeds database, and the Petomundo Store, so I added refinements to those search items. With the Member wildcard, you can search just the member profiles for content. Looking for someone with a dog like yours? That is the method there.

Other items of note, some simple CSS will make the results look smashing on your page. I have a content box, with a white background, and then another div inside that that houses the results. That way there is some padding on the sides.

I would like to create a nice little box that houses the search box on the results page, and give it a nice header like I have done other place on the site too… But overall, I am super satisfied with the product. And unlike Google Site Search, I don’t have to pay for this, and you can have the potential to make money too.

This post was written by Jake Spurlock, a member of the BuddyPress developer community. If you’re interested in contributing to the BuddyPress blog, please log in and head to the “Write Post” link in the menu bar.