class=”aligncenter” Hey again. Been super busy around here lately, but something I found made me want to share. This is a quick and easy trick that looks awesome and will save valuable space on your website. Ever seen those boxes where you enter your email address or a search and it says “enter search/name/whatever here” and that text goes away as soon as you click there? If you’re not using a Revolution/StudioPress theme, it’s probably not built into your site for you. Here’s how to add that functionality. (Note: for anyone familiar with javascript stuff, you don’t need to worry — there’s no external files attached to this one, just a quick code snippet and then you’re on your way.)
First, a little setting: this will work in any <input> box — that is a box that you type into. So a search box, email submission form, whatever. Also, you will need to edit code. I am going to use WordPress as an example, and I am going to use the search box, but this can be applied to any input box once you know the basics. Ready? Here we go:
Find the default search form (searchform.php). If your theme doesn’t have one, you can make one by copying searchform.php from the WordPress Default theme (or, really, any WP theme). The searchform.php just handles the actual search box itself, so you’re not likely to mess anything up. Once you have it, open searchform.php in your favorite text editor, HTML editor, or the Theme Editor in the WordPress admin. You’ll probably see something like this:
<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>
That’s your search form. To make text display in the input box (which is where you type stuff), replace this line:
<input type="text" value="<?php the_search_query(); ?>" name="s" id="s" />
with this:
<input type="text" value="Search this website..." name="s" id="s" onfocus="if (this.value == 'Search this website...')
{this.value = '';}" onblur="if (this.value == '') {this.value = 'Search this website...';}" />
If you want, you can change the “Search this website…” to be whatever text you want, but make sure you change it everywhere. What it’s doing is a simple if statement that is triggered when you click inside the box (onfocus) or somewhere else (onblur): if the text in the box says “Search this website…” change the text to ” ” (i.e. nothing). if the text in the box is ” ” (i.e. nothing), change it to “Search this website…” Easy. And now you can get rid of this part entirely:
<label for="s"><?php _e('Search for:'); ?></label>
thereby saving space. Handy, and also visually interesting. Also, as I said, no external javascript files to upload, and can be applied just about anywhere, once you get the hang of it.
If you liked this post, feel free to share with one of the links below, or follow our RSS feed. Also, we’re on Twitter, and you can follow us there. Thanks!
Leave a Reply