Your custom Wordpress theme can really be drug down by the lame gray default search button. Lucky for us this is easy to change using good old fashion CSS and a nice button image. Wordpress makes it even easier, as we only have to edit two files (maybe just one) to change our search button on the entire site.

In this tutorial I am going to use a image for my custom button, but you can also style the button using css and create some pretty cool effects. I might write a tutorial on how to do that, but it is very similar, and by reading this you should be able to figure out how to style it the way you want it. Also, you can replace a form button using different methods, but I found this one to be the most compatible over the most browsers.

Step One: Check your existing code / Update if needed
So first, log into your Wordpress admin page and click the presentation tab on the top menu. (note: your template files must have permissions set to allow you to edit them this way. If your presentation menu says that you can’t, you will need to edit the files using something like notepad or Dreamweaver, and then upload them to the theme folder using FTP) First, we are going to open searchform.php and edit our button, adding a id so we can style it using CSS.

You theme may not have a searchform.php (even though it should) so you might need to copy it from the default template and link to it in your sidebar (or wherever you want your search bar to appear). See http://codex.wordpress.org/Creating_a_Search_Page for more information about that.

Once we have searchform.php in front of us, we will see something like this (this is the default):

<div id=”search”>

<form action=”<?php bloginfo(’url’); ?>” method=”post”>

<input type=”text” value=”<?php the_search_query(); ?>” name=”s” id=”s” class=”keyword” />

<input name=”submit” type=”submit” class=”search” title=”Search” id=”searchsubmit” alt=”Search” value=”Search” />

</form>

</div>

What we want to do is make sure that this:

<input name=”submit” type=”submit” class=”search” title=”Search” id=”searchsubmit” alt=”Search” value=”Search” />

has an id=”searchsubmit” like the above example. If your searchform.php has this, we are good to go on to the next step. If it doesn’t have it, add it, and we are ready to move on. (Most of you will already have it because the default theme for Wordpress has it.)

Step Two: Upload your Image
Next we need to upload our image we want for our search button. I threw together this little arrow submit in Photoshop. Steal it if you really want to, but I suggest spending a little time in Photoshop so that you can really create something that looks good with your theme.

Upload your image into your theme’s image folder. (I uploaded mine to wp-content/themes/pretty_blue_theme/images ) You could upload it anywhere if you wanted, but you would need to spell out the entire address in your template, and it wouldn’t work on any other websites without heavy modifications. Uploading it here will allow us to just input the relative URL, which is our next step.

Step Three: Edit your Stylesheet
Next, in the presentation window of Wordpress, open your Stylesheet. We are going to want to add styles for our button that link back to our uploaded image. Your theme may already have a style for your submit button. Make sure and replace it with our new styles so they don’t overlap. I came up with something like this:

#searchsubmit {
width: 25px;
height: 20px;
margin: 0;
padding: 0;
border: 0;
background: transparent url(images/search_arrow.jpg) no-repeat center top;
text-indent: -1000em;
cursor: pointer; /* hand-shaped cursor */
cursor: hand; /* for IE 5.x */
}

I set the width and height to my image, and then trimmed 5px off the height to center it with my search bar (which you can also customize by the way)The margin, padding, and border can be adjusted to better position your button. I link the image to the button using the background style (notice I only had to use the path images/search_arrow.jpg). I moved the normal button text far off the screen where no one will see it, and I made it so the user will see a hand cursor when they mouse over it, so that they know to click it.

Step Four: Enjoy your Results
After all that hard work, its time to enjoy your new search button. Search for something, sit back, and thing about all the people who will soon be clicking and searching your site in style.

Check out my use of the button above at http://cricketsoda.com/layout_test/

		Save This Page