• WordPress Search Widget – How to Style It
    by ShibaShake on
    [   See Full Article   ]
    32 Comments
    1. Thanks for this, helped me out. I’d still love a PHP snippet for it to insert in custom page templates!

      6:07 am on March 11th, 2012 Reply
    2. 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

      11:03 pm on January 21st, 2012 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.

        10:33 am on January 23rd, 2012 Reply
    3. Em!l

      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!

      1:41 am on January 5th, 2012 Reply
    4. 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;
      }
      <?

      9:01 pm on September 13th, 2011 Reply
      • Thanks! This is a great solution.

        I will have to update the tutorial at some point.

        2:08 pm on September 15th, 2011 Reply
        • Seb

          But anyway, it’s a good tutorial. :) Esay to understand, easy to read. Nice job. ;) Thanks

          4:00 am on December 18th, 2011 Reply
      • Seb

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

        3:59 am on December 18th, 2011 Reply
    5. 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 .

      8:23 pm on September 13th, 2011 Reply
    6. Thanks for your help! I’ve been scratching my head trying to resolve this for ages!

      2:55 am on June 26th, 2011 Reply
    7. 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.

      6:25 am on June 23rd, 2011 Reply
      • Thanks for the update Maarten.

        Your site looks great – love the design.

        9:38 am on June 23rd, 2011 Reply
    8. hw

      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.

      1:51 pm on May 7th, 2011 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.

        3:17 pm on May 7th, 2011 Reply
        • hw

          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/

          7:57 am on May 11th, 2011 Reply
          • Great that you got it to work! You have some great artwork and designs.

            7:27 am on May 13th, 2011 Reply
    9. HW

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

      2:28 pm on May 6th, 2011 Reply
    10. creative

      legend, great help!

      9:12 pm on May 2nd, 2011 Reply
    11. Den

      cool tutorial…thanks

      2:52 am on April 15th, 2011 Reply
    12. Ruben Cabral

      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.

      2:20 pm on February 16th, 2011 Reply
    13. [...] more here: WordPress Search Widget – How to Style It Tags: [...]

      2:56 am on February 13th, 2011 Reply
    14. Great tutorial. Thanks for posting this it helped me a lot.
      Happy New Year!

      9:50 am on December 29th, 2010 Reply
    15. Aga

      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!

      2:53 pm on December 14th, 2010 Reply
      • I had a quick look at your current blog and the method above should work.

        7:55 am on December 16th, 2010 Reply
    16. Michael

      Very useful!! Thanks very much :)

      1:19 am on August 26th, 2010 Reply
    17. 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.

      5:09 am on August 19th, 2010 Reply
    18. i have tried this. thank you

      10:52 pm on June 22nd, 2010 Reply
    19. Thanks! Great fix.

      11:50 am on April 7th, 2010 Reply
    20. Al

      Most useful!

      Thanks!

      12:24 pm on March 23rd, 2010 Reply
    21. 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!!!

      3:26 pm on February 21st, 2010 Reply
    22. Great tutorial, really helped me out in styling my search bar to better fit the WordPress blog I was theming. Thanks a lot!

      2:43 pm on January 29th, 2010 Reply
    23. Val

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

      3:26 pm on November 1st, 2009 Reply

    Leave a Reply

    Your email address will not be published.

    You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">

    search button search button
    rss