Customize WordPress Search Box and Initial Text
on September 23, 2013
Customizing the search box in WordPress is pretty straightforward once you understand what file to edit. The form for the search box is defined in searchform.php
. Unless your theme has a searchform.php
file, your site will revert to the default WordPress searchform.php
. To avoid editing the default WordPress template, you can create a searchform.php
file within your theme and customize it to your liking. Instructions below:
1) Create a file named searchform.php
within your theme (in /wp-content/themes/YOUR_THEME/searchform.php
).
2) Copy and paste the below code into the newly created file:
<form id="searchform" method="get" action="<?php bloginfo('url'); ?>/"><input type="text" value="Search this site" onblur="if(this.value == '') {this.value = 'Search this site';}" onfocus="if(this.value == 'Search this site') {this.value = '';}" name="s" id="s" size="25" /> <input type="submit" id="searchsubmit" value="Search" class="submit" name="searchsubmit"/></form>
3) To customize the text that appears in the search box, edit all instances of "Search this site"
to whatever you would like to appear. To change the width of the search box, edit the size="25"
code to whatever width you would like.
u r blog super..very useful for search box ..keep it up..
Glad you found it helpful, cheers!
Awesome dude.. It worked.. I was struggling with it the whole day.. Keep writing so useful articles..
I was seaching for the code. Finnaly I’ve found it in your site. Thx!
its not working with me if u can help me i will appreciate that for u
Did you double check to make sure you are editing the
searchform.php
file in the right theme? I.e./wp-content/themes/YOUR_THEME/searchform.php
.Thank You! This is exactly what I needed!
How do you add a search image (i.e. “the popular magnifying glass”) inside the search box and align it to the right of the box.