10-Step WordPress Google Search Integration

Integrating WordPress Google search greatly improves your website’s usability and provides a way to track your visitor’s queries. You can use plugins to do this for you but it adds to bloat and customization is limited. A manual installation of Google Search is the best choice optimization and flexibility.

wordpress google search

Installing custom search manually looks simple at first but it really isn’t. In this post I will show to you step-by-step how to integrate Google search to your wp site.

WordPress Google Search Integration in 10 Steps:

1. Create a new page where you want your search results to appear.

new-search-page


2. Sign-up and create a Google custom search account for your website here:

http://www.google.com/cse/


3. Enter your website URL then go to ‘Look and Feel’ on the left column.

setup-website-details


4. Select ‘Two-Page’ then click the ‘Save and get code’ button on the bottom.

select-two-page


5. Copy the first set of code.

This is for the search box. Paste it in notepad for later use.

copy-search-results-notepad

Don’t hit next yet!


6. In the same page click the ‘Search Results Details’ on top.

Enter the url of the page you created in step 1.

enter-search-results-details

Hit next to get the code for search results.

copy-code-search-box

Copy and paste it again in notepad then go back to wordpress and edit the search page you created.


7. Copy and paste this portion only in html view.

<gcse:searchresults -only></gcse:searchresults>

google-search-results-code

Many people get problems when they add two copies of the the javascript. You only need one and we’ll put that in the head area.

Save the page then go to widgets under appearance.


8. Drag a text widget to your sidebar widget area then paste the search box code.

<searchbox -only>

Again, without the JavaScript.

search-box-code-widget

Save the widget then open your header.php to add the javascript.


9. Paste the JavaScript just before the closing head tag.

javascript-header

Remember the script from the searchbox and the search results area exactly android mobile casinos the same so any one will do.


10. Save your header.php and test your sidebar search.

You should now have something like this:

search-box-sample-empty

Test out your search box and if you followed each step correctly you’ll automatically be redirected to your search page with results.

Search for something...

Results show

Other popular areas to place the search box is in the header area or the navigation menu. Once you’re sure everything’s working right you can go back to Google to customize your custom search to match your website’s design.

Share and recommend this on your social networks if you found it useful or helpful.

Like, Tweet and Share!

Comments are closed.
Published Last updated