Genesis – Customize search form

I wanted to change my search form a bit by adding autocomplete="off" to the search input.

I initially looked for a simple filter like the following:

//* Customize search form input box text
add_filter( 'genesis_search_text', 'sp_search_text' );
function sp_search_text( $text ) {
    return esc_attr( 'Search my blog...' );
}

But because the /genesis/lib/structure/search.php did not have any variable like autocomplete="%s", that attribute could not be targeted. I probably had to introduce it directly, so I copied the search.php from the parent theme folder to the child theme folder folder.

The original code of the file was the following:

<?php

/**
 * Replace the default search form with a Genesis-specific form.
 *
 * The exact output depends on whether the child theme supports HTML5 or not.
 *
 * Applies the `genesis_search_text`, `genesis_search_button_text`, `genesis_search_form_label` and
 * `genesis_search_form` filters.
 *
 * @since 0.2.0
 *
 * @return string HTML markup for search form.
 */

add_filter( 'get_search_form', 'genesis_search_form' );

function genesis_search_form() {
    $search_text = get_search_query() ? apply_filters( 'the_search_query', get_search_query() ) : apply_filters( 'genesis_search_text', __( 'Search this website', 'genesis' ) . ' &#x02026;' );

    $button_text = apply_filters( 'genesis_search_button_text', esc_attr__( 'Search', 'genesis' ) );

    $onfocus = "if ('" . esc_js( $search_text ) . "' === this.value) {this.value="";}";
    $onblur  = "if ('' === this.value) {this.value="" . esc_js( $search_text ) . "";}";

    // Empty label, by default. Filterable.
    $label = apply_filters( 'genesis_search_form_label', '' );

    $value_or_placeholder = ( get_search_query() == '' ) ? 'placeholder' : 'value';

    if ( genesis_html5() ) {

        $form  = sprintf( '<form %s>', genesis_attr( 'search-form' ) );

        if ( genesis_a11y( 'search-form' ) ) {

            if ( '' == $label )  {
                $label = apply_filters( 'genesis_search_text', __( 'Search this website', 'genesis' ) );
            }

            $form_id = uniqid( 'searchform-' );

            $form .= sprintf(
                '<meta itemprop="target" content="%s"/><label class="search-form-label screen-reader-text" for="%s">%s</label><input itemprop="query-input" type="search" name="s" id="%s" %s="%s" /><input type="submit" value="%s" /></form>',
                home_url( '/?s={s}' ),
                esc_attr( $form_id ),
                esc_html( $label ),
                esc_attr( $form_id ),
                $value_or_placeholder,
                esc_attr( $search_text ),
                esc_attr( $button_text )
            );

        } else {

            $form .= sprintf(
                '%s<meta itemprop="target" content="%s"/><input itemprop="query-input" type="search" name="s" %s="%s" /><input type="submit" value="%s"  /></form>',
                esc_html( $label ),
                home_url( '/?s={s}' ),
                $value_or_placeholder,
                esc_attr( $search_text ),
                esc_attr( $button_text )
            );
        }


    } else {

        $form = sprintf(
            '<form method="get" class="searchform search-form" action="%s" role="search" >%s<input type="text" value="%s" name="s" class="s search-input" onfocus="%s" onblur="%s" /><input type="submit" class="searchsubmit search-submit" value="%s" /></form>',
            home_url( "https://wordpress.stackexchange.com/" ),
            esc_html( $label ),
            esc_attr( $search_text ),
            esc_attr( $onfocus ),
            esc_attr( $onblur ),
            esc_attr( $button_text )
        );

    }

    return apply_filters( 'genesis_search_form', $form, $search_text, $button_text, $label );

}

Then I removed the original filter and added my filter:

remove_filter( 'get_search_form', 'genesis_search_form' );

add_filter( 'get_search_form', 'my_search_form' );

And added autocomplete="off" to the search input, so the current is:

<?php

/**
 * Replace the default search form with a Genesis-specific form.
 *
 * The exact output depends on whether the child theme supports HTML5 or not.
 *
 * Applies the `genesis_search_text`, `genesis_search_button_text`, `genesis_search_form_label` and
 * `genesis_search_form` filters.
 *
 * @since 0.2.0
 *
 * @return string HTML markup for search form.
 */

remove_filter( 'get_search_form', 'genesis_search_form' );

add_filter( 'get_search_form', 'my_search_form' );

