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.
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/
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/
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
Got any Idea on how I can solve this?
Thank you
Jessica
Thanks!
I followed your advice. Thanks for all your help.
Jessica
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
.screen-reader-text { position: absolute; left: -9999px; }in your CSS.