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...

Comments

  1. Miguel Chamorro
    Permalink to comment#

    Hi Chris,

    I’m enjoying the videos, but I think that the name of this file is wrong.

    Thanks

  2. Marcus Burnette
    Permalink to comment#

    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….

  3. Jason Neel
    Permalink to comment#

    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.

  4. Martin Wolf
    Permalink to comment#

    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.

    • Chris Coyier
      Permalink to comment#

      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 =)

  5. Jochim
    Permalink to comment#

    Wouldn’t changing the name of the form (q) also work, for example if you wanted to search the forums the q would be a for something like that? And you would just have all the google search javascripts on the search-results page?

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences like this:

```
<script>
  function example() {
    element.innerHTML = "<div>code</div>";
  }
</script>
```

We have a pretty good* newsletter.