Custom Searchform.php with Image

Add or replace the contents of searchform.php with the following in order to enable a dynamic search field with an image search icon in, similar to the image below:

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


		<input id="s" name="s" type="text" value="" onfocus="if (this.value == '') {this.value = '';}" onblur="if (this.value == '') {this.value = '';}" size="32" tabindex="1">

		<input type="image" src="<?php bloginfo('stylesheet_directory'); ?>/img/searchicon.png" name="search" alt="Search" class="button" />



Example of Searchform with icon:

search field with search icon

The above image has been adjusted with CSS.

Leave a Reply

Posted in php
katherine as a flat graphic icon

About Me

I’m an African / Ojibwe First Nations Web Developer living in Winnipeg, Manitoba.

Visit the Tips and Blog to see what I’m working on.