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…