Showing the Genesis Search Form Label.

Learn how to filter the Genesis search form markup, and make the label visible by removing the .screen-reader-text class.

The upcoming release of Genesis 2.2 will bring a host of accessibility enhancements. I won’t go through them all, because Rian has already given us this fantastic run-through, but suffice to say these upgrades are being welcomed by one and all.

In a recent project, built with Genesis 2.2-RC1, I had the requirement to use a search form with the label visible and styled in a specific way. With support for accessible search forms enabled, the label is hidden as screen reader text.

I could have used CSS to force the screen reader text to show, but this would be more of a hack than a solution. I went in search of a way to remove the .screen-reader-text class from the search form markup.

Eventually a solution presented itself, with a little help from Gary.

add_filter( 'genesis_search_form', 'prefix_unhide_search_label' );
function prefix_unhide_search_label( $markup ) {
return str_replace( ' screen-reader-text', '', $markup );
view raw functions.php hosted with ❤ by GitHub

Adding this snippet to functions.php will filter the search form markup, and uses the PHP function str_replace to remove occurrences of .screen-reader-text.

Leave a Reply