Adding Google Custom Search to Headway in 9 Explicitly Easy Steps

For a non-techie, trying to install Google Custom Search can be a real PITA. Honestly it can be a PITA for us techies too – so here’s a quick guide that should help get you up and running. The most common request and setup is for a two-page layout – a search bar somewhere on your site with a separate search results page. We’ll be using this layout in the tutorial today.

Getting Started

Step 1 – Create your custom search engine. You can create a custom search engine at Google’s Custom Search page, or click “Manage your existing search engines” below the create button to install one you’ve already created.

Step 2 – Get to the control panel of your custom search engine.  Once you’ve created your custom search engine, click the “manage existing” search engines link on the Google Custom Search homepage and then click on “Control Panel” next to the name of your search engine.

Step 3 – In another browser window, create a page in your WordPress dashboard – call it Search Results, and leave it blank for now, and publish.  View the page & copy the page URL, you’ll need it in a moment.

Choosing a Look & Feel

Step 4 – Go to “Look & Feel” on the left navigation menu in the Google Custom Search control panel

Step 5 – Choose “Two page” for the layout, and any style you like. Then click “Save & get code”

Installing the Code

Step 6 – On the “Get Code” page, paste the URL you copied in step three into the box below “Specify the url in your site where you want the search results to appear:”

Step 7 – Copy the code from the box on top and place it into a text widget or easy hook where you’d like your search box to appear.

Step 8 – Copy the code from the box on the bottom and Edit the “Search Results” page in WordPress. Click the “HTML” tab on the content editor on the Edit Page screen in WordPress, and paste the code into the content editor, then publish.

Step 9 – Test and admire your new Google Custom Search 🙂

Advanced Style & Implementation Tips

The default search box for Google Custom Search can be tough to customize. You can create your own search form easily by choosing “Results Only” under layout, which provides the code to dump into a WordPress page. Then add your own search form. Here’s an example that’s worked for me in the past, feel free to copy, paste & modify to suit your needs.

{code type=html}


Spread the word!

7 Responses

    • I imagine that the instructions would be much the same. I think that they just give you some additional code to insert somewhere or to use in place of the other custom search code. I’m not very familiar with that process (never applied for custom search adsense)

  1. Thanks for the tutorial. I was very eager to timplement this on my website, but, for some reason, no matter what I do, the page only says loading and nothing happens. I checked the source code and the code is there but something is not working.

    I was first trying this on a development site but then even on my live site I get the same issue =(.

    • … I tried with search in the nav on every page and as an HTML/PHP block on this one page. Also tried with results code in WP page and as HTML/PHP block. The page is now using two HTML/PHP blocks, one per code block.

  2. Hello,
    Should this tutorial work for Headway 3.1?  I’m just getting the “loading” message on the search results page like a previous post.  I’ve used Google Custom Search on other websites and other themes, yet can’t get it to work in HW 🙁
    Thank you,

  3. It appears that Google has revised the instructions. It’d be great if you could update this tutorial to reflect the revision. I gave it a try, got the Search Box to show in the right place on the page but couldn’t get the results to show up on the Search Results page created in HT/WP – may be just a little PITA, but can’t spare the time just now to tinker with it. THANKS as always, Caitlin!

Leave a reply

Copyright © 2016 Vesped Inc. All Rights Reserved. Proudly Powered by Headway and WordPress