• Skip to primary navigation
  • Skip to main content
  • Skip to footer

Craig Simpson

  • Home
  • About
  • Plugins

21st August 2015 — 0

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.

<?php
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.

Code Snippets

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Footer

Get more by email

Subscribe to my email newsletter for a monthly digest of my blog posts, as well as exclusive developer content and curated links to useful resources.

Copyright © 2015–2022 Craig Simpson • Built on the Genesis Framework

Twitter GitHub