How to Add Google Custom Search Engine (CSE) Manually to WordPress Blog : Part-1

Its true WordPress already has built in search function. Nevertheless, why we will use Google custom search is a good question. Well I will try to deliver as much I know. Built in search of WP is good for small sites but for bigger sites I think it’s different. It’s more logical to use Google CSE as it is more standard. Another important point is everyone has an idea about Google’s search algorithm and how to use it. Hence it will be more user friendly. In this tutorial we will use the default search form/box of the theme as it will best match the design. Only the search results will be shown in your theme’s default search result page having Google’s results. So the overall outlook of your blog won’t be bad from visitor perspective.

What are the main things to do —

  • Creating a CSE account
  • Creating a search engine
  • Modifying search layout
  • Getting the code
  • Implementing the code on your site

In this part we will discuss about tasks related to Google.

Create a Custom Search Engine:

First go to https://www.google.com/cse/ and sign in with your existing Google account. If your account is approved in Google Adsense you will get revenue from ads shown in search result. After logging in you can create a new search engine for your site

Add Custom Search Engine

Put a name, description and site address. Be sure to put site address in correct URL format. Click the plus sign there to get more info about it. Put everything else and click next.

Add search to WordPress blog

Here you have to select a style and you can even customize the outlook/color clicking the Customize tab. The corresponding outlook will be shown at the bottom. You can also put your query there. Then click next.

Here the code is given for the search engine but as we only want to show the result in our default search result page we won’t take it.

Customize CSE:

For further customization click on ‘look and feel’ or from your CSE control panel go to ‘look and feel’. Select ‘Results only’ in ‘Choose a layout’ section as we will be using our own search box/form.

You can also customize the design if you need again. When you are done click ‘Save & Get Code’ button.

Note that, there is a text under the box ‘Switch to Search Element V1 code’. Click this link and code version-1 will be loaded. Then the text would be ‘Switch to Custom Search Element V2 code’. Copy the code from the box and keep it for further use.

There is an important point about search parameter. It defines the search term in the URL so that Google custom search engine can show relevant result.

Suppose you searched for computer that is put computer in the search box then clicked search. If the URL of the result page is http://www.allmaniabd.com//?s=computer and your query parameter for Google custom search engine is ‘s’ then CSE would show results for the query ‘computer’. If the query parameter is different then error will occur and revenant result won’t be shown. You should have to put the correct parameter and save it. You can find your parameter simply doing a search and analyzing the URL of result page.

The next part is implementing the code of CSE in your site. To go to part 2 click here.

Tagged . Bookmark the permalink.

Leave a Reply

Your email address will not be published.