Shiba

Adventures in WordPress

  • — Home —
  • Dog
  • Art
  • Contact
  • WordPress Articles
    • WP Plugins
    • WP Programming
    • WP Admin Panels
    • WP Theme Design
    • WP How-To
    • WP Theme Images
You are here: Home / WordPress Design / Wordpress Search Widget – How to Style It

WordPress Search Widget – How to Style It

Tweet

by ShibaShake 56 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 –

green
Search Orange Button
blue
red

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

Add Google Search to Your WordPress Blog

Optimize search on your WordPress blog by using the ‘Search API’ plugin.

Style Your RSS Feeds in WordPress

How to display and style RSS feeds in WordPress.

Multi-Column Widget WordPress Theme

A step by step tutorial on how to add single and multi-column widgets into your WordPress theme.

Comments

  1. Nelson says

    December 16, 2020 at 7:46 am

    Tanks master – Fine

    Reply
  2. TelFiRE says

    December 5, 2018 at 10:43 am

    How do you style the “X” that shows up when you start typing?

    Reply
  3. Bob says

    April 2, 2016 at 12:33 am

    Thank you so much…

    Reply
  4. Jon says

    September 15, 2015 at 10:06 am

    Thank you, thank you, thank you, thank you!

    🙂

    Reply
  5. Gail says

    March 30, 2014 at 8:18 pm

    I don’t have the .widget_search in my CSS or a searchform.php file. What should I do?

    Reply
    • baydiver says

      July 5, 2014 at 3:48 pm

      got the same problem…can’t find the right place to edit the search bar in wordpress 3.9.1

      Reply
  6. kendell says

    January 2, 2014 at 1:04 pm

    Great stuff man…thanks alot 🙂

    Reply
  7. Peter says

    November 19, 2013 at 3:48 pm

    Excellent article! Clear and well organized.
    Thanks a lot!

    Reply
  8. Eleazar Resendez says

    October 16, 2013 at 10:41 am

    excellent and thank you

    Reply
  9. Danish says

    May 12, 2013 at 12:41 pm

    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
    • ShibaShake says

      May 16, 2013 at 7:46 am

      Yeah, this is something that is on my list to add but haven’t gotten to it yet.

      Reply
  10. Terry says

    March 10, 2013 at 4:29 am

    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
    • ShibaShake says

      March 10, 2013 at 2:11 pm

      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
  11. johnny says

    January 22, 2013 at 2:14 am

    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

    Reply
    • Terry says

      March 10, 2013 at 4:30 am

      What does that mean exactly? Where do you use it and what do you enter?

      Thnx

      Reply
  12. Cory says

    November 2, 2012 at 10:27 am

    Exactly what I was looking for, thanks!

    Reply
  13. Ellie says

    November 1, 2012 at 5:05 am

    Thank you so much this has been a great help! I’m finally rid of the “search for”!

    Reply
  14. Jakartaal says

    September 21, 2012 at 5:12 pm

    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
  15. John K says

    August 20, 2012 at 8:14 pm

    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
  16. Sound4Sites says

    August 19, 2012 at 8:03 am

    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
    • ShibaShake says

      August 19, 2012 at 12:36 pm

      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

      Reply
  17. SteveO says

    May 31, 2012 at 9:02 am

    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
    • ShibaShake says

      May 31, 2012 at 10:39 am

      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.

      Reply
      • SteveO says

        May 31, 2012 at 12:50 pm

        Thanks very much!

        Reply
  18. Todd M. says

    March 11, 2012 at 6:07 am

    Thanks for this, helped me out. I’d still love a PHP snippet for it to insert in custom page templates!

    Reply
  19. Karen Clark says

    January 21, 2012 at 11:03 pm

    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
    • ShibaShake says

      January 23, 2012 at 10:33 am

      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
  20. Em!l says

    January 5, 2012 at 1:41 am

    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
  21. @metacowboy says

    September 13, 2011 at 9:01 pm

    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
    • ShibaShake says

      September 15, 2011 at 2:08 pm

      Thanks! This is a great solution.

      I will have to update the tutorial at some point.

      Reply
      • Seb says

        December 18, 2011 at 4:00 am

        But anyway, it’s a good tutorial. 🙂 Esay to understand, easy to read. Nice job. 😉 Thanks

        Reply
    • Seb says

      December 18, 2011 at 3:59 am

      You can also add a text-indent css property and use overflow hidden to hide the text. 😉

      Reply
  22. @metacowboy says

    September 13, 2011 at 8:23 pm

    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. Kevin says

    June 26, 2011 at 2:55 am

    Thanks for your help! I’ve been scratching my head trying to resolve this for ages!

    Reply
  24. Maarten says

    June 23, 2011 at 6:25 am

    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
    • ShibaShake says

      June 23, 2011 at 9:38 am

      Thanks for the update Maarten.

      Your site looks great – love the design.

      Reply
  25. hw says

    May 7, 2011 at 1:51 pm

    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
    • ShibaShake says

      May 7, 2011 at 3:17 pm

      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
      • hw says

        May 11, 2011 at 7:57 am

        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/

        Reply
        • ShibaShake says

          May 13, 2011 at 7:27 am

          Great that you got it to work! You have some great artwork and designs.

          Reply
  26. HW says

    May 6, 2011 at 2:28 pm

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

    Reply
  27. creative says

    May 2, 2011 at 9:12 pm

    legend, great help!

    Reply
  28. Den says

    April 15, 2011 at 2:52 am

    cool tutorial…thanks

    Reply
  29. Ruben Cabral says

    February 16, 2011 at 2:20 pm

    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. ecig says

    December 29, 2010 at 9:50 am

    Great tutorial. Thanks for posting this it helped me a lot.
    Happy New Year!

    Reply
  31. Aga says

    December 14, 2010 at 2:53 pm

    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
    • ShibaShake says

      December 16, 2010 at 7:55 am

      I had a quick look at your current blog and the method above should work.

      Reply
  32. Michael says

    August 26, 2010 at 1:19 am

    Very useful!! Thanks very much 🙂

    Reply
  33. Michael says

    August 19, 2010 at 5:09 am

    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
  34. softwareblast says

    June 22, 2010 at 10:52 pm

    i have tried this. thank you

    Reply
  35. Jubbling says

    April 7, 2010 at 11:50 am

    Thanks! Great fix.

    Reply
  36. Al says

    March 23, 2010 at 12:24 pm

    Most useful!

    Thanks!

    Reply
  37. jahzoone says

    February 21, 2010 at 3:26 pm

    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
  38. Kawika says

    January 29, 2010 at 2:43 pm

    Great tutorial, really helped me out in styling my search bar to better fit the WordPress blog I was theming. Thanks a lot!

    Reply
  39. Val says

    November 1, 2009 at 3:26 pm

    The solution for removing the “Search for” text was exactly what I needed, and it worked perfectly. Thank you!

    Reply

