NOTE: Code now supports 508 compliance as well as Schema.org web page type of Search results page.
If you’re not happy with the search functionality provided out of the box with WordPress you might want to consider Google CSE for those of you running the Genesis Framework.
Here’s a quick and easy WordPress tutorial demonstrating how you can use Google CSE with the Genesis Framework.
Create a New Search Engine
Head on over to Google CSE and follow their instructions on creating a new search engine.
Add a new search engine.
Enter which website(s) you want Google to search, the language, give it a name if you don’t like the default name then click Create.
After you click on “Create” you should see a congratulations page similar to the one I got below.
Look & Feel. By default the search results from Google will pop up in a modal window which is believe to be a poor user experience.
Click on ‘Get code’ and you will see a page similar to the image below. Click on ‘Look & Feel’ and select ‘Results only’ then click on ‘Save and Get Code’ to complete the steps at Google CSE.
NOTE: Locate the variable named cx and keep a copy of it. You will replace the number in the cx variable in the tutorial with your own.
Now that we have everything set up at Google, we can come back to our website and begin the customizations to the Genesis Framework.
Filter the Genesis Search box.
Grab the code below and stuff it into your functions.php.
Create a new page template. Grab the code below and name it page_googlecse.php and place it into your currently active child theme folder.
NOTE: Locate the variable named cx and replace the value with your own values that you got from Google.
Create a new page. Name it ‘Search Results’ and make certain that the slug name is ‘search.’
Then under “Page Attributes” you will click the select-box labeled ‘Template’ and select ‘Google CSE’ which is the page template we created in step 6.
There is no step 7. You should be done. If you don’t have a search box visible on your website, go drag the search box widget into a sidebar, header or footer and perform a search. Your results should show up on your new page using Google CSE.