how to add google search to wordpress manually

wordpress has inbuilt search, still people want to add the advanced search in their site. we will show, how to add google search to wordpress manually.

how to add google search to wordpress manually

There are too many sites build on wordpress. wordpress gives inbuild search option in cms. But still people want to add the advanced search in there site. I suggest you can add the google search in wordpress site. Adding google search in wordpress site is really SEO friendly also. It is very easy to add the google search system in wordpress sites.

In some very simple steps you can add the google search in wordpress sites.

First login to google and go to following URL:
https://www.google.com/cse/

Just add the your site and and get your site custom google search for your site.

Before this you need to create the wordpress page for showing the search result page.

I created page called “search result”. For getting JS code you need give search result page path in google settings.

You will get options for selecting search result layout. Here you will get two javascripts code for google search form and search result.

After getting the two javscript code. You need to add the form code into wordpress widget.

On search result page just add the second code and save it. That sit. Your custom site google search is ready.

You can Customize Google Custom Search Engine Colors and Looks as your site color and theme.

Sample Form Code: (you can use following code in wordpress widget)

<form action="https://purabtech.in/search-result/" id="cse-search-box">
<div>
815y3hyfmru" />
<input type="hidden" name="cof" value="FORID:10" />
<input type="hidden" name="ie" value="ISO-8859-1" />
<input type="text" name="q" size="32" />
<input type="submit" name="sa" value="Search" />
</div>
</form>

Following code you can use in search result page

cse-search-results">

var googleSearchIframeName = "cse-search-results";
var googleSearchFormName = "cse-search-box";
var googleSearchFrameWidth = 550;
var googleSearchDomain = "www.google.com";
var googleSearchPath = "/cse";
// ]]></script>

Google Search Trick in wordpress. There is width issue in search result page. Google search result render with 768px width.
You need to just add following CSS code in your wordpress theme style.css file.

#cse-search-results iframe {width: 200px; }

custom google site search you can add in any wordpress site without any wordpress plugin.