The search area in the header “works” in that it’s designed and you can click it open and closed and all that. But it doesn’t actually do any searching yet. That’s pretty important eh?
On this site we use Google Custom Search Engines to search the content. WordPress has built in search, but it’s not very good. It just matches strings and lists what it finds in order. There isn’t any of the fancy stuff like Google offers: search logic, fixing misspellings automatically, determining intent, and most importantly, showing the most relevant results first.
So, we’re going to use GCSE, and we have some setup to do. We go into their admin area for creating them and create one from scratch. We’re going to use the free version. Not because I want ads all over my search (I don’t) but because the paid version is cost prohibitive to a site of this size. It’s either I pay thousands a month for ad-free search, or actually earn a few bucks having ads on the search and get it the search capability for free. A no-brainer.
The first one we build is a full site search, so we have it search “css-tricks.com”.
Then we get the code that GCSE give us to include on the site for search to work. We have to do a little digging to find the option where it shows search results only, and you “bring your own” search form. That is definitely for us, as we have already designed our search form and like it the way it is.
We have a special page template just for search results. We whip this template into shape showing the things we want it to show.
Then we set about creating more custom search engines. This is kind of a hacky way to accomplish what we want: being able to search only sub-sections of the site at will. A second CSE we create is only for searching “css-tricks.com/forums/”. Then we make a different search results page just for forums search (/search-results/forums/) but using the same template. On this page, we put the code from CSE for this new more limited search engine.
We’ll just need to make sure users get to the right one somehow…
Hi Chris,
I’m enjoying the videos, but I think that the name of this file is wrong.
Thanks
Fixed!
So I’ve only gotten through half of this video so far, but if you can mess with CSS to change the way the results look, couldn’t you set the ads to “display: none” to push your site’s content to the top?
I guess that’s a bit nasty, ethically speaking, but so is charging thousands of dollars a year for ad-free site search….
Just a quick tip here regarding ads the free version of GCSE: if you happen to be working on a site for a “nonprofit organization, university, or government agency” (as I am), Google allows you to use free GCSE with ads disabled on the results page. I think this almost makes using GCSE a no-brainer decision in these situations.
I’m not sure if that’s important, but while setting up your Ad Sense Account for the global search results you didn’t hit “submit”, but you did for the Forums Search Results.
Ah well! It works now as best I can tell. If it was a mess-up, I probably went and had to fix it off “camera”. Eagle eye catch though =)
Wouldn’t changing the name of the form (q) also work, for example if you wanted to search the forums the
q
would be af
or something like that? And you would just have all the google search javascripts on thesearch-results
page?