Move the search bar

Check out where the search box is. I moved it into the nav bar. Here’s how I did it…

First thing I did was to view the page source. From there I found the search form code and copied it. Next I went to my custom_functions.php file and created a function with it.

In your custom_functions.php file add the following code. You can put it anywhere you want but I recommend putting it at the top after the <?php tag. Remember, once you make the change, save it, and upload it to your server. Always describe the function and put it between the comment tags /*  */ at the beginning shown below in green. The comments aren’t shown on your rendered page and it just makes things easier for you to remember…

/*put the search bar in the header*/
function searchbar () {?>
<div class=”search”>
<form class=”search_form” action=”http://www.thesishacker.com/” method=”get”>
<p>
<input id=”s” class=”text_input” type=”text” onblur=”if (this.value == ”) {this.value = ‘To search, type and hit enter’;}” onfocus=”if (this.value == ‘To search, type and hit enter’) {this.value = ”;}” name=”s” value=”To search, type and hit enter”/>
<input id=”searchsubmit” type=”hidden” value=”Search”/>
</p>
</form>
</div>
<?php
}
add_action (’thesis_hook_header’,’searchbar’);

As you can see I placed the search bar in the header. In your custom.ss file add the following code. You can put it anywhere you want but I recommend putting it at the top. Remember, once you make the change, save it, and upload the new file to your server. Always describe what you’re doing by putting your descripton between the comment tags /*  */ at the beginning shown below in green. The comments aren’t shown on your rendered page and it just makes things easier for you to remember…

/*search form positioning*/
.custom .search {position: absolute;
z-index: 1;
margin: 1em 0 0 81em;
}

I tweaked it to my liking and added a z-index of 1. This makes the search form lay on top of everything else

I gave it an absolute position because I placed it in the header which has a position of relative

To see how I built the header check out this tutorial

Tagged as: custom.css, functions, header, move search bar, search, thesis