Search works! It's just the template that you land on isn't quite right. We need to tweak up the template so it looks right and matches the style of the site.

The template that search uses at the start pretty generic. It's a template that I use on lots of WordPress sites. It's just like "page.php" - the "Default" template that all WordPress pages use, only it doesn't make the get_sidebar() call. I call it page-nosidebar.php.

Ultimately we ditch that template and make a template specific for search results. This gives us more specific control over these pages. This means we need to go into each search results page in WordPress and make sure it's using this template. Anytime we do something like that, we should take note, because we'll have to change that on the live site manually after we go live (changes like that don't go up with Version Control).

This new template makes it easy for us to apply CSS just to this page as well, using logic in the header.php file that we've done so many times. We spend a bunch of time poking at the styling of what comes across by default from GCSE. We remove some cruft, adjust some spacing, change some fonts, etc.

We wrap up pontificating about more work that needs to be done.


  1. Amrit
    Permalink to comment#

    Hey Chris

    Thanks to this vid, I decided to use google search on one of my wesbites, and it works great!

    I noticed on your current search results, you display the word you searched for as a heading, e.g. “Search Results for (keyword)”.

    Would love to know how you managed to do that.


    • Chris Coyier
      Permalink to comment#

      There is actually a WordPress function for it that should work pretty well

      Except note that the query param it expects is “s” like ?s=whatever not q like Google defaults too. You could either change what Google uses (I believe it’s a setting) or write your own function to $_GET the param, make sure it’s sanitized, and echo it on the page.

  2. Amrit
    Permalink to comment#

    Thanks, exactly what I was after!

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:

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

We have a pretty good* newsletter.