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