Sridhar Katakam

Genesis and WordPress Tutorials

How to make search form input box text go away on focus in Genesis

by 5 Comments

Click inside the search form when using a Genesis HTML5 child theme and you will see that the placeholder text, “Search this website…” does not go away until the user types at least one character.

2014-01-08_12-39-35

In my opinion the placeholder text should disappear when the search form’s input field gets focus.

clear-search-form

In this article I present 3 ways of solving this problem.

CSS only method is the simplest.

Javascript method is the most robust and should work in any browser.

My recommendation is to use either the CSS or JS method.

PHP method is for academic interest, for those interested in looking at an example of customizing the search form completely in Genesis.

CSS only method

Add this in child theme’s style.css:

input:focus::-webkit-input-placeholder { color:transparent; }
input:focus:-moz-placeholder { color:transparent; } /* Firefox 18- */
input:focus::-moz-placeholder { color:transparent; } /* Firefox 19+ */
input:focus:-ms-input-placeholder { color:transparent; } /* oldIE 😉 */
view raw style.css hosted with ❤ by GitHub

Javascript method

Create a file named clear-search-form.js under js directory (create if not existing) in child theme having the following code:

jQuery(document).ready(function($) {
$('input').focusin(function() {
input = $(this);
input.data('place-holder-text', input.attr('placeholder'))
input.attr('placeholder', '');
});
$('input').focusout(function() {
input = $(this);
input.attr('placeholder', input.data('place-holder-text'));
});
});
view raw clear-search-form.js hosted with ❤ by GitHub

Then add this in child theme’s functions.php:

add_action( 'wp_enqueue_scripts', 'sk_clear_search_form' );
function sk_clear_search_form() {
wp_enqueue_script( 'clear-search-form', get_stylesheet_directory_uri() . '/js/clear-search-form.js', array( 'jquery' ), '1.0.0', true );
}
view raw gistfile1.php hosted with ❤ by GitHub

PHP method

Add this in child theme’s functions.php:

add_filter( 'genesis_search_form', 'sk_search_form', 10, 4 );
function sk_search_form( $form, $search_text, $button_text, $label ) {
$search_text = get_search_query() ? apply_filters( 'the_search_query', get_search_query() ) : apply_filters( 'genesis_search_text', __( 'Search this website', 'your-theme-slug' ) . '…' );
$button_text = apply_filters( 'genesis_search_button_text', esc_attr__( 'Search', 'your-theme-slug' ) );
$onfocus = "if ('" . esc_js( $search_text ) . "' === this.value) {this.value = '';}";
$onblur = "if ('' === this.value) {this.value = '" . esc_js( $search_text ) . "';}";
$label = apply_filters( 'genesis_search_form_label', '' );
$form = sprintf( '<form method="get" class="search-form" action="%s" role="search">%s<input type="search" name="s" value="%s" onfocus="%s" onblur="%s" /><input type="submit" value="%s" /></form>', home_url( '/' ), esc_html( $label ), esc_attr( $search_text ), esc_attr( $onfocus ), esc_attr( $onblur ), esc_attr( $button_text ) );
return $form;
}
view raw gistfile2.php hosted with ❤ by GitHub

References:

http://stackoverflow.com/a/17402192

http://stackoverflow.com/a/14283313

genesis/lib/structure/search.php

http://www.php.net/manual/en/function.sprintf.php

  • Sridhar, thank you so much for these tutorials. They are so precise and easy to understand. I’m glad I found this tutorial because I want my default search input text to go away once I click inside the box. Another issue with my search box is that it doesn’t display a submit button. I want to show a small, clickable magnifying glass (using my custom web font) inside the search box, on the far right. Do you have any ideas for how I could use your code above and incorporate a search submit icon? Thank you so much for your time.

    Reply
    • >