Shiba

Adventures in WordPress

You are here: Home / WordPress Design / Wordpress Search Widget – How to Style It

WordPress Search Widget – How to Style It

by 55 Comments

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.

Native WordPress search widget.

The WordPress Search Widget has several key areas –

  1. Widget title – This is the title of the widget that you get to enter in the Appearance >> Widgets menu.
  2. Search for text – Fixed “Search for” text shown on the top of the text entry box.
  3. Search text entry area – This is where users enter the text they want to search for.
  4. 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;
}
Styled WordPress search widget.

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; 
}
Styled WordPress search widget.

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!

Styled WordPress search widget.

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.

Related Articles

Comments

  8. 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

    Reply

  9. 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

    Reply

    • 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; }

      Reply

  13. 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.

    Reply

  14. 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.

    Reply

  15. 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.

    Reply

  16. 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!

    Reply

  18. 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

    Reply

    • 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.

      Reply

  19. 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!

    Reply

  20. 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;
    }
    <?

    Reply

  21. 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 .

    Reply

  23. 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.

    Reply

  24. 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.

    Reply

    • 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.

      Reply

  25. Hooray for you! I searched for a long time and there was very little online about customizing search bars in wordpress!! Feeling grateful!

    Reply

  28. 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.

    Reply

  30. 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!

    Reply

  32. 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.

    Reply

  36. 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!!!

    Reply

Leave a Reply

Your email address will not be published.