Add Search Box in WordPress Header and Position it Properly

Two days ago I received a request from a client who wanted site users to search his site using a search box placed in the header. The design of this site allowed us to place the search box in the header instead of the sidebar. The following tip should guide anyone who wants to add a search box in WordPress header just like I did for this site.

Note: Creating a search.php file is highly recommended for clean code and good reference but it’s not mandatory.

Adding Searchbox.php Template File

Search.php template file is the search file in your theme files that adds the search function to your blog or website. To create search.php template file that will help in adding search box on your header you should copy the following code in a notepad and save it as searchbox.php.

<form id="searchform" method="get" action="<?php bloginfo('siteurl')?>/">

               <input type="text" name="s" id="s" value="Search the Site" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" />

               <input id="btnSearch" type="submit" name="submit" value="<?php _e('Go'); ?>" />

        </form>

Place this file in your theme files and create a div for the search box in your website header.

Open your theme header.php template file, create a div and name it search box (copy the code below):

<div id="search-box">

                  <?php include (TEMPLATEPATH . "/searchbox.php"); ?>

         </div>

Positioning Search Box in WordPress Header

Depending on the location you want to have the search box you can style the search box as follows to place it in the right side of the website.

#search-box {

    position:relative;

    float: right;
}

You can also style the search input as well as adjust the search box margin and padding accordingly.

Adding Search Box without Search Template File

You can alternatively add the search box without creating a search template file for your theme. To add search box directly to your theme header you should open header.php file and create a div tag to wrap up your search box, like we created above :

<div id="search-box">

                  <?php include (TEMPLATEPATH . "/searchbox.php"); ?>

         </div>

Replace the code directing to template location with the actual code for the search form:

Replace

 

                  <?php include (TEMPLATEPATH . "/searchbox.php"); ?>

With:

<form id="searchform" method="get" action="<?php bloginfo('siteurl')?>/">

               <input type="text" name="s" id="s" value="Search the Site" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" />

               <input id="btnSearch" type="submit" name="submit" value="<?php _e('Go'); ?>" />

        </form>

This approach adds the search code directly to your header without creating a template. The styling of the search box remains the same since you have wrapped it in a div.

If you still cannot figure out how to implement this code in your website you can reach me for help through my contact page.