How to add a search box to your site

How to add a search box to your site

DISCLAIMER:

This article is slightly more technical.  We hate having to be technical at TCI.  Our goal is really to make things EASY.  To make placeing a search box on your site easier, we are developing a wordpress plugin to do this for you.  As a note, the information in this tutorial may not work properly for you the first time around.  You might have to try variations to make it work for you.  


Placing a search box on your site is fairly easy.  If you have a WordPress web site template built by Townsend Creations Inc we provide 2 quick and easy options: 

  1. inserting the search box as a widget
  2. inserting the search box in your menu bar

Both of these settings are built into every web site template we build.  But in some cases you might want to place the search box somewhere else.  

Add a search box BASIC code

This first block of code below is fairly basic and will insert a basic search box. You can make changes to the code if you like.========================

 
<form id="searchform" method="get" action="/index.php">
<input type="text" name="s" id="s" size="15" />
<input type="submit" value="Search" />
</form>
The above code will display a search box similar to the one below.
 

Add a search box ADVANCED code

Now if you need a more complicated search box use the code displayed below:
 
<div id="searchone" style="float: right;width: 200px;padding: 10px;">
<form id="searchform" method="get" action="/index.php">
<div>
<input type="text" id="searchtopone" name="s" id="s" size="20" />
<input type="submit" id="searchgoone" value="Go" />
</div>
</form>
</div>

This is slightly more complicated code and can be further customized. You MIGHT require an additional WordPress plugin, like Exec PHP or PHP code widget to get this code to work.

Where do I place my search box code?

There are 3 places I put code to add a search box:

  1. You can place this code directly in a text widget.  This is a quick and easy way to get it to work.
  2. You can place this code in your web site theme file.  Generally the code is place at the end of the header.php file.
  3. You can place this code on your individual page template or on an individual page template files.

I recommend using one of the first 2 “add a search box” options listed in this article.  But you can place the code if you need it.  

Remember that if you change your theme file I always recommend first trying it on a test site (like on a sub domain) and then trying it on your live site.  Also I recommend you make sure to use html or php markup (as appropriate) to leave yourself a beginning and ending note on what code you added.

And that’s how you can add a search box on your web page.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Subscribe without commenting

Blog Categories

Blog Archives