function my_search_form() {
    $search_text = get_search_query() ? apply_filters( 'the_search_query', get_search_query() ) : apply_filters( 'genesis_search_text', __( 'Search this website', 'genesis' ) . ' &#x02026;' );

    $button_text = apply_filters( 'genesis_search_button_text', esc_attr__( 'Search', 'genesis' ) );

    $onfocus = "if ('" . esc_js( $search_text ) . "' === this.value) {this.value="";}";
    $onblur  = "if ('' === this.value) {this.value="" . esc_js( $search_text ) . "";}";

    // Empty label, by default. Filterable.
    $label = apply_filters( 'genesis_search_form_label', '' );

    $value_or_placeholder = ( get_search_query() == '' ) ? 'placeholder' : 'value';

    if ( genesis_html5() ) {

        $form  = sprintf( '<form %s>', genesis_attr( 'search-form' ) );

        if ( genesis_a11y( 'search-form' ) ) {

            if ( '' == $label )  {
                $label = apply_filters( 'genesis_search_text', __( 'Search this website', 'genesis' ) );
            }

            $form_id = uniqid( 'searchform-' );

            $form .= sprintf(
                '<meta itemprop="target" content="%s"/><label class="search-form-label screen-reader-text" for="%s">%s</label><input itemprop="query-input" type="search" name="s" id="%s" %s="%s" autocomplete="off" spellcheck="false" autocorrect="off" autocapitalize="off" dir="auto" /><input type="submit" value="%s" /></form>',
                home_url( '/?s={s}' ),
                esc_attr( $form_id ),
                esc_html( $label ),
                esc_attr( $form_id ),
                $value_or_placeholder,
                esc_attr( $search_text ),
                esc_attr( $button_text )
            );

        } else {

            $form .= sprintf(
                '%s<meta itemprop="target" content="%s"/><input itemprop="query-input" type="search" name="s" %s="%s" autocomplete="off" spellcheck="false" autocorrect="off" autocapitalize="off" dir="auto" /><input type="submit" value="%s"  /></form>',
                esc_html( $label ),
                home_url( '/?s={s}' ),
                $value_or_placeholder,
                esc_attr( $search_text ),
                esc_attr( $button_text )
            );
        }


    } else {

        $form = sprintf(
            '<form method="get" class="searchform search-form" action="%s" role="search" >%s<input type="text" value="%s" name="s" class="s search-input" onfocus="%s" onblur="%s" autocomplete="off" spellcheck="false" autocorrect="off" autocapitalize="off" dir="auto" /><input type="submit" class="searchsubmit search-submit" value="%s" /></form>',
            home_url( "https://wordpress.stackexchange.com/" ),
            esc_html( $label ),
            esc_attr( $search_text ),
            esc_attr( $onfocus ),
            esc_attr( $onblur ),
            esc_attr( $button_text )
        );

    }

    return apply_filters( 'my_search_form', $form, $search_text, $button_text, $label );

}

It currently works perfectly on the homepage, but in any other page only the header and the tagline are generated.


Update

I’ve done some testing and found the source of the issue where the pages were not generated, it was having this in functions.php, retrieved from this site:

//* Add the search bar
add_filter( 'wp_nav_menu_items', 'sp_menu_items', 10, 2 );
function sp_menu_items( $items, $args ) {

    $items .= sprintf( '<li id="sb" class="menu-item sb">%s</li>', get_search_form( false ) );
    return $items;

}

and having the current code I was testing in the searchform.php, retrieved from this site

<?php

add_filter( 'genesis_search_form', 'my_search_form', 10, 1);
function my_search_form( $form ) {

$search_text = get_search_query() ? apply_filters( 'the_search_query', get_search_query() ) : apply_filters( 'genesis_search_text', __( 'Search this website', 'genesis' ) . ' &#x02026;' );

$button_text = apply_filters( 'genesis_search_button_text', esc_attr__( 'Search', 'genesis' ) );

$onfocus = "if ('" . esc_js( $search_text ) . "' === this.value) {this.value="";}";
$onblur  = "if ('' === this.value) {this.value="" . esc_js( $search_text ) . "";}";

// Empty label, by default. Filterable.
$label = apply_filters( 'genesis_search_form_label', '' );

$value_or_placeholder = ( get_search_query() == '' ) ? 'placeholder' : 'value';

$form = sprintf(
            '<form class="search-form"><meta itemprop="target" content="%s"/><label class="search-form-label screen-reader-text" for="%s">%s</label><input itemprop="query-input" type="search" name="s" id="%s" placeholder="%s" autocomplete="off" spellcheck="false" autocorrect="off" autocapitalize="off" dir="auto" /><input type="submit" value="%s" /></form>',
            home_url( '/?s={s}' ),
            esc_attr( $form_id ),
            esc_html( $label ),
            esc_attr( $form_id ),
            esc_attr( $search_text ),
            esc_attr( $button_text )
        );

return $form;

}

Removing any or using both in functions.php will result in all pages displaying correctly. Any idea why?


Documentation for get_search_form

Documentation for genesis_search_form

Documentation for Genesis Snippets

1
1

I’m not sure why you’re getting a 500 error. Likely because you’re trying to use a function before it’s been defined.

But I think you’re going about the problem the wrong way. Genesis does provide a filter before returning the search form. Why not just add a filter to the genesis_search_form hook?

You can add the filter to your child theme functions.php file:

add_filter( 'genesis_search_form', function( $form, $search_text, $button_text, $label ) { 
  return str_replace( 
    'type="search"', 
    'type="search" autocomplete="off" spellcheck="false" autocorrect="off" autocapitalize="off" dir="auto"', 
    $form 
  );
}, 10, 4 );

Alternate (untested, but it should work) method using substr_replace():

add_filter( 'genesis_search_form', function( $form, $search_text, $button_text, $label ) { 
  $insert=" autocomplete="off" spellcheck="false" autocorrect="off" autocapitalize="off" dir="auto"";
  $needle="type="search"";
  $where = strpos( $form, $needle ) + strlen( $needle );
  return substr_replace( $form, $insert, $where, 0 );
}, 10, 4 );

You’re getting a 500 error because you can’t have a function as an argument in sprintf(). Try this:

//* Add the search bar
add_filter( 'wp_nav_menu_items', 'sp_menu_items', 10, 2 );
function sp_menu_items( $items, $args ) {
    $form = get_search_form( false );
    $items .= sprintf( '<li id="sb" class="menu-item sb">%s</li>', $form );
    return $items;

}

Leave a Comment