Style Default WordPress Search Form in Thesis Theme

In this tutorial, I am going show you how to style default WordPress search box with a custom image in place of “search” as submit button and you can use your own image, you can also modify “To search, type and hit enter.” Default one looks boring so, Let’s do it.

Search Box–”Image as Submit” Button

Once again, this search form is styled with a clickable button, but “Enter” also remains functional. You can use your own image source for the CSS background.

The code places this search box in the “before content” area, but again, the hook can be changed as desired.

Add the below code in custom_functions.php

function search_with_image_submit() {
?>
<form method=”get” action=”<?php bloginfo(‘home’); ?>/”><p><input type=”text” value=”Enter Text &amp; Click to Search” name=”s” id=”s” onfocus=”if (this.value == ‘Enter Text &amp; Click to Search’) {this.value = ”;}” onblur=”if (this.value == ”) {this.value = ‘Enter Text &amp; Click to Search’;}” /><input type=”submit” id=”searchsubmit” value=”” /></p></form>
<?php
}
add_action(‘thesis_hook_before_content’, ‘search_with_image_submit’);
For css styling ,place the below code in custom.css ,Also replace your image path with your image ,We are assuming that your images are placed in /custom/images folder.

.custom form.search_form_image_button {
font-family:arial;
margin-left:auto;
margin-right:0;
width:260px;
}

.custom form.search_form_image_button #s {
background:#fff;
border:1px solid #BBB59A;
font-size:12px;
font-variant:small-caps;
margin:0 6px 0 0;
padding:4px;
width:214px;
}

.custom input#searchsubmit.my-search-image {
background:#fff url(“images/YOURIMAGE.png”) no-repeat 50% 50%;
border:0 none;
cursor:pointer;
height:28px;
text-indent:-9999px;
width:28px;
}