One of the most frequent requests we get as web developers and web designers is “How do I add a placeholder to my WordPress Search Box”? The placeholder for a textbox is the text that appears in the textbox when the page loads. When a user clicks into the textbox to input text, the placeholder text will disappears. The placeholder value will reappear if the user removes focus from the textbox and no value was input by the user.
Placeholder for WordPress Search Widget
Adding a placeholder can be very simple in new modern browsers that have the “placeholder” parameter implemented for a textbox however, old browsers do not support this parameter. The following javascript code, utilizing jQuery, makes it easy to add a placeholder value to your WordPress search box (or any textbox).
New browsers will render the following placeholder=” parameter.
<input type='text' placeholder='Search my website....' value=''>
Old browsers need a little help with Javascript and jQuery. In my example, I place the code in the /wp-content/themes/thesis_184/custom/custom_functions.php file. If you are using a different theme like Genesis, you can put this code in the the child theme folder in the functions.php file (i.e /wp-content/themes/[your_folder_name]/functions.php).
First, you need to place the following javascript code into the <head></head>. This can be accomplished by using the built in “wp_head” hook. A hook is simply a way for you to insert code/content into your website. In the example, you’ll see that I use the add_action() function to hook my function add_js_placeholder to the wp_head hook. Sounds crazy, but it’s easy to copy and paste the code. The code may seem a little complex, but it’s setup to automatically work on the default version of the search widget built into WordPress.
[rendercode:searchplaceholder]
Placeholder for any Textbox
Here is a simple version that references the form and textbox with seperate ids. You’ll notice that the form id is called myform and the textbox is called myfield. Make sure when you reference your form and field, that you have a form with id=”myform” and a textbox with an id=”myfield”.
[rendercode:searchplaceholdersimple]
The post Adding Placeholder value to WordPress Textbox appeared first on Moritz Fine Designs BLOG.