How to Add Simple Google/Bing Search Box to Your Site

技术文章 October 31, 2023

From this tutorial you’ll learn how to add simple search box to your site. It can be Google Search box or Bing Search box.

When you don’t want a Search box to occupy too much space on your website, then you can add a small Google Search box on your page.

To do it, please, log in to your WordPress Dashboard. Locate Appearance tab on the left, and open Customizer submenu.
In Customizer block locate Widgets tab and click on it. Here you need to choose the widget area where you want to place a search box and click on Add Widget button.
Select Text widget and paste the following lines of code to its content area.

	<form method="get" action="http://www.google.cn/search">
	<div style="padding:4px;width:15em;">
	<table border="0" align="center" cellpadding="0">
	<tr><td>
	<input type="text" name="q" size="25" style="color:#808080;"
	maxlength="255" value="Google site search"
	onfocus="if(this.value==this.defaultValue)this.value=''; this.style.color='black';" onblur="if(this.value=='')this.value=this.defaultValue; "/>
	<input type="submit" value="Go!" />
	<input type="hidden" name="sitesearch" value="yoursite.com" /></td></tr>
	</table>
	</div>
	</form>

Notice, that you have to change yoursite.com in the code to your actual website address.

Click on Save and Publish button to save the changes.
Now you have a Google Search box on your website. It allows the visitors to search through your website’s content.
If you need to enable global search (search through the web) you can add to the existing Search box two radio buttons. One will enable visitors to search the web, and the other will enable visitors to search through the website’s content.
To add this kind of Search box you’ll need to paste the following lines of code to the Text widget content area.

	<form method="get" action="http://www.google.cn/search">
	<div style="border:1px solid black;padding:4px;width:20em;">
	<table border="0" align="center" cellpadding="0">
	<tr><td>
	<input type="text" name="q" size="25"
	maxlength="255" value="" />
	<input type="submit" value="Google Search" /></td></tr>
	<tr><td align="center" style="font-size:75%">
	<input type="radio" name="sitesearch" value="" />The Web
	<input type="radio" name="sitesearch"
	value="yoursite.com" checked /> Only Your Site<br />
	</td></tr></table>
	</div>
	</form>

Don’t forget to change yoursite.com to your current domain name to make the Search box work properly.

google search box

If you need to use Bing search engine in the search box, add the following lines of code to the Text widget. As a result, a Bing Search box will appear on your website’s page.

	<form method="get" action="http://www.bing.com/search">
	<div style="border:1px solid black;padding:4px;width:20em;">
	<table border="0" align="center" cellpadding="0">
	<tr><td>
	<input type="text" name="q" size="25"
	maxlength="255" value="" />
	<input type="submit" value="Bing Search" /></td></tr>
	<tr><td align="center" style="font-size:75%">
	<input type="radio" name="q1" value="" />The Web
	<input type="radio" name="q1"
	value="site:yoursite.com" /> Only Your Site<br />
	</td></tr></table>
	</div>
	</form>

google search box