Leave a Reply Cancel reply

Your email address will not be published.

Recent Posts

  • Screen-shot of mobile responsive Poll Daddy object, where text floats properly to the right of radio buttons.How to Make Poll Daddy Objects Mobile Responsive
  • Screen-shot of blog post with no page border (flowing design).Genesis Skins 1.5
  • Screen-shot of the media manager Create-Gallery screen, while doing a post search.Shiba Media Library 3.7
  • Screenshot of the Edit Gallery screen after we hit the Create Gallery button.How to Expand the WordPress Media Manager Interface
  • Blonde girl looking through and holding a circular picture frame.Shiba Gallery 4.3
  • Close-up of beautiful blonde holding a square picture frame.Google Authorship - Good or Bad for Search Traffic?
  • Shiba Widgets 2.0
  • Media Temple screenshot of editing my sub-domain DNS entry.Using CDN Cnames with w3tc and MultiSite
  • Shiba Skins WordPress ThemeShiba Skins WordPress Theme
  • How to add the Media Manager Menu to the Theme Preview InterfaceHow to Add the Media Manager Menu to the Theme Preview Interface

Recent Comments

  • WordPress Search Widget – How to Style It (56)
    • Nelson
      - Tanks master - Fine
    • TelFiRE
      - How do you style the "X" that shows up when you start typing?
  • Update custom inputs with the proper data using Javascript.Expand the WordPress Quick Edit Menu (58)
    • Mike G
      - This is exactly what is happening to me. It is updating the value in the database and in the column, but I have to refresh ...
    • PhoenixJP
      - Thanks for this tutorial. Does someone knows if this still work with wordpress 5.03 and 5.1.
    • Francine Carrel
      - This is a very long time away from your original comment, but did you ever work it out? I am stuck on the exact same thing ...
  • Custom meta-box with a set of radio-buttons.Add a Metabox to Your Custom Post Type Screen (27)
    • mike
      - Hi Shiba am a newbie to wordpress, I just installed a plugin with a custom post type, but has no option for discussion and ...
  • Write a Plugin for WordPress Multi-Site (45)
    • Andrew
      - Hi,action 'wpmu_new_blog' has been deprecated. Use ‘wp_insert_site’ instead.
  • Populate our Edit Gallery menu using a gallery shortcode.How to Add the WordPress 3.5 Media Manager Interface – Part 2 (29)
    • Janine
      - Still relevant in 2019.
  • WordPress Excerpt – How to Style It (36)
    • James
      - Great post. I really need some help. I have set border lines around my excerpts on my blog page/post page. The problem is ...
  • Add Custom Taxonomy Tags to Your WordPress Permalinks (123)
    • Darshan Saroya
      - Update permalinks. Go to settings > permalink and just save it.

Copyright © 2021 · Genesis Skins by ShibaShake · Terms of Service · Privacy Policy ·