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


    • User Avatar
      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. User Avatar
    Permalink to comment#

    Thanks, exactly what I was after!

Leave a Comment

Posting Code!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.