Styling Default WordPress Search Forms

This document is deprecated! The information on this page refers to a Thesis version that is now obsolete. Please visit the Thesis Docs for current documentation.

Having a search form on your site is one of the greatest built-in benefits of a dynamic WordPress web site or blog.

Because on-site searching is useful to both site owners and visitors, modifying the default WordPress search form is a popular question among Thesis users.

As you probably know, you can place the search form anywhere you like simply by using the appropriate hook – you’re not confined to a sidebar widget.

You can also modify the text from the default “To search, type and hit enter” through the use of a custom filter.

What you may not know is how to make a visible input button or clickable submit image. In addition, you can change the WordPress search form’s default colors, fonts, positioning, and more – all by using fairly simple combinations of php and css techniques.

Let’s look at four examples of visual modifications to the default WordPress and Thesis search input areas. We’ll work with a CSS-only version, a search form with a visible input button, search with a visible image-based submit button, and a full CSS background image replacement for the entire search form.

Search Box – CSS Styling

First is a search input that requires no PHP coding, and can be applied to the basic search widget in the sidebar.

To get the above, enter this into custom.css:

.custom form.search_form #s {
font-family:arial;
font-size:16px;
background:#ff0000;
color:#fff;
border:5px solid #000;
padding:10px;
width:210px;
}

You may not want a red background, white text, and black border for your site’s search box – but the above values illustrate the potential. Your creativity and testing can take your default search box a long ways using only CSS modifications.

Search Box – PHP/CSS Visible Submit Button

Thesis users often request a variation of the search input that provides a visible input button, one that can be clicked – though “Enter” still works, too. Here’s the look we’ll go for in this next example:

For those familiar with Thesis hooks, you’ll notice this search box will be displayed in the header, but the hook can be changed to suit your needs. Also added are additional classes to allow for specific CSS targeting.

Beginning with the PHP – add this to custom_functions.php:

function search_with_button_submit() {
?>
<div id="my-search"><form method="get" class="search_form_visible" action="<?php bloginfo('home'); ?>/"><p><input class="text_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" class="my-search" id="searchsubmit" value="SEARCH" /></p></form></div>
<?php
}
add_action('thesis_hook_header', 'search_with_button_submit');

Then in custom.css, add this to style the search inputs:

.custom #my-search { float:right; width:306px; }

.custom form.search_form_visible { width: 306px; }

.custom form.search_form_visible #s {
    background:#fff;
    border: 1px solid #000;
    font-size:12px;
    margin:0 6px 0 0;
    padding:4px;
    width:215px;
	float:left;
}

.custom #my-search input#searchsubmit.my-search {
    background: #000;
    color: #fff;
    cursor: pointer;
    float: right;
    padding: 4px;
}

Search Box – PHP/CSS Visible “Image as Submit” Button

Next is a variation on the “visible input” using an image for the submit button. Once again, this search form is styled with a clickable button, but “Enter” also remains functional. You’ll supply your own image source for the CSS background, but here is an example of the next example in action:

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

Add this to custom_functions.php:

function search_with_image_submit() {
?>
<form method="get" class="search_form_image_button" action="<?php bloginfo('home'); ?>/"><p><input class="text_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" class="my-search-image" id="searchsubmit" value="" /></p></form>
<?php
}
add_action('thesis_hook_before_content', 'search_with_image_submit');

Now for the CSS styling for the search input, where your image path will replace YOURIMAGE in the below, presuming that your image is located in the /custom/images folder – add this to custom.css:

.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;
}

Search Box – CSS Form Background Image Replacement

Finally, we return to the default “no visible input” search. While PHP is not necessary to achieve this look, to encourage diversity, this function modifies the search text and places the search input over a background image in the footer.

As in the previous examples, the hook can be changed. Also as before, you’ll be hosting your own image for the CSS background – as an example in action:

First you’ll add this to custom_functions.php:

function search_with_bg_image() {
?>
<form method="get" class="search_form_bg_image" action="<?php bloginfo('home'); ?>/"><p><input class="text_input" type="text" value="SEARCH: type &amp; hit Enter" name="s" id="s" onfocus="if (this.value == 'SEARCH: type &amp; hit Enter') {this.value = '';}" onblur="if (this.value == '') {this.value = 'SEARCH: type &amp; hit Enter';}" /><input type="hidden" id="searchsubmit" value="" /></p></form>
<?php
}
add_action('thesis_hook_footer', 'search_with_bg_image');

Replace YOURIMAGE in the below with your image path, where your image is once more assumed to exist in the /custom/images folder – just add this to custom.css:

.search_form_bg_image input {
    display:block;
    background: url("images/YOURIMAGE.png") 0 0 no-repeat;
    border:none;
    color: #666;
    font-size:14px;
    font-style:italic;
    line-height:60px;
    text-indent:60px;
    height:60px;
    width: 320px;
}

Not so tough, right?

With these four examples of styled search inputs at your disposal, your imagination can now bend Thesis / WordPress search functionality entirely to your will!