Add a TNG Search Widget to the WordPress Sidebar

steven · Post by **steven** » Sat Apr 28, 2018 7:52 pm

Use the code below to create a search widget for TNG using first and last names. You must change the get action path for TNG or you will get a page not found error.

To create the search widget go to the WP dashboard and select Widgets.

Select the Custom HTML widget and drag to the desired sidebar.

In the Title box enter the name for your search widget.

Paste the code below in the content box.

Code: Select all

<table>
<tr>
	<td id="" style="color: #333333; padding: 5px 0px 2px 0px; "><span>First Name</span></td>
</tr>
	<tr>
		<form class="cb-search" id="topsearchform" name="topsearchform" method="get" action="/TNG_FOLDER/search.php">
			<td id="col1and2"><input type="hidden" value="AND" name="mybool" />
				<input size="18" name="myfirstname" type="text" id="myfirstname" /></td>

			<tr>
				<td id="" style="color: #333333; padding: 8px 0px 2px 0px;" colspan=""><span>Last Name</span></td>
			</tr>

			<tr>
				<td id="" ><input size="18" name="mylastname" type="text" id="mylastname" /></td>
			</tr>

			<tr>
				<td ><input class="cb-search-button" type="submit" value="Search" style=" margin-top: 5px; padding:0px 8px; color:#fff; background:#222222; border:1px solid #222222; cursor:pointer; -webkit-border-radius: 5px; border-radius: 5px; "></td>
			</tr>
		</form>
	</tr>
	<script>document.topsearchform.myfirstname.focus();</script>
</table>
<br />

Do not forget to enter the correct path to the TNG folder for the line method="get" action="/TNG_FOLDER/search.php">
If you want to search from the WordPress home page, change TNG_FOLDER to the TNG folder name on your website. If you want the search to work on any WordPress page add the full URL. Example: method="get" action="http://your_domain/TNG_FOLDER/search.php">
(Use https: if you are using SSL on your website)

Change the colors, padding and the input size (makes the input boxes larger or smaller) to match your website layout. Remove <br /> from the last code line if you do not want extra space below your widget.

Thanks to Cees Kloosterman for sharing the basic code.