Dec
10
2008

Getting Text in your WordPress Search Box


Have you ever wondered how some sites have text in their search box? This one is pretty easy. All you need to do is modify the searchform.php file, which can be found in your theme’s directory. Let’s use the default theme as an example to make it easier for everyone to see what to do.

1
2
3
4
5
6
7
<form method="get" id="searchform" action="<?php bloginfo('url'); ?>/">
<label class="hidden" for="s"><?php _e('Search for:'); ?></label>
<div>
<input type="text" value="<?php the_search_query(); ?>" name="s" id="s" />
<input type="submit" id="searchsubmit" value="Search" />
</div>
</form>

Now let’s change…

4
<input type="text" value="<?php the_search_query(); ?>" name="s" id="s" />

to…

4
<input type="text" value="Search & Hit Enter" name="s" id="s" onfocus="if (this.value == 'Search & Hit Enter') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search & Hit Enter';}" />

What does all this do? Oh… So very much.

First, it will automatically fill your search box with “Search and Hit Enter”. If you click on the search box, it will disappear and you can enter text. But if you don’t enter text and click out of the box, “Search and Hit Enter” will appear again.

If you liked this, please share it.

Tags: , , , , , , , , , , , , , , ,

Short URL: http://bit.ly/bBSjKU

Discussion 10 Comments

  1. DG on December 22, 2008 at 2:02 am

    Thank you, it works for me to put Search & Enter into my search field. I did this on 3 blogs after reading your instructions.

  2. Paul on June 5, 2009 at 2:04 am

    Thanks so much for sharing. Saved me a couple of minutes. :)

  3. Kaylee on February 1, 2010 at 12:02 am

    i cannot get this to work. here is the php code for my website… where would i put this?

    <div id="post-” class=”">
    <a href="” title=”" rel=”bookmark”>

    <?php printf(__('Posted by %s on ', 'sandbox'), 'ID, $authordata->user_nicename).’” title=”‘ . sprintf(__(‘View all posts by %s’, ‘sandbox’), $authordata->display_name) . ‘”>’.get_the_author().’‘) ?><abbr class="published" title="”>

    <?php wp_link_pages("\t\t\t\t\t”.__(‘Pages: ‘, ‘sandbox’), “\n”, ‘number’); ?>

    <?php next_posts_link(__('« Older posts’, ‘sandbox’)) ?>
    <?php previous_posts_link(__('Newer posts »’, ‘sandbox’)) ?>

    <form id="noresults-searchform" method="get" action="”>

    <input id="noresults-s" name="s" type="text" value="” size=”40″ />
    <input id="noresults-searchsubmit" name="searchsubmit" type="submit" value="” />


  4. Kaylee on February 1, 2010 at 12:03 am

    <div id="post-” class=”">
    <a href="” title=”" rel=”bookmark”>

    <?php printf(__('Posted by %s on ', 'sandbox'), 'ID, $authordata->user_nicename).’” title=”‘ . sprintf(__(‘View all posts by %s’, ‘sandbox’), $authordata->display_name) . ‘”>’.get_the_author().’‘) ?><abbr class="published" title="”>

    <?php wp_link_pages("\t\t\t\t\t”.__(‘Pages: ‘, ‘sandbox’), “\n”, ‘number’); ?>

    <?php next_posts_link(__('« Older posts’, ‘sandbox’)) ?>
    <?php previous_posts_link(__('Newer posts »’, ‘sandbox’)) ?>

    <form id="noresults-searchform" method="get" action="”>

    <input id="noresults-s" name="s" type="text" value="” size=”40″ />
    <input id="noresults-searchsubmit" name="searchsubmit" type="submit" value="” />


  5. mJ chan on February 7, 2010 at 10:35 am

    how about for Password box? pls help me T_T im new to html designing..

    • bonny on March 14, 2010 at 10:33 pm

      hi sir.

      i want to put a search form in my homepage example in home. i will put inside of page the search form to search a certain topic or anything.

      and not in widget search. pls help thanks..

  6. andrei on March 24, 2010 at 2:15 pm

    Thank you sooooo much :-D

  7. Jake on March 29, 2010 at 2:49 pm

    Thank you! It works :)

    Sorry to ask for more but is it possible to change the color just for the default value?

  8. Betty on March 30, 2010 at 11:30 pm

    No need to rummaged through the functions.php and even general-template.php anymore! Might help to add a note that even if someone is working off a custom theme (i.e. their theme doesn’t already contain a searchform.php), that this would work just as well :)

  9. aflamway on April 18, 2010 at 6:45 pm

    thanks on ur post i had alot of usfeul infromation from it

Leave a Reply

Your email address will not be published. Required fields are marked *

*


To enter code in the comment box, please place it between <pre lang="php"> </pre> tags. You don't have to convert any characters to their hex/HTML code. Just add your code the way you would to any code editor.