How do I customize my WordPress search form?

Question

Mission

I would like to customize the search field and button on my WordPress blog.

The search textfield and button I have in mind will have three states:

off

:hover

:focus

I will need to have three different DIV ids for each of these states.

Search's Text Field specifics

Additionally, I will need there to be the text "search site" initially loaded into the search's text field. when a user clicks into the search's text field that initial text will disappear and the users cursor will appear blinking. the user can then type in their search keyword. if after typing in their keyword they happen to click off the search's text field, their keyword will remain in the text field intact. if they decide to delete their keyword and click off of the search's text field , the text "search site" will reappear.

Search's Button specifics

The search button will have to have the text "search" that is centered vertically and horizontally.

Current State of my Search Text Field and Button

my current search form and site can be seen here at criticear

I have been able to make my comment form text fields have the 3 states I mentioned above since I got the code from ottodestruct's WordPress threaded comments tutorial.

the thing is that I do not quite understand how to take this comment form css and apply it to my search's textfield and button. you can check out my comment form on my blog criticear's single post page

Here is my search form CSS:

/*
SEARCH FORM
*/

form#searchform
                    {
                    display:block;
                    width:255px;
                    height:20px;
                    position:absolute;
                    top:56px;
                    left:753px;
                    }

.searchbutton
                    {
                    color: #0066ff;
                    border: 0px solid;
                    display:block;
                    width:45px;
                    height:20px;
                    background: #d2e4ff;
                    position:absolute;
                    top:0px;
                    left:202px;
                    -moz-border-radius-bottomright: 4px;
                    -moz-border-radius-topright: 4px;
                    -webkit-border-bottom-right-radius: 4px;
                    -webkit-border-top-right-radius: 4px;
                    font-size: 12px;
                    }

.searchbutton:hover
                    {
                    background-color: #0066ff;
                    color: #ffffff;
                    font-size: 12px;
                    }

.searchfield
                    {
                    background:url(/images/search-field-shadow.png) top left repeat-x #666666;
                    color: #eeeeee;
                    border: 0px solid;
                    position: absolute;
                    top:0px;
                    left:0px;
                    display:block;
                    width:200px;
                    height:20px;
                    -moz-border-radius-bottomleft: 4px;
                    -moz-border-radius-topleft: 4px;
                    -webkit-border-bottom-left-radius: 4px;
                    -webkit-border-top-left-radius: 4px;
                    font-size: 12px;
                    }

here is my searchform.php code:

    <form method="get" id="searchform" action="<?php bloginfo('url'); ?>/">
   <input type="text" value="<?php the_search_query(); ?>" name="s" id="s" class="searchfield" />
   <input type="submit" id="searchsubmit" value="search" class="searchbutton"/>
</form>

Here is the searchform php call I have in my header.php:

    <?php get_search_form(); ?> 

If you have any questions or need more info than let me know. I hope you can help. Thanks.

Solution

You need to use CSS to style the form as you want to, and JavaScript or a JavaScript library (like jQuery) to create the focus/blur effect you're looking for. I'm not going to do the whole thing for you, but I'll just point you in the right direction.

First of all, you don't need "3 different DIV ids for each of these 3 states." CSS has pseudo-selectors for :hover and :focus, so that's all you need. If you ever get caught up on that or run into browser problems, you can always use JavaScript (again, I recommend jQuery).

For the "Search site" effect in the input box, you'll be doing something like this (this is jQuery):

$('input[name=s]').focus(function(){
    if ($(this).val() == 'Search site')
        $(this).val('');
});
$('input[name=s]').blur(function(){
    if ($(this).val() == '')
        $(this).val('Search site');
});

The last thing I'll mention is that your CSS classes searchfield and searchbutton make your HTML more verbose than it needs to be. You can easily access these fields in your CSS without having to individually declare them in your HTML:

#searchform input[name=s] { } /* use this instead of .searchfield */
#searchform input[type=submit] { } /* use this instead of .searchbutton */

Comments

[Ernest Marcinko]

You can also try this plugin: wordpress.org/plugins/ajax-search-lite

[Admin]

Thank you Josh, I think I understand the part about using pseudo-selectors for :hover and :focus. Would the following be correct? #searchform input[name=s] :hover #searchform input[name=s] :focus I want to point out that I am not looking for a blur effect. I jsut want the changes between the 3 states to happen instantly. So based on this fact, would I still need jQuery to get those instant change effects? Thanks for pointing out about my code's verbosity. I would like to avoid that as much as possible. Can you recommend some sites or tutorials that you think I would benefit from? thanks

[Josh Leitzel]

Your CSS is correct there: #searchform input[name=s]:hover should work fine (no space between). You don't need jQuery for that. But I would suggest jQuery (you can also just use regular JavaScript) for the blur/focus effect you want for the "Search site" text -- that's the blur I was talking about. (In JavaScript, it's called a "blur" when you move out of an element, in this case the text box.)

[Josh Leitzel]

Here's a good article about CSS pseudo-classes: devarticles.com/c/a/Web-Style-Sheets/Learn-CSS-Pseudo-Classe‌​s And you can find very good, detailed documentation and tutorials for jQuery at jquery.com

[Admin]

one last thing. i wanted to have the text "critisearch" in the search text field. how do i get that text in there? also, i would like the text to instantly disappear when a user clicks into the text field. and if they decide to click out of the text field while the text field is empty the text "critisearch" would pop back in. how to do this?

[Josh Leitzel]

I explained that in my answer. That's what the first block of code is for (it's jQuery). Also, please choose this as the best answer if it helped you out. :)