WordPress widgets offer us a lot of flexibility. By using widgets, we can easily include a variety of functions into different widget areas within our WordPress blog. However, it can sometimes be difficult to figure out how to properly style these widgets.
Here we examine how to flexibly style the native WordPress Search Widget. This is the search widget found in the searchform.php file of the default theme.
Note – If your WordPress theme has a searchform.php file, then your theme search widget will be used.
The WordPress Search Widget has several key areas –
- Widget title – This is the title of the widget that you get to enter in the Appearance >> Widgets menu.
- Search for text – Fixed “Search for” text shown on the top of the text entry box.
- Search text entry area – This is where users enter the text they want to search for.
- Search submit button – This is the search button. Clicking on it will execute a search for all public blog posts and pages containing the search text.
The good news is that all these areas can be easily modified using css. The widget title is often set by your WordPress theme, and controls not just the search widget title, but all other widget titles in the widget area. For reasons of theme consistency, you generally want to leave the widget title alone.
1. Remove Search-For Text
I don’t know about you, but the ‘Search for’ text that appears at the top of the search box is not only repetitive, but also clutters up the space.
To remove it, just enter the code below into your theme style.css file.
.widget_search .screen-reader-text { display:none; }
widget_search is the container name of the entire search widget, and
screen-reader-text is the container name of the ‘Search for’ text area.
If you like the ‘Search for’ text, you can also style it using CSS instead of just removing it.
2. Style Search Text Box
The next step is to style our search widget text box. The code below allows you to define the position and width of your search text box.
.widget_search { position:relative; background: url("search_widget_image_url.jpg") top left no-repeat; height:60px; width:180px; } .widget_search #s { position:absolute; top:30px; }
First, we set the position of the parent widget area (widget_search) to relative. This will allow us to define positions for our search text box and search submit button relative to the search parent widget.
Here, you can also set a background image for your search widget. To make the background show properly, remember to define a width and height for the widget.
Next, we position our text box relative to its parent widget. In the example above, we place our text box 30 pixels down from its parent widget. This gives enough space for our search widget title to display properly.
3. Style Search Button
The most complex part of styling our search widget is the search button.
Here, we want to replace the regular button with a glossy button. We also want to replace the text with a standard magnifying-glass search graphic.
The first step is to create some search button graphics. Here are some glossy search button graphics I created with Photoshop CS4. The magnifying glass logo used is created by Derferman. It is listed as public domain on Wikimedia. Feel free to use any of the search buttons below –
Now that we have the glossy button graphics, we can apply it to our search button with the following CSS code –
.widget_search #searchsubmit { position:absolute; top:5px; left:135px; width:40px; height:40px; background: url("images/sbutton2.png") top left no-repeat; border: none; } .widget_search #searchsubmit:hover { background: url("images/sbutton2b.png") top left no-repeat; border: none; }
Resize the button images above to suit your needs and set the width and height of the #searchsubmit area to fit the size of your button graphic. Also position the button appropriately.
This gives us a nice search widget button that changes color on mouse-over.
4. Remove Search Text
We still have a last problem – the words ‘Search’ still appears on our graphic. Since we already have an appropriate logo, as well as a search title, this text is no longer necessary.
The easiest way to remove this text, is to hook into the get_search_form filter as described by Metacowboy.
// Add to your init function add_filter('get_search_form', 'my_search_form'); function my_search_form($text) { $text = str_replace('value="Search"', 'value=""', $text); return $text; }
5. Congratulations – You Are Done!
Play around with the position of the elements, the background images, as well as the search button graphics to create your very own, personalized, …
WordPress search widget.
Tanks master – Fine
How do you style the “X” that shows up when you start typing?
Thank you so much…
Thank you, thank you, thank you, thank you!
🙂
I don’t have the .widget_search in my CSS or a searchform.php file. What should I do?
got the same problem…can’t find the right place to edit the search bar in wordpress 3.9.1
Great stuff man…thanks alot 🙂
Excellent article! Clear and well organized.
Thanks a lot!
excellent and thank you
that is so cool. but I would like to insert this widget inside a page/post. how can i do that? I mean instead of placing on the sidebar, is there a short-code or a work around for getting this widget inside my post
Yeah, this is something that is on my list to add but haven’t gotten to it yet.
Thnx for the tutorial, almost there… I am not sure how to re-size the search box itself as mine spans the whole widget background (looks ugly) and the magnifying glass is therefore not at the right hand end.
Also, I’m afraid I don’t understand Metacowboy (your) instructions about filters…not sure where or in what file that would go.
I note that Johnny (latest comment) uses a different method…sorry, don’t understand that either.
Would really appreciate a little more help to get this over the line (sorry, if I appear dumb)…:)
–T
You can resize the search box by using CSS. The search box class is usually “s” so try something like –
.widget_search .s { width: 80%; }
As for filters, they can be a bit complicated to use, if you are not familiar with PHP. Here is more on WordPress filters –
http://codex.wordpress.org/Plugin_API
As I understand it, Johnny hid the “Search” text by indenting it using CSS so that it appears outside the widget, and therefore does not get rendered. Maybe try something like –
.widget_search #searchsubmit { text-indent: 500px; }
Hi
Thank you for the tutorial. I use text-indent to hide the search text. Did not get the function option to work.
Thank you
What does that mean exactly? Where do you use it and what do you enter?
Thnx
Exactly what I was looking for, thanks!
Thank you so much this has been a great help! I’m finally rid of the “search for”!
Thank you for a great tutorial and all the tips to style the search button. Took a while to get it right but your explanations and directions were spot on. My website is not up yet but will let you know when it is.
Thanks for a very useful tutorial. I’ll just add that some themes have a different filter than the standard ‘get_search_form’. In that case, you have to look into searchform.php to find the right filter to use.
I was a bit confused when I could not remove the Search text. I think more people will encounter that problem. Here is how I solved it.
In WordPress, open the editor. Find searchform.php and click to edit it. There it shows the line for the Submit button. It has a standard value of “Search” in alot of themes. Change that to “”
I had no need for the function mentioned in this post.
The advantage of using a filter function is that the changes will carry over across theme updates. If we change the theme source file, then we have to remember each and every one of our changes, and reapply them every time there is a theme update.
http://codex.wordpress.org/Child_Themes
Has anyone figured out an easier way to remove the “Search” text? It still appears on my graphic. I’ve tried the functions.php approach and that messes with my page load. Can the javascript be inserted in another place? Am I missing something on the implementation in the functions.php file? Any input will be much appreciated!
Metacowboy has a better solution that does not involve Javascript.
http://shibashake.com/wordpress-theme/wordpress-search-widget-how-to-style-it/comment-page-1#comment-6758
I have also updated the article with this better solution.
Thanks very much!
Thanks for this, helped me out. I’d still love a PHP snippet for it to insert in custom page templates!
Thanks this is awesome! I’m also trying to figure out how to add text to the “Sorry, but no results were found.” page when they come up empty handed. Have any idea? I want to add something saying they can suggest a blog post topic if they don’t find what they are looking for. I can’t find where that text lives! LOL Take it easy and thanks for all your hard work!
Karen
Hello Karen,
That text is usually part of the theme templates. For simpler themes, it can be found in the index.php file in your theme directory. However, this is theme dependent and can be set in any of the theme files.
Thankyou so much. This helped a lot. It took awhile before I realised the problem with hiding the Doctype in IE. I put the Hide Search text script in the footer instead. Thanks a lot!
Smal mode to your code at point 4 instead of adding javascript add that before the php end braket of the funktion.php ?> will work and dont brake xmlrpc.php funktion (by sweeper)
// Remove SEARCH Text with GO in Search Box
add_filter(‘get_search_form’, ‘new_search_button’);
function new_search_button($text) {
$text = str_replace(‘value=”Search”‘, ‘value=”Go fetch”‘, $text);
return $text;
}
<?
Thanks! This is a great solution.
I will have to update the tutorial at some point.
But anyway, it’s a good tutorial. 🙂 Esay to understand, easy to read. Nice job. 😉 Thanks
You can also add a text-indent css property and use overflow hidden to hide the text. 😉
Lovly post and got a realy nice search Box with you help. the only problem now occur is that the point 4. funktion to remove the Search text will brake XMLR. It got renderd . Have to remove it for now . Probably you could test it by yourself posting from Google Docs via Xmlr or any other client .
Thanks for your help! I’ve been scratching my head trying to resolve this for ages!
Thanks for the fix, though in my case I had to look for something else.
In later versions of WordPress there is no searchform.php. What I did to remove the ‘search for’ text was the following:
I went to the general_template.php file; there you look for the search form if there is no searchform.php. Somewhere between line 124 and 170 depending on which version of WordPress one uses.
I deleted the following part:
‘ . __(‘Search for:’) . ‘
This worked for me. Hopes this helps people.
FYI http://www.2travel4ever.com is still being filled with content.
Thanks for the update Maarten.
Your site looks great – love the design.
The code added to my functions.php completely messed up my headers. Don’t know exactly what is going on, but I am stuck with the “search” text now. Any other options on removing this? When I create a searchform.php it doesn’t seem to search my site ver well.
Hello hw,
The search algorithm should be the same as long as you use your blog url in “action”, and the query argument “s” for the search text.
However, the WordPress native search may not return the best results. I use Google search on my sites. There are several plugins that allow you to do this. Just do a search for “google search” in the plugin page.
Thank you for your response. I actually was just able to incorporate the “search” text into my button design. Not part of my original plan, but we must adapt. I’m happy with it. I really app recite all the help your blog offered me. There wasn’t anything this simple that I was able to find after HOURS of searching!
http://www.northwaydesigns.com/northwaydesigns/WP/
Great that you got it to work! You have some great artwork and designs.
Hooray for you! I searched for a long time and there was very little online about customizing search bars in wordpress!! Feeling grateful!
legend, great help!
cool tutorial…thanks
Hi, when i make this and change the button for a image without background the shape of button continues equal just put the image inside, and in your image your button is a circle and my with the same image button is a square.
Great tutorial. Thanks for posting this it helped me a lot.
Happy New Year!
Would you have any advice on how to handle editing the search widget if there is no searchform.php file in the theme I am using (I use Matala theme)? Keep in mind that my experience level with HTML is elementary 🙂
Thank you!
I had a quick look at your current blog and the method above should work.
Very useful!! Thanks very much 🙂
Nice solution. Just made one tweak. I put the javascript part in header.php, just after opening head-tag. Otherwise it messes up my layout, because it is include before everything.
i have tried this. thank you
Thanks! Great fix.
Most useful!
Thanks!
Thanks for the help removing the “search for” text from my wordpress search widget. It’s obvious you know a lot about PHP and CSS coding… Your site is beautiful!!!
Great tutorial, really helped me out in styling my search bar to better fit the WordPress blog I was theming. Thanks a lot!
The solution for removing the “Search for” text was exactly what I needed, and it worked perfectly. Thank you!