Grow your CSS skills. Land your dream job.

[Solved] Hiding Text on Search Form

  • # November 20, 2009 at 12:22 pm

    I am coding my first wordpress theme and I am stuck on my search form. I want to hide the text that is next to the searchform that says "search for" I’ve tried text-indent but it indents the whole form.

    Got any Idea on how I can solve this?

    Thank you

    Jessica

    # November 20, 2009 at 1:41 pm

    I found my solution in the general-template.php line 125. I had to delete the words ‘search for:’ in between the ‘ ‘ .

    # November 20, 2009 at 2:07 pm

    The thing about editing core files is that the next time you update wordpress the problem will return. Far better to create your own searchform http://quirm.net/2009/06/18/editing-the-wordpress-search-form/

    # November 20, 2009 at 5:29 pm
    "apostrophe" wrote:
    The thing about editing core files is that the next time you update wordpress the problem will return. Far better to create your own searchform http://quirm.net/2009/06/18/editing-the-wordpress-search-form/

    Thanks!

    I followed your advice. Thanks for all your help.

    Jessica

    # November 26, 2009 at 10:54 pm

    I wasn’t sure if this is specifically WordPress related or not, but I’ll assume it is. In WordPress if you do a get_search_form(); function in a template, first it will try and find the file searchform.php in your theme and plug that in. If that doesn’t exist, it will make up it’s own search form and plug that in. When I’m making a searchform.php file for a theme, I usually take the HTML code that WordPress uses by default when that file isn’t there as a starter. I do that because it uses some ID’s and Class names that you might as well use to be consistent with the WordPress theming world. For example, the ID of the <form> is "searchform".

    Long setup here for a small point…

    For the <label> in that searchform.php, the default class name is "screen-reader-text". I think this is clever on WordPress’ part. It’s basically telling you "you don’t really need this label to show, but it’s important to be there for accessibility". So you can leave the label in there, only use

    Code:
    .screen-reader-text { position: absolute; left: -9999px; }

    in your CSS.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".