Graceson Aufderheide

On all of my websites I have added a small search bar into the footer.  I had to create these search boxes on my own, but now that they are there I can share the code so that you can easily implement both types of search boxes. There are a few requirements for you to get started. First, you will need to have phplugins and custom CSS activated. Once this is done, the rest is easy. If you want the search bar to bring up blog posts from WordPress then paste this code into your phplugins.php file.

//FOOTER SEARCH FOR BLOG
function ttg_footer_top( $style, $path ) {
echo '
<form action="/" method="get">
<fieldset>
<input class="footsearch" type="text" name="s" id="search" placeholder="Blog Search" value="" />
<button type="submit" class="footsearch">Search</button>
</fieldset>
</form>
'; return true;
}//END

If, instead, you want the box to bring up results from your TTG galleries then use this code:

//FOOTER SEARCH FOR PHOTOGRAPHY
function ttg_footer_top( $style, $path ) {
echo '
<div id="search" class="collapse clearfix">
<form action="/search" method="GET">
<input type="text" id="q" name="q" placeholder="Photo Search" class="footsearch" value=""/>
<button type="submit" class="footsearch">Search</button>
</form>
</div> <!-- #search -->
';
return true;
}//END

After you have put the first piece of code into your phplugins.php file, then paste this code into your custom.css file so that the box isn't too big:

/*FOOTER SEARCH*/	
.footsearch{
	max-width: 150px !important;
	height: 20px !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	font-size: 12px !important;
	display: inline !important;
	}

That is it! Now you should have a fully formatted search bar in the footer of your website.

-Graceson Aufderheide

Tell your friends: