Nov
03
2009

Styling Your WP Search Forms

magnifying-glassRecently I had the task of setting up a new WordPress theme for a local group. In the mock up of the website I had made a search field that required a bit more work than I was used to. It took me a while to get everything in place, so I thought I’d share the steps I went though to achieve the final result.

The End Result

search-final

Step 1: The Basics

Let’s keep it really simple to start with. Open your favorite HTML editor (mine is Dreamweaver) and create a new HTML page. In the <body> tags put the following line of code and save this file as index.html.

<input type="text" />
<input type="submit" />

When you preview this page you should see something like this:

step1

Step 2: Reset Default Styles

So now that we have a plain old input box and submit button, let’s make it pretty. Start by creating your searchbox & button as an image and saving as a .PNG. Here is the image I’ve created for my form:

search-back

The width doesn’t matter, as we are applying this as a background image.

Now let’s go back to that initial markup we put in the HTML page and apply a class to each piece. Also set the value=”" so that there is no text in the submit button.

<input class="search-text" type="text" />
<input class="search-btn" type="submit" value="" />

The next step is writing the CSS. In between your <head> tags let’s create our CSS and take away the default styles of the input fields:

.search-text{
    background:url(search-back.png) 0 0 no-repeat;
    border:0;
    }
.search-btn{
    background:url(search-back.png) -216px 0 no-repeat;
    border:0;
    }

Now you should see something like this:

step1

Step 3: Expanding The CSS

Now we need our CSS to tell our form how big to be, in order to match the size of our images.

.search-text{
    background:url(search-back.png) 0 0 no-repeat;
    border:0;
    height:24px;
    width:200px;
     }
.search-btn{
    background:url(search-back.png) -216px 0 no-repeat;
    border:0;
    height:24px;
    width:34px;
    }

Let’s refresh our page and see what we have now.

step1

Step 4: Fixing The Layout

We’re almost done! We now need to get our submit button position correctly with our text input. We’ll add a position:absolute to the search-btn class:

.search-text{
    background:url(search-back.png) 0 0 no-repeat;
    border:0;
    height:24px;
    width:200px;
    }
.search-btn{
    background:url(search-back.png) -216px 0 no-repeat;
    border:0;
    height:24px;
    width:34px;
    position:absolute;
    }

step1

Step 5: The Final Touches

Now try typing in the input field. Not terrible, but the text is a bit off. So let’s add a font-size and text indent to the search-text class of our CSS. We’ll also define the cursor on the search-btn since we’ve reset the defaults and it currently doesn’t change.

.search-text{
    background:url(search-back.png) 0 0 no-repeat;
    border:0;
    height:24px;
    width:200px;
    font-size:18px;
    text-indent:5px;
    }
.search-btn{
    background:url(search-back.png) -216px 0 no-repeat;
    border:0;
    height:24px;
    width:34px;
    position:absolute;
    cursor:pointer;
    }

step6

Step 6: Applying To Wordpress

I always have an easier time designing WordPress parts like this as basic pages outside of my theme. When I’m done I then apply the changes to my theme.

In your WordPress theme, open searchform.php and add the classes to <input type=”text” > and <input type=”" > (these may vary slightly depending on the theme, but it should be pretty straight forward). Some themes do not have searchform.php, and if that is the case simply create one on your own with the values we created in index.html. Next apply your CSS changes, and be sure to copy your image to the appropriate folder!

That’s A Wrap!

I hope you found this tutorial helpful. Take it to the max and please share what you’ve made! Feel free to download the HTML/CSS code for the search form, as well as the .PNG & .PSD files.

styleSearchTutorial

Categories
Tutorial
Comments
No Comments
Author
Bob Pease